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

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

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

Flutter日歷的項目地址：github.com/LXD31256949…

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

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

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

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

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

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

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

自定義頂部的WeekBar

可以給Item添加自定義的額外數(shù)據(jù)，實現(xiàn)各種額外的功能。比如實現(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用來配置整體的背景

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

下面是CalendarController中一些支持自定義配置的屬性。不配置的話，會有對應(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è)置,比如點擊選擇
int minSelectYear;
int minSelectMonth;
int minSelectDay;

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

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

//各種事件回調(diào)
OnMonthChange monthChange; //月份切換事件
OnCalendarSelect calendarSelect; //點擊選擇事件
OnMultiSelectOutOfRange multiSelectOutOfRange; //多選超出指定范圍
OnMultiSelectOutOfSize multiSelectOutOfSize; //多選超出限制個數(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})

比如月份切換事件、點擊選擇事件。

//月份切換監(jiān)聽
void addMonthChangeListener(OnMonthChange listener) {
  this.monthChange = listener;
}
//點擊選擇監(jiān)聽
void addOnCalendarSelectListener(OnCalendarSelect listener) {
  this.calendarSelect = listener;
}
//多選超出指定范圍
void addOnMultiSelectOutOfRangeListener(OnMultiSelectOutOfRange listener) {
  this.multiSelectOutOfRange = listener;
}
//多選超出限制個數(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();
//切換到下一個月份,
void moveToNextMonth();
//切換到上一個月份
void moveToPreviousMonth();

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

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

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

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

繼承BaseWeekBar，重寫getWeekBarItem(index)方法就可以。隨便你怎么實現(xiàn)，只需要返回一個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的方式來創(chuàng)建，一種是利用Canvas來自定義繪制Item。最后只需要在CalendarController的構(gòu)造參數(shù)中進(jìn)行配置就可以了。

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

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

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

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

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

class DefaultCustomDayWidget extends BaseCustomDayWidget {
  DefaultCustomDayWidget(DateModel dateModel) : super(dateModel);
  @override
  void drawNormal(DateModel dateModel, Canvas canvas, Size size) {
    //實現(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);
  }
}

日歷所用的日期的實體類DateModel，有下面這些屬性。

/**
 * 日期的實體類
 */
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),比如可以實現(xiàn)在某個范圍外，設(shè)置置灰的功能
  bool isSelected; //是否被選中，用來實現(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)建對應(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)化代碼實現(xiàn)

支持屏蔽指定的某些天

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

支持周視圖

支持動畫切換周視圖和月視圖