Question

当我在Fluter中调用showTimePicker（）方法时，它显示mi带有12小时时钟的选择器（使用AM和PM周期）。同样，当我在TimeOfDay对象上调用format（）方法时，它会在12小时制中返回值。

如何将其更改为24小时制？我发现我需要在Window类中更改alwaysUse24HourFormat属性，但是我不知道该怎么做。

有人可以帮助我吗？预先感谢您的回答。

编辑：代码如下所示：

    Future<Null> _selectTime(BuildContext context) async {
    final TimeOfDay response = await showTimePicker(
      context: context,
      initialTime: pickedTime,
    );
    if (response != null && response != pickedTime) {
      setState(() {
        pickedTime = response;
      });
    }
  }

edit2：我只在Android上尝试过这个。

Answer 1

在阅读此答案之前，您需要了解MediaQuery.of（）的工作方式。本质上，任何给定页面中都有一棵小部件树。每个小部件都有一个Context，您可以将其视为树中的节点。调用MediaQuery.of（context）时，它基本上会跟踪树，直到找到（或找不到）MediaQuery小部件，然后返回与该小部件关联的数据。

您可以做您想做的事，但是您在做事时要特别小心。参见下面的最小代码示例：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context, child) =>
          MediaQuery(data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: true), child: child),
      home: new Container(
        color: Colors.white,
        child: Center(
          child: Builder(
            builder: (context) => FlatButton(
                  onPressed: () => showTimePicker(context: context, initialTime: TimeOfDay.now()),
                  child: Text("Show Time Picker"),
                ),
          ),
        ),
      ),
    );
  }
}

这里有两点值得注意。首先是我要从MaterialApp生成器中的旧媒体创建一个新的MediaQueryData。这是因为您不能修改MaterialQueryData的属性。

第二个是，我用新的MediaQuery将子级包装在MaterialApp的构建器中。这是必需的，以便导航器中的所有“页面”（在本例中为材料应用程序的一部分）都使用MediaQuery.of（）读取此新的MediaQueryData。

第三点是我在FlatButton周围使用了一个Builder。如果我不这样做，它将使用的上下文将是MyApp的上下文，而不是MaterialApp下的上下文。如果您创建了自己的课程来封装“页面”，则没有必要。

MediaQuery必须放置在现在的位置，因为如果将其放置在“页面”（位于容器下方的任何位置）内，则TimePicker小部件实际上不会读取它。这是因为TimePicker实际上是将自身插入为位于导航器（和MaterialApp）下的导航堆栈的顶部元素，而不是嵌入到您的页面下方。如果不是这种情况，使用时间选择器将更加困难。

我不知道我在解释方面做得很好，所以下面是一个图：

MyApp  <------ Context (the one that would have been used without the builder)
  MaterialApp
    MediaQuery (from flutter)
      MediaQuery copy (that was made in the builder)
        Navigator (implicit - built as part of MaterialApp)
         |- Container
         |    Center
         |      Builder     <----\ Context (used to showTimePicker)
         |        FlatButton ----/ 
         \- TimePicker

Answer 2

考虑@rmtmckenzie的答案，您实际上可以简化他告诉您的内容。您无需在alwaysUse24HourFormat: true上下文中设置MyApp。

这可以解决问题

void inputTimeSelect() async {
    final TimeOfDay picked = await showTimePicker(
      context: context,
      initialTime: TimeOfDay.now(),
      builder: (BuildContext context, Widget child) {
        return MediaQuery(
          data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: true),
          child: child,
        );
      },
    );
}

小部件树可以是您想要的任何东西。

在Flutter中调用showTimePicker（）时如何使用24小时制？

2 个答案: