摘要：日歷的項(xiàng)目地址示例上的一個(gè)日歷控件，可以定制成自己想要的樣子。跳轉(zhuǎn)到指定日期，默認(rèn)支持動(dòng)畫(huà)切換自定義日歷，支持組合的方式和利用繪制的方式自定義頂部的可以給添加自定義的額外數(shù)據(jù)，實(shí)現(xiàn)各種額外的功能。

最近自己寫(xiě)了個(gè)demo，用到了日歷方面的東西，然后實(shí)現(xiàn)來(lái)一下，最后打算封裝一下，以后可以直接拿來(lái)使用。

參考了Android的一個(gè)開(kāi)源日歷庫(kù)github.com/huanghaibin…，實(shí)現(xiàn)思路其實(shí)差不多，都是可以利用canvas將日歷給畫(huà)出來(lái)。

Flutter日歷的項(xiàng)目地址：github.com/LXD31256949…

Flutter上的一個(gè)日歷控件，可以定制成自己想要的樣子。

支持公歷，農(nóng)歷，節(jié)氣，傳統(tǒng)節(jié)日，常用節(jié)假日

日期范圍設(shè)置，默認(rèn)支持的最大日期范圍為1971.01-2055.12

禁用日期范圍設(shè)置，比如想實(shí)現(xiàn)某范圍的日期內(nèi)可以點(diǎn)擊，范圍外的日期置灰

支持單選、多選模式，提供多選超過(guò)限制個(gè)數(shù)的回調(diào)和多選超過(guò)指定范圍的回調(diào)。

跳轉(zhuǎn)到指定日期，默認(rèn)支持動(dòng)畫(huà)切換

自定義日歷Item，支持組合widget的方式和利用canvas繪制的方式

自定義頂部的WeekBar

可以給Item添加自定義的額外數(shù)據(jù)，實(shí)現(xiàn)各種額外的功能。比如實(shí)現(xiàn)進(jìn)度條風(fēng)格的日歷

在pubspec.yaml添加依賴:

flutter_custom_calendar:
    git:
      url: https://github.com/LXD312569496/flutter_custom_calendar.git

引入flutter_custom_calendar,就可以使用CalendarViewWidget，配置CalendarController就可以了。

import "package:flutter_custom_calendar/flutter_custom_calendar.dart";

CalendarViewWidget({@required this.calendarController, this.boxDecoration});

boxDecoration用來(lái)配置整體的背景

利用CalendarController來(lái)配置一些數(shù)據(jù)，并且可以通過(guò)CalendarController進(jìn)行一些操作或者事件監(jiān)聽(tīng)，比如滾動(dòng)到下一個(gè)月，獲取當(dāng)前被選中的Item等等。

下面是CalendarController中一些支持自定義配置的屬性。不配置的話，會(huì)有對(duì)應(yīng)的默認(rèn)值。

//默認(rèn)是單選,可以配置為MODE_SINGLE_SELECT，MODE_MULTI_SELECT
int selectMode;

//日歷顯示的最小年份和最大年份
int minYear;
int maxYear;

//日歷顯示的最小年份的月份，最大年份的月份
int minYearMonth;
int maxYearMonth;

//日歷顯示的當(dāng)前的年份和月份
int nowYear;
int nowMonth;

//可操作的范圍設(shè)置,比如點(diǎn)擊選擇
int minSelectYear;
int minSelectMonth;
int minSelectDay;

int maxSelectYear;
int maxSelectMonth;
int maxSelectDay; //注意：不能超過(guò)對(duì)應(yīng)月份的總天數(shù)

Set selectedDateList = new Set(); //被選中的日期,用于多選
DateModel selectDateModel; //當(dāng)前選擇項(xiàng),用于單選
int maxMultiSelectCount; //多選，最多選多少個(gè)
Map extraDataMap = new Map(); //自定義額外的數(shù)據(jù)

