首頁>編程相關>其他源碼
下載

calendardatePicker2

基於Flutter CalendardatePicker的輕巧且可自定義的日曆選擇器，並支持單個日期選擇器，範圍選擇器和多選器。

單模挑選多模式選擇射程挑選模式對話 - 功能
單模式多模式範圍模式對話框功能
單滾動多捲軸範圍滾動對話框滾動

簡介

calendardatePicker2由兩個主要小部件組成：

  • CalendarDatePicker2 ，此窗口小部件僅包含日曆UI，並且每當用戶點擊其他日期時會發出事件。
  • CalendarDatePicker2WithActionButtons ，此小部件包括日曆UI和操作按鈕（CANCEL＆OK）。此窗口小部件只有在用戶點擊“確定”按鈕時會發出更新的值。

特徵

  • 擴展的calendardatepicker允許null initiaLdate
  • 高度可定制的UI
  • 支持三種模式：單，多和範圍
  • 支持四次觀看：日，月，年和滾動
  • 內置的showCalendarDatePicker2Dialog
  • 多語言支持
  • 支持材料3

從0.xx遷移

1.xx版本默認情況下將啟用月份選擇器。如果您想從v0.xx遷移到v1.xx，並希望保持舊行為，則需要將disableMonthPicker設置為true 。

如何使用

確保查看示例以獲取更多詳細信息。

安裝

將以下行添加到pubspec.yaml ： 

 dependencies :
calendar_date_picker2 : ^1.1.8

基本設置

完整的示例可在此處找到。

calendardatePicker2要求您提供config和value ：

  • config包含日曆設置和UI的配置。
  • value是傳遞到日曆選擇器的初始值， value必須是List 。

最低工作樣本

 CalendarDatePicker2 (
  config : CalendarDatePicker2Config (),
  value : _dates,
  onValueChanged : (dates) => _dates = dates,
);

單日期選擇器配置

在CalendarDatePicker2Config的初始化期間，默認情況下，配置實例的calendarType將設置為CalendarDatePicker2Type.single ，因此您不必專門設置日曆類型。

多日期選擇器配置

為了使用多模式日期選擇器，您將需要將Config的日曆類型設置為CalendarDatePicker2Type.multi ： 

 CalendarDatePicker2 (
  config : CalendarDatePicker2Config (
      calendarType : CalendarDatePicker2Type .multi,
  ),
  value : _dates,
  onValueChanged : (dates) => _dates = dates,
);

範圍日期選擇器配置

為了使用範圍模式日期選擇器，您需要將config的日曆類型設置為CalendarDatePicker2Type.range ： 

 CalendarDatePicker2 (
  config : CalendarDatePicker2Config (
      calendarType : CalendarDatePicker2Type .range,
  ),
  value : _dates,
  onValueChanged : (dates) => _dates = dates,
);

使用內置對話框顯示方法

此軟件包包括內置支持，以顯示日曆為對話框。要使用它，您將需要調用showCalendarDatePicker2Dialog ，該dialog採用三個必需的參數： context ， config ， dialogSize ： 

...
var results = await showCalendarDatePicker2Dialog (
  context : context,
  config : CalendarDatePicker2WithActionButtonsConfig (),
  dialogSize : const Size ( 325 , 400 ),
  value : _dates,
  borderRadius : BorderRadius . circular ( 15 ),
);
...

配置選項

對於calendardatePicker2小部件

爭論類型描述
config calendardatepicker2config日曆UI相關配置
價值列表<dateTime？ >選擇器應顯示的選定[dateTime]。
Onvaluechanged Valuechanged <List <DateTime >>？當選定日期更改時調用
DisplayedMonthdate DateTime？顯示日曆的日期顯示月份
ondisplayedMonthchanged valuechanged <dateTime>？當用戶在非滾動模式下以選擇器的新月/年導航時調用

對於calendardatepicker2config：

