日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無(wú)先后,達(dá)者為師

網(wǎng)站首頁(yè) 編程語(yǔ)言 正文

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

作者:zeqinjie ? 更新時(shí)間: 2022-09-30 編程語(yǔ)言

前言

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

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

Github:tw_calendar

安裝

dependencies:
  tw_calendar: latest_version

效果

demo 演示

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

使用

配置屬性

 /// 開(kāi)始的年月份
  final DateTime firstDate;
  /// 結(jié)束的年月份
  final DateTime lastDate;
  /// 選擇開(kāi)始日期
  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);
      },
    )

感謝

參考及修改至 demo: flutter_calendar_list

原文鏈接:https://juejin.cn/post/7127970073897074702

欄目分類(lèi)
最近更新