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

张风捷特烈

发布于 2022-11-01 11:34:54

3.6K0

发布于 2022-11-01 11:34:54

前言

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

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

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

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. 日期范围选择器的语言

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

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

dependencies:
  flutter_localizations:
    sdk: flutter

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

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

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

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

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

另外，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 无法满足使用需求，可以将代码拷贝一份进行魔改。

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

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

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

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