日期时间组件

在进入较进阶的组件内容之前，我们在介绍一下有关日期与时间的组件内容。在表单输入或是报表查询功能的页面，我们通常会需要使用日期时间的选取器功能提供使用者能够快速方便的进行设定，在Flutter SDK中根据偏好使用material或是cupertino风格的组件。

常用功能

• showDatePicker
• showDateRangePicker
• showTimePicker
• 自定义日期选择器

日期选取器

    var datePickButton = ElevatedButton(
      onPressed: () async {
        var result = await showDatePicker(
          context: context,
          initialDate: DateTime.now(),
          firstDate: DateTime(2000, 01),
          lastDate: DateTime(2021, 12),
        );

        if (result != null) {
          setState(() {
            selectedDateTime = result;
          });
        }
      },
      child: const Text('日期选择器'),
    );

日期区间选取器

    var dateRangePickButton = ElevatedButton(
      onPressed: () async {
        var result = await showDateRangePicker(
          context: context,
          firstDate: DateTime(2021, 01),
          lastDate: DateTime(2021, 12),
        );

        if (result != null) {
          setState(() {
            selectedDateTimeRange = result;
          });
        }
      },
      child: const Text('日期区间选择器'),
    );

时间选取器

    var timePickButton = ElevatedButton(
      onPressed: () async {
        var result = await showTimePicker(
          context: context,
          initialTime: TimeOfDay.now(),
          initialEntryMode: TimePickerEntryMode.input,
        );

        if (result != null) {
          setState(() {
            selectedTimeOfDay = result;
          });
        }
      },
      child: const Text('时间选择器'),
    );

客制化

在上述的使用是 material 设定的风格，如果我们自己想要定义不同的介面，那需要怎麽处理勒？

在上述提到的日期时间择择器大多具备Dialog弹窗的功能，这个在App的应用上还蛮常见的，例如对话功能(AlertDialog)、列表功能(SimpleDialog)。Flutter 本身已提供一个showDialog，可以让我们使用弹窗的效果并定义弹窗想要的内容。

这边我们先实作一个客制化介面，我这边直接使用 Flutter 的 CalendarDatePicker 类别，这是一个简易的日期选取控制并加上一个红色确认按钮。

class CustomDateTimePicker extends StatefulWidget {
  final DateTime initialDate;

  CustomDateTimePicker({required this.initialDate});

  @override
  _CustomDateTimePicker createState() => _CustomDateTimePicker();
}

class _CustomDateTimePicker extends State<CustomDateTimePicker> {
  late DateTime selectedDateTime;

  @override
  initState() {
    super.initState();
    selectedDateTime = this.widget.initialDate;
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        CalendarDatePicker(
          initialDate: selectedDateTime,
          firstDate: DateTime(2000, 1, 1),
          lastDate: DateTime(2040, 12, 31),
          onDateChanged: (DateTime date) {
            setState(() {
              selectedDateTime = date;
            });
          },
        ),
        ElevatedButton(
          child: Text("OK"),
          style: ElevatedButton.styleFrom(
            primary: Colors.red,
          ),
          onPressed: () {
            Navigator.of(context).pop(selectedDateTime);
          },
        )
      ],
    );
  }
}

并且新增一个函数用来呼叫showDialog并带入刚刚新增的日期选择组件。

  Future<DateTime> showCustomDateTimePickerDialog({
    required BuildContext context,
    required DateTime initialDate,
  }) async {
    return await showDialog(
      context: context,
      builder: (ctx) {
        return Dialog(child: CustomDateTimePicker(initialDate: initialDate));
      },
    );
  }

接下来我们就可以使用类似原本内建的方式触发客制化日期选取器的弹窗效果。

    var customDateTimePickButton = ElevatedButton(
      onPressed: () async {
        var result = await showCustomDateTimePickerDialog(
          context: context,
          initialDate: selectedCustomDateTime,
        );

        setState(() {
          selectedCustomDateTime = result;
        });
      },
      child: const Text('客制化日期选择器'),
    );

小结

练习成果

今日我们学习了时间日期选择器的使用方式，也从如何客制化的章节认识到弹窗的功能，基础的widget使用方式我们大概都晓得要如何使用了，接下来我们明天开始会开始进入较进阶的内容。