Flutter?日歷組件簡(jiǎn)單實(shí)現(xiàn)

更新時(shí)間：2022年08月05日 10:03:39 作者：zeqinjie

這篇文章主要為大家介紹了Flutter?日歷組件簡(jiǎn)單實(shí)現(xiàn)的圖文示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言

近期有個(gè)業(yè)務(wù)需求，涉及用戶付費(fèi)相關(guān)的計(jì)算，需要一個(gè)日歷組件，組件功能如下：

僅支持從明天開始選擇預(yù)定日期
僅支持可選范圍內(nèi)的日期
日期的選擇是連續(xù)的
有個(gè)推薦日期，需要聯(lián)動(dòng)更新
todo:
- 支持不連續(xù)的日期選擇

Github：tw_calendar

安裝

dependencies:
  tw_calendar: latest_version

效果

demo 演示

業(yè)務(wù)使用 headerView

使用

配置屬性

 /// 開始的年月份
  final DateTime firstDate;
  /// 結(jié)束的年月份
  final DateTime lastDate;
  /// 選擇開始日期
  final DateTime? selectedStartDate;
  /// 選擇結(jié)束日期
  final DateTime? selectedEndDate;
  /// 點(diǎn)擊方法回調(diào)
  final Function? onSelectFinish;
  /// 頭部組件
  final Widget? headerView;
  /// 選擇模式
  final TWCalendarListSeletedMode? seletedMode;
  /// 月視圖高度，為空則占滿剩余空間
  final double? monthBodyHeight;
  /// 周視圖高度， 默認(rèn) 48
  final double? weekDayHeight;
  /// 水平間隙
  final double? horizontalSpace;
  /// 確認(rèn)周視圖高度， 默認(rèn) 66
  final double? ensureViewHeight;
  /// 確認(rèn)按鈕的間隙
  final EdgeInsetsGeometry? ensureViewPadding;
  /// 確認(rèn)按鈕選中顏色
  final Color? ensureViewSelectedColor;
  /// 確認(rèn)未按鈕選中顏色
  final Color? ensureViewUnSelectedColor;
  /// 今天的日期的背景顏色
  final Color? dayNumberTodayColor;
  /// 選中日期背景顏色
  final Color? dayNumberSelectedColor;
  /// 確認(rèn)按鈕字體大小
  final double? ensureTitleFontSize;
  /// 點(diǎn)擊回調(diào)
  final void Function(DateTime seletedDate, int seletedDays)? onSelectDayRang;
  /// 選擇確認(rèn)按鈕 title 回調(diào)
  final String Function(
          DateTime? selectStartTime, DateTime? selectEndTime, int seletedDays)?
      onSelectDayTitle;

DEMO

TWCalendarList(
      firstDate: TWCalendarTool.tomorrow,
      lastDate: DateTime(2022, 11, 21),
      selectedStartDate: DateTime(2022, 9, 2),
      selectedEndDate: DateTime(2022, 9, 10),
      monthBodyHeight: 300.w,
      seletedMode: TWCalendarListSeletedMode.singleSerial,
      headerView: Container(
        alignment: Alignment.center,
        height: 55.w,
        child: Text(
          '日歷組件',
          style: TextStyle(
            color: TWColors.tw333333,
            fontSize: 18.w,
          ),
        ),
      ),
      onSelectDayRang: ((seletedDate, seletedDays) {
        print('seletedDate : $seletedDate, seletedDays : $seletedDays');
      }),
      onSelectFinish: (selectStartTime, selectEndTime) {
        print(
            'selectStartTime : $selectStartTime, selectEndTime : $selectEndTime');
        Navigator.pop(context);
      },
    )