20、 Flutter Widgets 之 Flutter日期类组件

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

概述：

showDatePicker、showTimePicker 是 flutter 提供的日期选择器弹框。 CalendarDatePicker 是替代 YearPicker、MonthPicker、DayPicker 的新的日期选择控件。 CupertinoDatePicker、CupertinoTimerPicker 是 iOS 风格的 DatePickerView 和 TimePickerView 的日期时间选择器。

属性介绍

showTimePicker属性	介绍
context	@required BuildContext，上下文 context
initialTime	@required TimeOfDay 设置默认日期
builder	创建器，和直接创建基本一致，可以定制主题
initialEntryMode	默认为 TimePickerEntryMode.dial。input 样式其实就是收起后的样子
helpText	左上角文字 helpText.png
cancelText	取消按钮文字
confirmText	@required BuildContext，上下文 context
context	确认按钮文字，上图中 confirmText
useRootNavigator	是否使用根导航，默认为 true，官方文档也没做详解，暂时没用到
routeSettings	路由设置，官方文档也没做详解，暂时没用到

showDatePicker基本用法

 _buildShowDatePicker(){
    showDatePicker(
        context: context,
        initialDate: DateTime.now(), // 初始化选中日期
        firstDate: DateTime(2020, 6),  // 开始日期
        lastDate: DateTime(2025, 6),  // 结束日期
        // initialEntryMode: DatePickerEntryMode.input,  // 日历弹框样式
 
        textDirection: TextDirection.ltr,  // 文字方向
 
        currentDate: DateTime(2022, 1, 10),  // 当前日期
        helpText: "helpText", // 左上方提示
        cancelText: "取消",  // 取消按钮文案
        confirmText: "确认",  // 确认按钮文案
 
        errorFormatText: "errorFormatText",  // 格式错误提示
        errorInvalidText: "errorInvalidText",  // 输入不在 first 与 last 之间日期提示
 
        fieldLabelText: "fieldLabelText",  // 输入框上方提示
        fieldHintText: "fieldHintText",  // 输入框为空时内部提示
 
        initialDatePickerMode: DatePickerMode.day, // 日期选择模式，默认为天数选择
        useRootNavigator: true, // 是否为根导航器
        // 设置不可选日期，这里将 2020-10-15，2020-10-16，2020-10-17 三天设置不可选
        selectableDayPredicate: (dayTime){
          if(dayTime == DateTime(2020, 10, 15) || dayTime == DateTime(2020, 10, 16) || dayTime == DateTime(2020, 10, 17)) {
            return false;
          }
          return true;
        }
    );
  }

运行效果：

年份选择器 ：

  _buildShowDatePickerForYear(){
    showDatePicker(context: context,
        initialDate: DateTime.now(), // 初始化选中日期
        firstDate: DateTime(2018, 6),  // 开始日期
        lastDate: DateTime(2025, 6),  // 结束日期
        currentDate: DateTime(2020, 10, 20),  // 当前日期
        helpText: "helpText", // 左上方提示
        cancelText: "cancelText",  // 取消按钮文案
        confirmText: "confirmText",  // 确认按钮文案
      initialDatePickerMode: DatePickerMode.year,
      
    );
  }

运行效果：

日期选择器主题设置

  _buildshowDatePickerForTheme(){
    showDatePicker(
        context: context,
        builder: (context,child){
          return Theme(
              data: ThemeData(cardColor: Colors.red,brightness: Brightness.dark),
              child: child!);
        },
        initialDate: DateTime.now(), // 初始化选中日期
        firstDate: DateTime(2020, 6),  // 开始日期
        lastDate: DateTime(2025, 6),  // 结束日期
        // initialEntryMode: DatePickerEntryMode.input,  // 日历弹框样式
 
        textDirection: TextDirection.ltr,  // 文字方向
 
        currentDate: DateTime(2022, 1, 10),  // 当前日期
        helpText: "helpText", // 左上方提示
        cancelText: "取消",  // 取消按钮文案
        confirmText: "确认",  // 确认按钮文案
 
        errorFormatText: "errorFormatText",  // 格式错误提示
        errorInvalidText: "errorInvalidText",  // 输入不在 first 与 last 之间日期提示
 
        fieldLabelText: "fieldLabelText",  // 输入框上方提示
        fieldHintText: "fieldHintText",  // 输入框为空时内部提示
 
        initialDatePickerMode: DatePickerMode.year, // 日期选择模式，默认为天数选择
        useRootNavigator: true, // 是否为根导航器
 
    );
  }

运行效果：

showTimePicker 详解

和 showDatePicker 基本一样，代码如下：

 _buildshowTimePicker()async{
    var result = await showTimePicker(context: context,
        initialTime: TimeOfDay(hour: 11, minute: 30),
        cancelText: "取消",
        helpText: "请选择时间---》",
        confirmText: "确认"
    );
    print(result);
  }

接受参数可以通过定义变量接受，返回结果为 Future<TimeOfDay?> showTimePicker

CalendarDatePicker

基本用法：

_buildCalendarDatePicker() {
    return CalendarDatePicker(
        initialDate: DateTime.now(),
        // 初始化选中日期
        currentDate: DateTime(2020, 10, 18),
        firstDate: DateTime(2020, 9, 10),
        // 开始日期
        lastDate: DateTime(2022, 9, 10),
        // 结束日期
        initialCalendarMode: DatePickerMode.day,
        // 日期选择样式
        onDateChanged: (DateTime value) {
          print(value);
        },
        // 月份改变回调函数
        onDisplayedMonthChanged: (dateTime) {
          print("onDisplayedMonthChanged $dateTime");
        },
        // 筛选日期可不可点回调函数
        selectableDayPredicate: (dayTime) {
          if (dayTime == DateTime(2020, 10, 15) ||
              dayTime == DateTime(2020, 10, 16) ||
              dayTime == DateTime(2020, 10, 17)) {
            return false;
          }
          return true;
        });
  }

运行效果：

CupertinoTimerPicker 详解

基本用法：

_buildCupertinoTimerPicker(){
    return  CupertinoTimerPicker(
      mode: CupertinoTimerPickerMode.hms, // 展示模式
      initialTimerDuration: Duration(hours: 5, minutes: 10), // 默认选中事时间
      minuteInterval: 10, // 分钟间隔
      secondInterval: 10, // 秒间隔
      alignment: Alignment.center, // 对齐方式
      backgroundColor: Colors.yellow, // 背景颜色
      // 滑动后，每次改变回调函数
      onTimerDurationChanged: (dayTime){
        print("onTimerDurationChanged $dayTime");
      },
    );

运行效果：

注意改变 mode 时，不要使用热重载，会报错。

日期选择器样式比较多，但是属性偏少，需要耐心尝试各种不同的选择器。

总结：

本篇主要介绍了showDatePicker日期选择器，可设置主题，年份模式或者日期选择模式等，showDatePicker主要为时间选择器，可选择时分等。CalendarDatePicker可选择年月日，可设置选择模式。CupertinoTimerPicker是iOS风格的日期选择样式。此外还有一些优秀的第三方日期选择控件。