flutter如何实现time_picker时间选择器

在Flutter中如何实现一个时间选择器（TimePicker）？我想让用户能够方便地选择时间，最好能自定义样式和默认时间。官方文档提到了一些方法，但不太清楚具体怎么实现，有没有完整的代码示例或推荐的三方库？另外，如何获取用户选择的时间并处理回调？

2 回复

Flutter 中可使用内置的 showTimePicker 方法实现时间选择器，示例代码如下：

TimeOfDay? selectedTime = await showTimePicker(
  context: context,
  initialTime: TimeOfDay.now(),
);

如需自定义样式，可使用第三方库如 flutter_cupertino_date_picker 或自定义组件。

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


在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().copyWith(
          colorScheme: ColorScheme.light(
            primary: Colors.blue, // 主题色
          ),
        ),
        child: child!,
      );
    },
  );
  
  if (picked != null) {
    print('选择的时间: ${picked.format(context)}');
  }
}

2. 使用第三方库 flutter_datetime_picker

在 pubspec.yaml 中添加依赖：

dependencies:
  flutter_datetime_picker: ^1.5.1

使用示例：

DatePicker.showTimePicker(
  context,
  showTitleActions: true,
  onConfirm: (time) {
    print('选择的时间: $time');
  },
  currentTime: DateTime.now(),
);

3. 自定义时间选择器

如果需要完全自定义，可以创建自己的时间选择器组件：

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

class _CustomTimePickerState extends State<CustomTimePicker> {
  int _selectedHour = 0;
  int _selectedMinute = 0;

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: Text('选择时间'),
      content: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          // 小时选择
          Column(
            children: [
              Text('小时'),
              SizedBox(
                height: 150,
                child: ListWheelScrollView(
                  itemExtent: 50,
                  children: List.generate(24, (index) => 
                    Text('$index', style: TextStyle(fontSize: 20))
                  ),
                  onSelectedItemChanged: (index) {
                    setState(() {
                      _selectedHour = index;
                    });
                  },
                ),
              ),
            ],
          ),
          // 分钟选择
          Column(
            children: [
              Text('分钟'),
              SizedBox(
                height: 150,
                child: ListWheelScrollView(
                  itemExtent: 50,
                  children: List.generate(60, (index) => 
                    Text('$index', style: TextStyle(fontSize: 20))
                  ),
                  onSelectedItemChanged: (index) {
                    setState(() {
                      _selectedMinute = index;
                    });
                  },
                ),
              ),
            ],
          ),
        ],
      ),
      actions: [
        TextButton(
          onPressed: () => Navigator.pop(context),
          child: Text('取消'),
        ),
        TextButton(
          onPressed: () {
            final selectedTime = TimeOfDay(
              hour: _selectedHour, 
              minute: _selectedMinute
            );
            Navigator.pop(context, selectedTime);
          },
          child: Text('确定'),
        ),
      ],
    );
  }
}

使用方式

// 调用自定义选择器
void _showCustomTimePicker() async {
  final TimeOfDay? result = await showDialog(
    context: context,
    builder: (context) => CustomTimePicker(),
  );
  
  if (result != null) {
    print('选择的时间: ${result.format(context)}');
  }
}

推荐使用内置的 showTimePicker，因为它提供了良好的用户体验且无需额外依赖。如果需要更多自定义功能，可以考虑第三方库或自己实现。

回到顶部