首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在TextFormField中显示输入时间?

在TextFormField中显示输入时间可以通过以下步骤实现:

  1. 首先,确保你已经在项目中引入了所需的依赖。在Flutter中,你可以在pubspec.yaml文件中添加如下依赖:
代码语言:txt
复制
dependencies:
  flutter:
    sdk: flutter
  intl: ^0.17.0

这里我们使用intl库来处理日期和时间的格式化。

  1. 在需要显示时间的页面中,创建一个DateTime类型的变量来存储用户输入的时间。例如:
代码语言:txt
复制
DateTime selectedTime;
  1. 在TextFormField的controller属性中,创建一个TextEditingController对象,并将其与selectedTime变量关联起来。例如:
代码语言:txt
复制
TextEditingController _timeController = TextEditingController();

然后,在TextFormField的controller属性中使用_timeController。

  1. 在TextFormField的onTap回调中,弹出一个时间选择器供用户选择时间。例如:
代码语言:txt
复制
onTap: () {
  showTimePicker(
    context: context,
    initialTime: TimeOfDay.now(),
  ).then((selected) {
    if (selected != null) {
      setState(() {
        selectedTime = DateTime(
          DateTime.now().year,
          DateTime.now().month,
          DateTime.now().day,
          selected.hour,
          selected.minute,
        );
        _timeController.text = DateFormat.Hm().format(selectedTime);
      });
    }
  });
},

这里我们使用showTimePicker方法来显示时间选择器,并将用户选择的时间存储在selectedTime变量中。然后,我们使用DateFormat.Hm()来格式化时间,并将其显示在TextFormField中。

  1. 最后,在TextFormField的initialValue属性中设置初始值,以便在用户未选择时间时显示默认值。例如:
代码语言:txt
复制
initialValue: selectedTime != null ? DateFormat.Hm().format(selectedTime) : null,

这样,当用户点击TextFormField时,会弹出一个时间选择器供用户选择时间,并将选择的时间显示在TextFormField中。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 【老孟Flutter】Flutter 2 新增的功能

    今天,我们很高兴地宣布Flutter 2的发布。距离Flutter 1.0的发布已经两年多了,但是在很短的时间内,我们已经关闭了24,541期,并合并了765个贡献者的17,039个PR。自9月Flutter 1.22发布以来,我们已经关闭了5807期并合并了298位贡献者的4091个PR。特别感谢我们的志愿者捐助者,他们慷慨地抽出时间来改进Flutter项目。Flutter 2 release 版本前几名志愿者贡献者是xubaolin46个PR,a14n32个PR,专注于使Flutter达到零安全,hamdikahloun具有20个PR,改善了Flutter插件的数量。但是,不仅仅是编码员为Flutter项目做出了贡献。一大批志愿者PR评审人员还负责评审1525个PR,包括hamdikahloun(再次!),CareF和YazeedAlKhalaf(16个!)。Flutter确实是社区的一项工作,如果没有问题提出者,PR贡献者和代码审查者,我们就不可能进入第2版。此版本适用于所有人。

    02
    领券