選項類型描述
CalendArtype calendardatePicker2Type？日曆選擇器類型，有3個值：單，多，範圍
攬勝布爾？標誌以使選擇日期範圍也以逆性順序為
首先DateTime？最早允許的DateTime用戶可以選擇
最後DateTime？最新的允許DateTime用戶可以選擇
電流日期DateTime？今天代表將在日曆中概述的DateTime
CalendarViewMode calendardatepicker2mode？最初顯示的日曆選擇器的視圖，可提供四個選項：日，月，年和滾動
CalendarViewScrollphysics滾動物理學？日曆月視圖的滾動物理學
Dynamiccalendarrows布爾？標誌以根據特定月份啟用動態日曆行
允許AmevalueSelection布爾？標誌以控制[onvaluechanged]行為
AnimAteTodIsplayedMonthdate布爾？標誌總是動畫到顯示
語義日誌地圖？語義標籤的自定義詞典
禁用武器布爾？標誌以禁用日期選擇振動
工作日標籤List <string>？定制的工作日標籤，應從星期日開始
WeekdayLabelTextstyle文本風格？平日標籤的自定義文本樣式
WeekdayLabelBuilder WeekdayLabelBuilder？在工作日標籤小部件上提供完全控制的功能
週末的第一天int？第一天的第一天的索引，為周日0分，在周六的6分。
Lastmonthicon小部件？上個月的自定義圖標按鈕控制
Hidelastmonthicon布爾？上個月隱藏的標誌圖標
Nextmonthicon小部件？下個月的自定義圖標按鈕控制
HIDENEXTMONTHICON布爾？標誌以隱藏下個月圖標
控制權雙倍的？日曆控制切換高度的自定義高度
CONTROLSTEXTSTYLE文本風格？日曆模式切換控制控制的自定義文本樣式
CenteralAlignModepicker布爾？標誌以在控件中集中年度和月的文本標籤
ModePickersGap雙倍的？自定義差距距離之間的距離挑選器之間的距離
DisableModepicker布爾？標誌以禁用模式選擇器並隱藏切換圖標
modepickertexthandler modepickertexthandler？控制模式選擇器顯示的文本
模型構成ModePickerBuilder？功能可以完全控制模式選擇器UI
Custommodepickericon小部件？模式選擇器按鈕圖標的自定義圖標
Useabbrlabelformonthmodepicker布爾？使用縮寫標籤作為一個月模式選擇器，僅在啟用月份採摘器時工作
DayviewController pagecontroller？日曆日視圖的自定義頁面控制器
Daymaxwidth雙倍的？最大寬度小部件。當[daymaxwidth]不是零時，它將覆蓋默認大小設置
Dayborderradius Borderradius？日常指示器的自定義邊界半徑
Daytextstyle文本風格？日曆日的自定義文本樣式
今天的Textstyle文本風格？當前日曆日的自定義文本樣式
殘疾日textstyle文本風格？禁用日曆日的自定義文本樣式
daytextstylepredicate daytextstylepredicate？在日曆日提供完全控制的功能
SelecteDayHighlightColor顏色？精選的彩色一天
Selected Daytextstyle文本風格？選定日曆日的自定義文本樣式
selectabledaypredicate selectabledaypredicate？可以完全控制日曆中哪些日期的功能
SelectedRangeDayTextstyle文本風格？選定範圍日曆日的自定義文本樣式
SelectedRangeHighlighlightColor顏色？選定範圍中包含的白天的高光顏色
選定的RangeDecorationPredicate選擇的rangeDecorationPredicate？謂詞在選定範圍內確定一天的天窗裝飾
SelectedRangeHighlighluilder SelectedRangeHighHighlighluilder？功能以提供對范圍拾取器高光的全面控制
Daysplashcolor顏色？一天小部件的飛濺顏色
夏令者夏令者？功能以提供全天候窗口小部件UI的全面控制
Daymodescrolldirection軸？ [calendardatepicker2mode.day]模式的軸滾動方向
monthviewController滾動controller？日曆月視圖的自定義滾動控制器
月建造者一個月構建器？功能可在月窗口ui上提供全面控制
Hidemonthpickerdividers布爾？在月份採摘者上隱藏隔板的標誌
selectablemonthpredicate selectablemonthpredicate？功能以提供可以選擇可以選擇哪個月份的哪個月份的功能。
disablemonthpicker布爾？標誌以禁用月份採摘者
Montertextstyle文本風格？每月的自定義文本樣式
SelectedMonthtextstyle文本風格？選擇月份的自定義文本樣式
disabledmonthtextstyle文本風格？殘疾月的自定義文本樣式
YearviewController滾動controller？日曆年視圖的自定義滾動控制器
YearBorderradius Borderradius？年度指標的自定義邊界半徑
YearTextstyle文本風格？年份的自定義文本樣式
SelectyEartextstyle文本風格？選定年份的自定義文本樣式
Disabledyeartextstyle文本風格？殘疾年的自定義文本樣式
可選的prodicate可選的prodicate？功能可以完全控制一年中的哪個清單。
年製造商Yeard -Builder？功能以提供對年窗口小部件UI的全面控制
hideyearpickerdividers布爾？國旗以隱藏年度採摘者
滾動viewTopheDertextStyle文本風格？滾動視圖的自定義文本樣式頂級標籤標籤標題
HIDESCROLLVIEWTOPHENER布爾？標誌以隱藏滾動視圖拾音器上的頂級標籤標籤標籤
HIDESCROLLVIEWTOPHEDERDIVIDER布爾？標誌以隱藏頂級標籤標籤標籤滾動視圖上的標題分隔線
HIDESCROLLVIEWMONTHWEEKHEADER布爾？標誌以隱藏月曆週週的標籤標籤標籤標題滾動視圖
scrollViewConstraints BoxSconstraints？滾動日曆視圖的BoxSconstraints，僅用於滾動模式
滾動視圖monthyearbuilder滾動視圖monthyearbuilder？功能以提供對滾動日曆月份UI的完全控制
捲軸滾動滾動瀏覽旋轉？在滾動視圖上滾動滾動的函數
ScrollViewController滾動controller？自定義滾動控制器到滾動日曆視圖

