Flutter自定义时间选择器：外圈1-12内圈13-00的实现方法问询

你的问题出在builder函数里直接创建了新的TimePickerDialog，这会覆盖showTimePicker默认的布局结构（包含底部确认/取消按钮栏），导致显示异常。正确的做法是用MediaQuery包裹原有的child组件，而非重新构建TimePickerDialog。

修正后的代码 #

var selectDateTime = await showTimePicker(
  context: context,
  initialTime: TimeOfDay.now(),
  builder: (context, child) {
    // 包裹系统默认的时间选择器组件（包含按钮栏），仅修改24小时制配置
    return MediaQuery(
      data: MediaQuery.of(context).copyWith(
        alwaysUse24HourFormat: true,
      ),
      child: child!, // 使用原有的child，保留默认布局
    );
  },
);

效果说明 #

• 修正后，时间选择器会保留默认的底部确认/取消按钮栏
• 同时以24小时制显示时间，和你想要的样式完全匹配

当前错误效果（alwaysUse24HourFormat: true时） #

目标效果 #

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