//各種事件回調(diào)
OnMonthChange monthChange; //月份切換事件
OnCalendarSelect calendarSelect; //點(diǎn)擊選擇事件
OnMultiSelectOutOfRange multiSelectOutOfRange; //多選超出指定范圍
OnMultiSelectOutOfSize multiSelectOutOfSize; //多選超出限制個(gè)數(shù)

//支持自定義繪制
DayWidgetBuilder dayWidgetBuilder; //創(chuàng)建日歷item
WeekBarItemWidgetBuilder weekBarItemWidgetBuilder; //創(chuàng)建頂部的weekbar

//構(gòu)造函數(shù)
    CalendarController(
      {int selectMode = Constants.MODE_SINGLE_SELECT,
      DayWidgetBuilder dayWidgetBuilder = defaultCustomDayWidget,
      WeekBarItemWidgetBuilder weekBarItemWidgetBuilder = defaultWeekBarWidget,
      int minYear = 1971,
      int maxYear = 2055,
      int minYearMonth = 1,
      int maxYearMonth = 12,
      int nowYear = -1,
      int nowMonth = -1,
      int minSelectYear = 1971,
      int minSelectMonth = 1,
      int minSelectDay = 1,
      int maxSelectYear = 2055,
      int maxSelectMonth = 12,
      int maxSelectDay = 30,
      Set selectedDateTimeList = EMPTY_SET,
      DateModel selectDateModel,
      int maxMultiSelectCount = 9999,
      Map extraDataMap = EMPTY_MAP})

比如月份切換事件、點(diǎn)擊選擇事件。

//月份切換監(jiān)聽(tīng)
void addMonthChangeListener(OnMonthChange listener) {
  this.monthChange = listener;
}
//點(diǎn)擊選擇監(jiān)聽(tīng)
void addOnCalendarSelectListener(OnCalendarSelect listener) {
  this.calendarSelect = listener;
}
//多選超出指定范圍
void addOnMultiSelectOutOfRangeListener(OnMultiSelectOutOfRange listener) {
  this.multiSelectOutOfRange = listener;
}
//多選超出限制個(gè)數(shù)
void addOnMultiSelectOutOfSizeListener(OnMultiSelectOutOfSize listener) {
  this.multiSelectOutOfSize = listener;
}

//跳轉(zhuǎn)到指定日期
void moveToCalendar(int year, int month, int day,
    {bool needAnimation = false,
    Duration duration = const Duration(milliseconds: 500),
    Curve curve = Curves.ease});
//切換到下一年
void moveToNextYear();
//切換到上一年
void moveToPreviousYear();
//切換到下一個(gè)月份,
void moveToNextMonth();
//切換到上一個(gè)月份
void moveToPreviousMonth();

// 獲取當(dāng)前的月份
DateTime getCurrentMonth();
//獲取被選中的日期,多選
Set getMultiSelectCalendar();
//獲取被選中的日期，單選
DateModel getSingleSelectCalendar();

包括自定義WeekBar、自定義日歷Item，默認(rèn)使用的都是DefaultXXXWidget。

只要繼承對(duì)應(yīng)的Base類(lèi)，實(shí)現(xiàn)相應(yīng)的方法，然后只需要在配置Controller的時(shí)候，實(shí)現(xiàn)相應(yīng)的Builder方法就可以了。

//支持自定義繪制
DayWidgetBuilder dayWidgetBuilder; //創(chuàng)建日歷item
WeekBarItemWidgetBuilder weekBarItemWidgetBuilder; //創(chuàng)建頂部的weekbar

繼承BaseWeekBar，重寫(xiě)getWeekBarItem(index)方法就可以。隨便你怎么實(shí)現(xiàn)，只需要返回一個(gè)Widget就可以了。

class DefaultWeekBar extends BaseWeekBar {
  const DefaultWeekBar({Key key}) : super(key: key);
  @override
  Widget getWeekBarItem(int index) {
    /**
    * 自定義Widget
    */
    return new Container(
      height: 40,
      alignment: Alignment.center,
      child: new Text(
        Constants.WEEK_LIST[index],
        style: topWeekTextStyle,
      ),
    );
  }
}

