如何在Flutter中实现滚轮式timePicker时间选择器？

我正尝试在Flutter中实现滚轮形式的timePicker，目标样式如下：

实现方案推荐 #

1. 第三方包快速落地

Flutter生态里有现成的滚轮时间选择器包，比如flutter_picker，能快速匹配需求：

• 先在pubspec.yaml添加依赖：

dependencies:
  flutter_picker: ^2.1.0

• 基础调用示例：

Picker(
  adapter: DateTimePickerAdapter(
    type: PickerDateTimeType.kHM,
    isNumberMonth: true,
  ),
  title: const Text("选择时间"),
  onConfirm: (Picker picker, List<int> value) {
    print((picker.adapter as DateTimePickerAdapter).value);
  },
).showDialog(context);

2. 自定义组件完全匹配设计

如果需要100%贴合示意图样式，可基于ListWheelScrollView自定义：

• 核心逻辑：用三个横向排列的滚轮分别处理小时、分钟、时段（AM/PM），通过FixedExtentScrollController控制选中项
• 简化实现代码：

class CustomTimePicker extends StatefulWidget {
  @override
  _CustomTimePickerState createState() => _CustomTimePickerState();
}

class _CustomTimePickerState extends State<CustomTimePicker> {
  final hourController = FixedExtentScrollController(initialItem: 9);
  final minuteController = FixedExtentScrollController(initialItem: 30);
  final periodController = FixedExtentScrollController(initialItem: 0);

  final List<String> hours = List.generate(12, (index) => "${index + 1}");
  final List<String> minutes = List.generate(60, (index) => index.toString().padLeft(2, '0'));
  final List<String> periods = ["AM", "PM"];

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        _buildWheel(hours, hourController),
        const Text(" : ", style: TextStyle(fontSize: 24)),
        _buildWheel(minutes, minuteController),
        const SizedBox(width: 16),
        _buildWheel(periods, periodController),
      ],
    );
  }

  Widget _buildWheel(List<String> items, FixedExtentScrollController controller) {
    return Container(
      width: 60,
      height: 150,
      child: ListWheelScrollView.useDelegate(
        controller: controller,
        itemExtent: 40,
        perspective: 0.005,
        diameterRatio: 1.2,
        childDelegate: ListWheelChildLoopingListDelegate(
          children: items.map((item) => Center(child: Text(item, style: const TextStyle(fontSize: 20)))).toList(),
        ),
      ),
    );
  }
}

样式微调要点 #

• 通过itemExtent调整滚轮项高度，diameterRatio控制滚轮弧度
• 监听controller.selectedItem给选中项添加高亮样式
• 底部可增加确认/取消按钮，点击时拼接三个滚轮的选中值生成最终时间

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