首页
学习
活动
专区
工具
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中。

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

相关·内容

领券