如何使用AM PM选择器以12小时格式显示Flutter时间选择器

0g0grzrc  于 2022-12-30  发布在  Flutter
关注(0)|答案(5)|浏览(220)

我想使用带有AM/PM选择器的12小时格式的Flutter时间选择器,但Flutter只显示24小时格式。
我想得到这个格式:

但是flutter只显示了这种格式:

这是我的代码:

_selectTime(BuildContext context) async {
  TimeOfDay picked = await showTimePicker(
    context: context,
    initialTime: TimeOfDay(hour: 12, minute: 00),
    builder: (BuildContext context, Widget child) {
      return MediaQuery(
        data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: false),
        child: child,
      );
    },
  );
}
mdfafbf1

mdfafbf11#

这个应该能告诉你你想要什么

RaisedButton(
  child: Text('Show Time Picker'),
  onPressed: () async => await showTimePicker(
    context: context,
    builder: (BuildContext context, Widget child) {
      return MediaQuery(
        data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: false),
        child: child,
      );
    },
  ),
),
nsc4cvqm

nsc4cvqm2#

只需使用format()方法来获取所需AM、PM。

final TimeOfDay picked = await showTimePicker(
  context: context,
  initialTime: timeStart,
);
print(picked.format(context));    // 8:15 PM
z31licg0

z31licg03#

可以使用此库Flutter DatePicker
显示12小时格式(AM/PM)的代码:

onTap: (){
    DatePicker.showTime12hPicker(context,
        showTitleActions: true,
        onConfirm: (date) {
          _endTimeController.text = DateFormat.jm().format(date);
        }, locale: LocaleType.en);
  },

结果如下:

sczxawaw

sczxawaw4#

在下面的代码片段中,我找到了表单Flutter Github Issues

await showTimePicker(
          initialTime: TimeOfDay.now(),
          context: context,
          builder: (context, child) {
            final Widget mediaQueryWrapper = MediaQuery(
              data: MediaQuery.of(context).copyWith(
                alwaysUse24HourFormat: false,
              ),
              child: child,
            );
            // A hack to use the es_US dateTimeFormat value.
            if (Localizations.localeOf(context).languageCode == 'es') {
              return Localizations.override(
                context: context,
                locale: Locale('es', 'US'),
                child: mediaQueryWrapper,
              );
            }
            return mediaQueryWrapper;
          },
        );

时间选择器正在根据区域设置**选择格式 *。上面的代码正在将区域设置的国家/地区调整为美国,因为美国有12小时的时间格式。请使用您遇到问题的语言代码代替“es”。
所有的信用去的人谁张贴在上述链接的解决方案。我在这里重新张贴,所以,人们可以很容易地找到解决方案。

pftdvrlh

pftdvrlh5#

您使用了showTimePicker(),并且在其中分配了initialTime值,而它将考虑24小时格式,但如果您想要12小时格式,请遵循以下方法
我创建了一个函数,它将从按钮的onTap调用:(){}方法
我的函数

Future<TimeOfDay?> getTime({
  required BuildContext context,
  String? title,
  TimeOfDay? initialTime,
  String? cancelText,
  String? confirmText,
}) async {
  TimeOfDay? time = await showTimePicker(
    initialEntryMode: TimePickerEntryMode.dial,
    context: context,
    initialTime: initialTime ?? TimeOfDay.now(),
    cancelText: cancelText ?? "Cancel",
    confirmText: confirmText ?? "Save",
    helpText: title ?? "Select time",
    builder: (context, Widget? child) {
      return MediaQuery(
        data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: false),
        child: child!,
      );
    },
  );

  return time;
}

这里在builder内部应用了MediaQuery方法,MediaQuery将获取数据,因此,这里您需要指定为数据:媒体查询.of(上下文).copyWith(始终使用24小时格式:假),
您将获得12小时格式的时间
如果您喜欢观看完整代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              child: Text('getTime'),
              onPressed: () async {
                TimeOfDay? time = await getTime(
                  context: context,
                  title: "Select Your Time",
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

Future<TimeOfDay?> getTime({
  required BuildContext context,
  String? title,
  TimeOfDay? initialTime,
  String? cancelText,
  String? confirmText,
}) async {
  TimeOfDay? time = await showTimePicker(
    initialEntryMode: TimePickerEntryMode.dial,
    context: context,
    initialTime: initialTime ?? TimeOfDay.now(),
    cancelText: cancelText ?? "Cancel",
    confirmText: confirmText ?? "Save",
    helpText: title ?? "Select time",
    builder: (context, Widget? child) {
      return MediaQuery(
        data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: false),
        child: child!,
      );
    },
  );

  return time;
}

谢谢

相关问题