提供兩種方法，一種是利用組合widget的方式來(lái)創(chuàng)建，一種是利用Canvas來(lái)自定義繪制Item。最后只需要在CalendarController的構(gòu)造參數(shù)中進(jìn)行配置就可以了。

繼承BaseCombineDayWidget，重寫(xiě)getNormalWidget(DateModel dateModel) 和getSelectedWidget(DateModel dateModel)就可以了，返回對(duì)應(yīng)的widget就行。

class DefaultCombineDayWidget extends BaseCombineDayWidget {
  DefaultCombineDayWidget(DateModel dateModel) : super(dateModel);

  @override
  Widget getNormalWidget(DateModel dateModel) {
     //實(shí)現(xiàn)默認(rèn)狀態(tài)下的UI
  }

  @override
  Widget getSelectedWidget(DateModel dateModel) {
    //繪制被選中的UI
  }
}

繼承BaseCustomDayWidget，重寫(xiě)drawNormal和drawSelected的兩個(gè)方法就可以了，利用canvas自己繪制Item。

class DefaultCustomDayWidget extends BaseCustomDayWidget {
  DefaultCustomDayWidget(DateModel dateModel) : super(dateModel);
  @override
  void drawNormal(DateModel dateModel, Canvas canvas, Size size) {
    //實(shí)現(xiàn)默認(rèn)狀態(tài)下的UI
    defaultDrawNormal(dateModel, canvas, size);
  }
  @override
  void drawSelected(DateModel dateModel, Canvas canvas, Size size) {
    //繪制被選中的UI
    defaultDrawSelected(dateModel, canvas, size);
  }
}

日歷所用的日期的實(shí)體類(lèi)DateModel，有下面這些屬性。

/**
 * 日期的實(shí)體類(lèi)
 */
class DateModel {
  int year;
  int month;
  int day = 1;
  int lunarYear;
  int lunarMonth;
  int lunarDay;
  String lunarString; //農(nóng)歷字符串
  String solarTerm; //24節(jié)氣
  String gregorianFestival; //公歷節(jié)日
  String traditionFestival; //傳統(tǒng)農(nóng)歷節(jié)日
  bool isCurrentDay; //是否是今天
  bool isLeapYear; //是否是閏年
  bool isWeekend; //是否是周末
  int leapMonth; //是否是閏月
  Object extraData; //自定義的額外數(shù)據(jù)
  bool isInRange = false; //是否在范圍內(nèi),比如可以實(shí)現(xiàn)在某個(gè)范圍外，設(shè)置置灰的功能
  bool isSelected; //是否被選中，用來(lái)實(shí)現(xiàn)一些標(biāo)記或者選擇功能
  @override
  String toString() {
    return "DateModel{year: $year, month: $month, day: $day}";
  } //如果是閏月，則返回閏月

  //轉(zhuǎn)化成DateTime格式
  DateTime getDateTime() {
    return new DateTime(year, month, day);
  }
  //根據(jù)DateTime創(chuàng)建對(duì)應(yīng)的model，并初始化農(nóng)歷和傳統(tǒng)節(jié)日等信息
  static DateModel fromDateTime(DateTime dateTime) {
    DateModel dateModel = new DateModel()
      ..year = dateTime.year
      ..month = dateTime.month
      ..day = dateTime.day;
    LunarUtil.setupLunarCalendar(dateModel);
    return dateModel;
  }
  @override
  bool operator ==(Object other) =>
      identical(this, other) ||
      other is DateModel &&
          runtimeType == other.runtimeType &&
          year == other.year &&
          month == other.month &&
          day == other.day;
  @override
  int get hashCode => year.hashCode ^ month.hashCode ^ day.hashCode;
}

優(yōu)化代碼實(shí)現(xiàn)

支持屏蔽指定的某些天

繼續(xù)寫(xiě)幾個(gè)不同風(fēng)格的Demo

支持周視圖

支持動(dòng)畫(huà)切換周視圖和月視圖