除上述配置外，calendardatepicker2withactionbuttonsconfig還有9個額外的選項

選項類型描述
Gapbetweencalendarandbutton雙倍的？日曆和動作按鈕之間的差距
取消tontontextstyle文本風格？取消按鈕的文字樣式
取消屁股小部件？自定義取消按鈕
OKButTontextStyle文本風格？ OK按鈕的文字樣式
OKBUTTON小部件？自定義OK按鈕
開放式布爾？日曆是從對話框打開的嗎
封閉的alceconceltapped布爾？用戶點擊取消按鈕後關閉對話框
封閉的旋風布爾？用戶點擊確定按鈕後關閉對話框
鈕扣邊緣人？定制包裝填充填充和取消按鈕

自定義UI

通過使用上面的配置，您可以根據需要製作自己的自定義日曆選擇器。

圖像圖像圖像

 CalendarDatePicker2WithActionButtons (
  config : CalendarDatePicker2WithActionButtonsConfig (
    firstDayOfWeek : 1 ,
    calendarType : CalendarDatePicker2Type .range,
    selectedDayTextStyle : TextStyle (color : Colors .white, fontWeight : FontWeight .w700),
    selectedDayHighlightColor : Colors .purple[ 800 ],
    centerAlignModePicker : true ,
    customModePickerIcon : SizedBox (),
    dayBuilder : _yourDayBuilder,
    yearBuilder : _yourYearBuilder,
  ),
  value : _dates,
  onValueChanged : (dates) => _dates = dates,
);

多語言支持

該軟件包具有多語言支持。要啟用它，請將您的Locale添加到包裝MaterialApp中： 

 MaterialApp (
  localizationsDelegates : GlobalMaterialLocalizations .delegates,
  supportedLocales : const [
    Locale ( 'en' , '' ),
    Locale ( 'zh' , '' ),
    Locale ( 'ru' , '' ),
    Locale ( 'es' , '' ),
    Locale ( 'hi' , '' ),
  ],
  ...
);
圖像圖像圖像圖像
中文n Español हिंदी

貢獻

隨時為這個項目做出貢獻。 ？歡迎拉動請求！

在創建PR之前有一些技巧：

  • 在提出公關之前，請始終創建問題/功能
  • 請始終為問題創建一個最小可重複的示例
  • 請使用官方的Dart擴展名作為格式化或使用dart format . -l 80如果您不使用VS代碼
  • 請將您的更改保持在最低所需範圍（避免引入無關的更改）
  • 請通過添加feat: fix:向您的公關提交
展開
附加信息
相關應用
爲您推薦
相關資訊 全部