Flutter如何实现24小时制的TimePicker

在Flutter中如何实现24小时制的时间选择器？官方提供的TimePicker默认是12小时制带AM/PM的，但我需要在应用中使用24小时格式。是否有直接修改的配置选项，或者需要自定义实现？如果必须自定义，能否提供一个简单的实现方案或推荐好用的第三方库？

2 回复

Flutter中实现24小时制TimePicker，使用showTimePicker并设置builder参数，在MaterialLocalizations中配置timePickerMode为TimePickerMode.h24即可。

更多关于Flutter如何实现24小时制的TimePicker的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，可以通过自定义Dialog或使用第三方包实现24小时制的时间选择器，因为默认的showTimePicker在iOS上可能显示12小时制。

推荐方法：使用flutter_cupertino_date_picker包

  1. 添加依赖到pubspec.yaml：
dependencies:
  flutter_cupertino_date_picker: ^1.0.26
  1. 实现代码：
import 'package:flutter_cupertino_date_picker/flutter_cupertino_date_picker.dart';

void _show24HourTimePicker() {
  DatePicker.showDatePicker(
    context,
    pickerMode: DateTimePickerMode.time,
    minuteDivider: 1,
    dateFormat: 'HH:mm', // 24小时制格式
    onConfirm: (DateTime date, List<int> selectedIndex) {
      print('Selected time: ${date.hour}:${date.minute}');
    },
  );
}

自定义实现方案（使用基础组件）：

Future<TimeOfDay?> show24HourTimePicker(BuildContext context) async {
  final TimeOfDay? picked = await showTimePicker(
    context: context,
    initialTime: TimeOfDay.now(),
    builder: (BuildContext context, Widget? child) {
      return MediaQuery(
        data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: true),
        child: child!,
      );
    },
  );
  return picked;
}

注意：

  • 第一个方法需要安装第三方包，但样式统一
  • 第二个方法依赖系统时间选择器，在部分Android设备上可能仍显示12小时制
  • 建议优先使用第三方包确保全平台一致性

调用方式：

ElevatedButton(
  onPressed: () => _show24HourTimePicker(),
  child: Text('选择时间'),
)
回到顶部