flutter如何实现小时分钟选择器

在Flutter中如何实现一个只能选择小时和分钟的时间选择器？系统自带的showTimePicker包含了秒的选择，但我的应用只需要精确到分钟。有没有什么推荐的第三方插件或者自定义实现方案？最好能支持24小时制，并且样式可以自定义匹配应用主题。

bupafengyu 1楼

Flutter中可使用showTimePicker实现原生时间选择器，或使用第三方库如flutter_cupertino_date_picker自定义样式。也可通过Row和ListWheelScrollView组合实现自定义滚轮选择器。

更多关于flutter如何实现小时分钟选择器的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

sinazl 2楼

在Flutter中实现小时分钟选择器，可以使用以下几种方式：

1. 使用 showTimePicker（系统自带）

Future<void> _selectTime() async {
  final TimeOfDay? picked = await showTimePicker(
    context: context,
    initialTime: TimeOfDay.now(),
    builder: (BuildContext context, Widget? child) {
      return Theme(
        data: ThemeData.light(),
        child: child!,
      );
    },
  );
  
  if (picked != null) {
    print('选择的时间: ${picked.hour}:${picked.minute}');
  }
}

2. 自定义选择器（推荐）

class TimePickerDialog extends StatefulWidget {
  @override
  _TimePickerDialogState createState() => _TimePickerDialogState();
}

class _TimePickerDialogState extends State<TimePickerDialog> {
  int _selectedHour = 0;
  int _selectedMinute = 0;

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: Text('选择时间'),
      content: Container(
        height: 200,
        child: Row(
          children: [
            // 小时选择
            Expanded(
              child: ListWheelScrollView(
                itemExtent: 50,
                perspective: 0.005,
                diameterRatio: 1.2,
                onSelectedItemChanged: (index) {
                  setState(() {
                    _selectedHour = index;
                  });
                },
                children: List.generate(24, (index) => 
                  Center(child: Text('$index 时'))
                ),
              ),
            ),
            // 分钟选择
            Expanded(
              child: ListWheelScrollView(
                itemExtent: 50,
                perspective: 0.005,
                diameterRatio: 1.2,
                onSelectedItemChanged: (index) {
                  setState(() {
                    _selectedMinute = index;
                  });
                },
                children: List.generate(60, (index) => 
                  Center(child: Text('$index 分'))
                ),
              ),
            ),
          ],
        ),
      ),
      actions: [
        TextButton(
          onPressed: () => Navigator.pop(context),
          child: Text('取消'),
        ),
        TextButton(
          onPressed: () {
            Navigator.pop(context, TimeOfDay(
              hour: _selectedHour, 
              minute: _selectedMinute
            ));
          },
          child: Text('确定'),
        ),
      ],
    );
  }
}

// 使用方法
Future<void> _showCustomTimePicker() async {
  final TimeOfDay? result = await showDialog(
    context: context,
    builder: (context) => TimePickerDialog(),
  );
  
  if (result != null) {
    print('选择的时间: ${result.hour}:${result.minute}');
  }
}

3. 使用第三方库

在 pubspec.yaml 中添加：

dependencies:
  flutter_cupertino_date_picker: ^1.0.26

使用示例：

DatePicker.showDatePicker(
  context,
  pickerModel: CustomPicker(
    currentTime: DateTime.now(),
    locale: LocaleType.zh,
  ),
  onConfirm: (date) {
    print('选择的时间: ${date.hour}:${date.minute}');
  },
);

flutter如何实现小时分钟选择器

1. 使用 showTimePicker（系统自带）

2. 自定义选择器（推荐）

3. 使用第三方库

推荐方案