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

學無先后，達者為師

網站首頁 編程語言 正文

Flutter?日歷組件簡單實現_Android

作者：zeqinjie ? 更新時間： 2022-09-30 編程語言

前言

近期有個業務需求，涉及用戶付費相關的計算，需要一個日歷組件，組件功能如下：

  • 僅支持從明天開始選擇預定日期
  • 僅支持可選范圍內的日期
  • 日期的選擇是連續的
  • 有個推薦日期，需要聯動更新
  • todo:
    • 支持不連續的日期選擇

Github：tw_calendar

安裝

dependencies:
  tw_calendar: latest_version

效果

demo 演示

業務使用 headerView

使用

配置屬性

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

欄目分類
最近更新