首页>编程相关>其他源码
下载

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:向您的公关提交
展开
附加信息
相关应用
为您推荐
相关资讯 全部