Flutter如何实现24小时秒级时间选择控件

在Flutter中如何实现一个24小时制的秒级时间选择控件？我需要用户能够精确选择到秒，类似Android的TimePicker但支持秒数选择。目前尝试了showTimePicker但发现它不支持秒级精度，也查看了CupertinoDatePicker但样式不符合需求。有没有现成的插件或自定义实现方案？最好能支持主题定制和24小时制格式。

2 回复

使用CupertinoTimerPicker控件，设置mode为CupertinoTimerPickerMode.hms，可精确到秒级时间选择。通过onTimerDurationChanged回调获取时长数据，结合日期选择即可实现24小时范围。

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


在Flutter中实现24小时秒级时间选择控件，可以使用showTimePicker配合自定义参数，或者使用第三方库如flutter_datetime_picker。

方法一：使用Flutter内置TimePicker（支持秒选择）

Future<void> _selectTime(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!,
      );
    },
  );
  
  if (picked != null) {
    // 获取秒数（需要手动处理，因为TimeOfDay不包含秒）
    DateTime now = DateTime.now();
    DateTime selectedDateTime = DateTime(
      now.year,
      now.month,
      now.day,
      picked.hour,
      picked.minute,
      0 // 这里可以设置初始秒数
    );
    print(selectedDateTime); // 输出完整时间
  }
}

方法二：使用flutter_datetime_picker第三方库

  1. 添加依赖：
dependencies:
  flutter_datetime_picker: ^1.5.1
  1. 实现代码：
import 'package:flutter_datetime_picker/flutter_datetime_picker.dart';

void _showTimePicker() {
  DatePicker.showTimePicker(
    context,
    showTitleActions: true,
    showSecondsColumn: true, // 显示秒列
    onConfirm: (date) {
      print('Selected time: $date'); // 包含时、分、秒的完整时间
    },
    currentTime: DateTime.now(),
    locale: LocaleType.zh, // 中文显示
  );
}

方法三：自定义时间选择器

如果需要完全自定义，可以使用CupertinoDatePicker：

CupertinoDatePicker(
  mode: CupertinoDatePickerMode.time,
  use24hFormat: true,
  minuteInterval: 1,
  secondInterval: 1, // 秒级间隔
  onDateTimeChanged: (DateTime newTime) {
    print('Selected time: $newTime');
  },
)

推荐使用第二种方法（flutter_datetime_picker），因为它：

  • 直接支持秒级选择
  • 提供完整的日期时间对象
  • 自定义选项丰富
  • 支持多语言

注意：内置的showTimePicker在部分版本中可能不支持直接选择秒，需要额外处理秒数逻辑。

回到顶部