Flutter 3 基础12: 选择并显示时间

在上一篇文章中，我们掌握了如何选择并显示一定格式的日期内容，以及如何本地化日期选择对话框的文字语言。

本文继续添加一个新的部件：时间选择。

启动 Android Studio，打开 hello_world 项目，运行虚拟机，这样就可以实时看到编码产生的效果。现在，我们的部件页面展示了日期选择，文本框和按钮三个部件。

打开时间选择对话框

在 lib/widget 文件夹下，打开 my_widgets.dart 文件，定位到下列代码：

dart 复制代码

Widget buildDateField(BuildContext context) {

在这一行代码的上方，添加下列代码：

dart 复制代码

// 选择时间
Widget buildTimeField(BuildContext context) {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          const Text(
            '时间',
            style: TextStyle(fontSize: 20.0),
          ),
          TextButton(
            child: const Text(
              '选择',
              style: TextStyle(fontSize: 20.0),),
            onPressed: () async {
              showTimePicker(
                initialTime: TimeOfDay.now(),
                context: context,
              );
            },
          ),
        ],
      ),
    ],
  );
}

继续在 my_widgets.dart 文件中，定位到下列代码：

dart 复制代码

buildMaterialButton(),

在这一行代码的上方，添加下列代码：

dart 复制代码

buildTimeField(context),

热重启项目。点击部件导航图标，页面上出现了时间选择的按钮。

点击时间的选择按钮，会弹出时间选择的对话框。

显示选择的时间

继续在 my_widgets.dart 文件中，定位到下列代码：

dart 复制代码

DateTime _dueDate = DateTime.now();

在这一行代码的下方，添加下面的代码：

dart 复制代码

TimeOfDay _timeOfDay = TimeOfDay.now();

继续在 my_widgets.dart 文件中，定位到下列代码：

dart 复制代码

showTimePicker(

把这一行代码，替换为以下代码：

dart 复制代码

final timeOfDay = await showTimePicker(

继续在 my_widgets.dart 文件中，定位到下列代码：

dart 复制代码

final timeOfDay = await showTimePicker(
  initialTime: TimeOfDay.now(),
  context: context,
);

在这一块代码的下方，添加下面的代码：

dart 复制代码

setState(() {  
  if (timeOfDay != null) {  
    _timeOfDay = timeOfDay;  
  }  
});

继续在 my_widgets.dart 文件中，定位到下列代码：

dart 复制代码

Row(  
  mainAxisAlignment: MainAxisAlignment.spaceBetween,  
  children: [  
    const Text(  
      '时间',  
      style: TextStyle(fontSize: 20.0),  
    ),  
    TextButton(  
      child: const Text(  
        '选择',  
        style: TextStyle(fontSize: 20.0),),  
      onPressed: () async {  
        final timeOfDay = await showTimePicker(  
          // 2  
          initialTime: TimeOfDay.now(),  
          context: context,  
        );  
  
        setState(() {  
          if (timeOfDay != null) {  
            _timeOfDay = timeOfDay;  
          }  
        });  
      },  
    ),  
  ],  
),

在这一块代码的下方，添加下面的代码：

dart 复制代码

Text(_timeOfDay.format(context)),

保存文件，热重启项目。点击部件导航图标，点击时间的选择按钮，选择一个时间，点击 确定 按钮，这时，时间显示在了页面上。

提交代码

我们已经实现了时间的选择，又到达了一个小小的里程碑，应该对代码进行提交，保持良好编程习惯。

shell 复制代码

git add .
git commit -m '选择并显示时间。'