Flutter中如何获取TimePickerDialog选中时间？自定义方案咨询

在Flutter开发中，我需要获取TimePickerDialog的选中时间，但不想使用默认的showDialog调用方式，还希望在对话框下方添加额外按钮。如果无法直接使用TimePickerDialog，是否需要在本地引入其源码进行修改？目前我的代码如下：

showDialog(
  context: context,
  builder: (BuildContext context) {
    return AlertDialog(
      actions: <Widget>[
        SizedBox(
          child: TimePickerDialog(
            initialTime: TimeOfDay.fromDateTime(DateTime.now()),
            cancelText: "",
            confirmText: "", 
          ),
        ),
        TextButton(
          child: Text('Cancel'),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
        TextButton(
          child: Text('OK'),
          onPressed: () {
            // Perform an action
            Navigator.of(context).pop();
          },
        ),
      ],
    );
  },
);

界面效果：

解决方案：无需修改源码，用StatefulWidget管理状态 #

你完全不需要引入TimePickerDialog的源码修改，直接基于原生TimePicker组件自定义弹窗即可，步骤如下：

1. 用StatefulWidget维护选中的TimeOfDay状态
2. 将TimePicker组件嵌入自定义弹窗布局，替代原TimePickerDialog
3. 自定义底部按钮，点击时直接读取维护的时间状态

示例代码：

class CustomTimePicker extends StatefulWidget {
  const CustomTimePicker({super.key});

  @override
  State<CustomTimePicker> createState() => _CustomTimePickerState();
}

class _CustomTimePickerState extends State<CustomTimePicker> {
  late TimeOfDay _selectedTime;

  @override
  void initState() {
    super.initState();
    _selectedTime = TimeOfDay.fromDateTime(DateTime.now());
  }

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      content: TimePicker(
        initialTime: _selectedTime,
        onChanged: (TimeOfDay newTime) {
          setState(() {
            _selectedTime = newTime;
          });
        },
      ),
      actions: [
        TextButton(
          onPressed: () => Navigator.of(context).pop(),
          child: const Text('取消'),
        ),
        TextButton(
          onPressed: () {
            // 直接使用选中的时间
            print('选中时间：${_selectedTime.format(context)}');
            Navigator.of(context).pop(_selectedTime);
          },
          child: const Text('确定'),
        ),
        // 自定义额外按钮
        TextButton(
          onPressed: () {
            // 这里添加自定义逻辑
            print('额外按钮触发');
          },
          child: const Text('额外操作'),
        ),
      ],
    );
  }
}

// 调用自定义时间选择器
void _showCustomPicker(BuildContext context) async {
  final TimeOfDay? selectedTime = await showDialog(
    context: context,
    builder: (context) => const CustomTimePicker(),
  );
  if (selectedTime != null) {
    // 处理最终选中的时间
    print('最终选择：${selectedTime.format(context)}');
  }
}

原理说明 #

TimePickerDialog本身就是对TimePicker组件的封装，额外加了默认的确认/取消按钮。直接使用TimePicker组件可以拿到实时的时间变化回调，既能保留原生时间选择器的交互体验，又能完全自由定制弹窗的布局和按钮。

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