Flutter如何仅选择分秒？是否有内置Material旋转表盘式分秒选择组件？

Flutter官方Material组件库没有内置专门用于选择分钟+秒的旋转表盘式组件，默认的showTimePicker仅支持小时和分钟的选择。

以下是几种可行的解决思路：

• 改造默认showTimePicker
  通过showTimePicker的builder参数自定义内部组件，将原有的小时选择器替换为秒选择器（范围0-59）。示例代码大致如下：

  showTimePicker(
    context: context,
    initialTime: TimeOfDay.now(),
    builder: (context, child) {
      return MediaQuery(
        data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: true),
        child: child!,
      );
      // 进一步修改child中的选择器，替换小时为秒
    },
  );
  

  你可以通过遍历组件树或自定义TimePicker的子部件，实现分秒选择的逻辑。

• 使用第三方组件包
  社区有不少成熟的第三方包支持分秒选择的旋转表盘，比如flutter_time_picker_spinner、timepicker_widget，这些包提供了可配置的旋转选择器，直接设置选择范围为分钟和秒即可。

• 自定义实现
  如果需要完全贴合Material风格且不想依赖第三方，可以基于滚动组件实现旋转表盘效果：

  • 构建两个滚动列表，分别对应分钟（0-59）和秒（0-59）
  • 通过监听滚动位置，计算选中项的角度，模拟表盘旋转的视觉效果
  • 处理选中值的回调逻辑，获取最终的分秒结果

内容的提问来源于stack exchange，提问作者Param