Flutter 组件集录 | 日期范围组件 - DateRangePickerDialog

最新推荐文章于 2024-08-15 10:11:22 发布

张风捷特烈

最新推荐文章于 2024-08-15 10:11:22 发布

阅读量654

点赞数

文章标签： flutter ios android

本文链接：https://blog.csdn.net/qq_30447263/article/details/128618767

版权

theme: cyanosis

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第 3 天，点击查看活动详情

前言

今天随手翻翻源码，突然看到 showDateRangePicker，心中狂喜。原来 Flutter 早已将 日期范围选择器 内置了，可能有些小伙伴已经知道，但应该还有一部分朋友不知道。想当年，为了日期范围选择可吃了不少坑。做为 Flutter 内置组件收集狂魔的我，自然要发篇文章来安利一下这个组件。另外，该组件已经收录入 FutterUnit ，可更新查看。

| 1 | 2 | 3| | --- | --- |--- | | | | |

1. 日期范围选择器的使用

如下所示，是最简单的日期选择器操作示意：点击选择按钮时，触发下面代码中的 _show 方法：

| 主界面 | 选择器界面 | 保存后界面 | | --- | --- |--- | | 1771665361328.pic.jpg | 1761665361327.pic.jpg | 1751665361327_.pic.jpg |

showDateRangePicker 是 Flutter 内置的方法，用于弹出日期范围的对话框。其中必传的参数有三个：

| 参数 | 类型 | 描述| | --- | --- |--- | | context | BuildContext | 构建上下文 | | firstDate | DateTime | 可选择的最早日期 | | lastDate | DateTime | 可选择的最晚日期 |

该方法返回 DateTimeRange? 泛型的 Future 对象，如下代码所示：可以通过 async/await 来等待 showDateRangePicker 任务的完成，获取 DateTimeRange? 结果对象。

void _show() async { DateTime firstDate = DateTime(2021, 1, 1); DateTime lastDate = DateTime.now(); DateTimeRange? range = await showDateRangePicker( context: context, firstDate: firstDate, lastDate: lastDate, ); print(range); }

2. 日期范围选择器的语言

默认情况下，你会发现选择器是 英文 的(左图)，怎么能改成中文呢？

| 英文 | 中文 | | --- | --- | | 1781665362161.pic.jpg | 1791665362162.pic.jpg |

默认情况下，应用是不支持多语言，对于日历这种内置组件的多语言，可以通过加入 flutter_localizations 依赖实现：

yaml dependencies: flutter_localizations: sdk: flutter

在 MaterialApp 中指定 localizationsDelegates 和 supportedLocales 。如果应用本身没有多语言的需求，可以指定只支持中文：

如果需要多语言，可以通过 locale 参数指定语言。如果未指定的话，会使用当前项目中的当前语言。

简单瞄一眼 showDateRangePicker 源码，可以看出 locale 非空时，会通过 Localizations.override 来让子树使用指定的 locale 语言：

3. 日期范围选择器的其他参数

除了默认的必需参数外，还有一些参数用于指定相关文字。下面三张图中标注了相关文本对应的位置，如果需要修改相关文字，设置对应参数即可：

| 1 | 2 | 3| | --- | --- |--- | | 1821665363618.pic.jpg | 1821665363618.pic.jpg | 1821665363618_.pic.jpg |

另外，showDateRangePicker 方法中可以传入 initialDateRange 设置弹出时的默认时间范围； currentDate 可以设置当前日期，如下右图的 8 日 ：

DateTimeRange? range = await showDateRangePicker( context: context, firstDate: firstDate, lastDate: lastDate, initialDateRange: DateTimeRange( start: DateTime(2022, 10, 1), end: DateTime(2022, 10, 6), ), currentDate: DateTime(2022, 10, 8) );

| 未设置默认情况 | 设置默认值 | | --- | --- | | | |

4. 源码简看

showDateRangePicker 方法，本质上就是就是通过 showDialog 方法展示对话框：

其中的内容是 DateRangePickerDialog 组件，方法中的绝大多数参数都是为了创建 DateRangePickerDialog 对象而准备的。

DateRangePickerDialog 就是一个很普通的 StatefulWidget 的派生类：

依赖 _DateRangePickerDialogState 状态类进行组件构建。如果在开发中，DateRangePickerDialog 无法满足使用需求，可以将代码拷贝一份进行魔改。

dart @override State<DateRangePickerDialog> createState() => _DateRangePickerDialogState();

如下所示，可以在月份条目下叠放月份信息，看起来更直观；或者修改选中时的激活端点的装饰：

| 月份背景 | 修改端点装饰 | | --- | --- | | | |

如下稍微翻翻源码，可以找到每个月份是通过 _MonthItem 组件构建的，所以需要对条目进行魔改，就在这里处理：

在 _MonthItemState 中，有 _buildDayItem 方法，如下是两端激活处的 BoxDecoration 装饰对象。 Decoration 的自定义能力非常强， BoxDecoration 如果无法满足需求，可以通过自定义 Decoration 进行绘制。