Flutter – 使用 Material Design 创建时间选择器

简介

在移动应用中，时间选择器是非常常见的组件，它可以帮助用户轻松选择所需的时间。在 Flutter 中，我们可以使用 Material Design 创建漂亮的时间选择器。

本文将介绍如何使用 Flutter 和 Material Design 来创建时间选择器，包括以下内容：

• 创建基本的时间选择器
• 设置时间选择器的样式
• 增加时间选择器的交互

在阅读本文之前，需要您了解 Flutter 基础知识并且掌握基本的 Widget。

创建基本的时间选择器

要创建基本的时间选择器，我们可以使用 Flutter 提供的 CupertinoDatePicker 和 MaterialDatetimePicker 组件。

CupertinoDatePicker

CupertinoDatePicker 是一个 iOS 风格的时间选择器，它可以帮助我们轻松选择时间，并且外观与 iOS 系统时间选择器相似。

CupertinoDatePicker(
  mode: CupertinoDatePickerMode.time,
  onDateTimeChanged: (dateTime) {
    print(dateTime);
  },
)

在上面的例子中，我们创建了一个 CupertinoDatePicker，并指定了选择模式为 time。当用户选择时间时，我们会打印选择的时间。

MaterialDatetimePicker

MaterialDatetimePicker 是一个 Material Design 风格的时间选择器，与 CupertinoDatePicker 不同，MaterialDatetimePicker 可以选择日期和时间。

Future<void> _selectTime(BuildContext context) async {
  final TimeOfDay? picked = await showTimePicker(
    context: context,
    initialTime: _time,
  );
  if (picked != null && picked != _time) {
    setState(() {
      _time = picked;
    });
  }
}

在上面的例子中，我们创建了一个 MaterialDatetimePicker，并在用户选择时间后更新了当前时间。

设置时间选择器的样式

虽然默认的时间选择器外观已经很好看了，但是我们可以通过一些属性来自定义时间选择器的外观。

修改 CupertinoDatePicker 样式

• backgroundColor：选择器的背景颜色
• use24hFormat：是否使用 24 小时制
• minimumDate 和 maximumDate：可选择的最小和最大日期时间值
• textTheme 和 pickerTextStyle：用于修改选择器文本的样式

CupertinoDatePicker(
  mode: CupertinoDatePickerMode.time,
  backgroundColor: Colors.transparent,
  use24hFormat: true,
  minimumDate: DateTime.now(),
  maximumDate: DateTime.now().add(Duration(days: 7)),
  textTheme: CupertinoTextThemeData(
    pickerTextStyle: TextStyle(color: Colors.white),
  ),
  onDateTimeChanged: (dateTime) {
    print(dateTime);
  },
)

在上面的示例中，我们修改了 CupertinoDatePicker 的背景颜色、是否使用 24 小时制、可选择的日期时间范围和文本样式。

修改 MaterialDatetimePicker 样式

• backgroundColor：选择器的背景颜色
• use24hFormat：是否使用 24 小时制
• initialDate：初始的日期值
• initialTime：初始的时间值
• selectableDayPredicate：用于过滤可选择日期的回调
• helpText 和 cancelText：选择器的标题和取消按钮文本
• confirmText：确认按钮文本
• builder：自定义选择器的外观

Future<void> _selectTime(BuildContext context) async {
  final TimeOfDay? picked = await showTimePicker(
    context: context,
    initialTime: _time,
    helpText: '选择时间',
    cancelText: '取消',
    confirmText: '确定',
    use24hFormat: true,
    builder: (context, child) {
      return Theme(
        data: ThemeData.dark(),
        child: child!,
      );
    }
  );
  if (picked != null && picked != _time) {
    setState(() {
      _time = picked;
    });
  }
}

在上面的示例中，我们修改了 MaterialDatetimePicker 的背景颜色、是否使用 24 小时制、初始时间、可选择日期的过滤函数、标题和按钮文本以及选择器外观。

增加时间选择器的交互

在更复杂的应用中，可能需要对时间选择器的交互进行更多的自定义。例如，我们需要在用户选择时间之后更新界面上的文本或者调用远程接口。

我们可以通过以下方式添加时间选择器的交互：

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text(
      '${_time.hour}:${_time.minute}',
      style: const TextStyle(fontSize: 18),
    ),
    const SizedBox(width: 8),
    ElevatedButton(
      onPressed: () => _selectTime(context),
      child: const Text('选择时间'),
    ),
  ],
),

在上面的示例中，我们创建了一个 Row 和包含文本和按钮，当用户点击按钮时，会调用 _selectTime 函数以显示时间选择器。选择器关闭后，我们会更新文本以反映用户的选择。

总结

时间选择器是移动应用中常见的组件之一。在 Flutter 中，我们可以使用 CupertinoDatePicker 和 MaterialDatetimePicker 来创建漂亮的时间选择器。我们可以使用各种属性和交互对选择器进行定制和扩展，以适应不同的应用需求。