如何在Flutter中调用showTimePicker()时使用24小时制？

Question

当我在Fluter中调用方法showTimePicker()时,它显示了一个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

考虑到@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,
        );
      },
    );
}

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

Answer 2

在阅读本答案之前,您需要了解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 3

上面的答案对我不起作用。也许适用于新的 flutter 或 dart 版本。我通过-修复了它

 final newTime = await showTimePicker(
        context: context,
        initialTime: TimeOfDay.now(),
        builder: (context, child) {
          return MediaQuery(
            data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: true),
          child: child ?? Container(),
          );
        },
      );