Flutter如何实现时间选择时分秒功能

在Flutter中如何实现一个可以选择时分秒的时间选择器？官方提供的showTimePicker只支持选择时分，没有秒的选项。有没有现成的第三方插件可以实现这个功能，或者需要自己自定义实现？如果自定义实现的话，有没有推荐的思路或示例代码？

yibo5220 1楼

使用showTimePicker选择时分，但默认不支持秒。如需秒，可自定义showTimePicker的builder参数，或使用第三方库如flutter_datetime_picker。

更多关于Flutter如何实现时间选择时分秒功能的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

vueper 2楼

在Flutter中实现时间选择（包括时、分、秒）功能，可以使用官方提供的 showTimePicker 组件，但默认只支持时和分。若要包含秒，需要自定义实现。以下是两种方法：

1. 使用 `showTimePicker`（仅时分）

TimeOfDay? selectedTime = await showTimePicker(
  context: context,
  initialTime: TimeOfDay.now(),
);
if (selectedTime != null) {
  print('选择的时间: ${selectedTime.hour}:${selectedTime.minute}');
}

2. 自定义时间选择器（含秒）

使用第三方库 flutter_cupertino_date_picker 或自定义 Dialog：

方法一：使用第三方库

在 pubspec.yaml 添加：

dependencies:
  flutter_cupertino_date_picker: ^1.0.26

代码示例：

DatePicker.showDatePicker(
  context,
  pickerMode: DateTimePickerMode.time,
  onConfirm: (time, selectedIndex) {
    print('选择的时间: $time'); // 包含时、分、秒
  },
);

方法二：自定义 Dialog（推荐）

Future<TimeOfDay?> _showCustomTimePicker(BuildContext context) async {
  TimeOfDay initialTime = TimeOfDay.now();
  
  return showDialog<TimeOfDay>(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        title: Text("选择时间"),
        content: Container(
          height: 150,
          child: CupertinoDatePicker(
            mode: CupertinoDatePickerMode.time,
            initialDateTime: DateTime(2023, 1, 1, initialTime.hour, initialTime.minute),
            onDateTimeChanged: (DateTime newDateTime) {
              initialTime = TimeOfDay(hour: newDateTime.hour, minute: newDateTime.minute);
            },
          ),
        ),
        actions: <Widget>[
          TextButton(
            child: Text("取消"),
            onPressed: () => Navigator.of(context).pop(),
          ),
          TextButton(
            child: Text("确定"),
            onPressed: () => Navigator.of(context).pop(initialTime),
          ),
        ],
      );
    },
  );
}

// 调用
TimeOfDay? selectedTime = await _showCustomTimePicker(context);
if (selectedTime != null) {
  print('选择的时间: ${selectedTime.hour}:${selectedTime.minute}');
}

注意事项：

第三方库可能需要额外配置
自定义实现更灵活，可以添加秒选择器
考虑使用 intl 包进行时间格式化