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

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

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

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

打开时间选择对话框

  1. lib/widget 文件夹下,打开 my_widgets.dart 文件,定位到下列代码:
dart 复制代码
Widget buildDateField(BuildContext context) {
  1. 在这一行代码的上方,添加下列代码:
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,
              );
            },
          ),
        ],
      ),
    ],
  );
}
  1. 继续在 my_widgets.dart 文件中,定位到下列代码:
dart 复制代码
buildMaterialButton(),
  1. 在这一行代码的上方,添加下列代码:
dart 复制代码
buildTimeField(context),
  1. 热重启项目。点击部件导航图标,页面上出现了时间选择的按钮。
  1. 点击时间的选择按钮,会弹出时间选择的对话框。

显示选择的时间

  1. 继续在 my_widgets.dart 文件中,定位到下列代码:
dart 复制代码
DateTime _dueDate = DateTime.now();
  1. 在这一行代码的下方,添加下面的代码:
dart 复制代码
TimeOfDay _timeOfDay = TimeOfDay.now();
  1. 继续在 my_widgets.dart 文件中,定位到下列代码:
dart 复制代码
showTimePicker(
  1. 把这一行代码,替换为以下代码:
dart 复制代码
final timeOfDay = await showTimePicker(
  1. 继续在 my_widgets.dart 文件中,定位到下列代码:
dart 复制代码
final timeOfDay = await showTimePicker(
  initialTime: TimeOfDay.now(),
  context: context,
);
  1. 在这一块代码的下方,添加下面的代码:
dart 复制代码
setState(() {  
  if (timeOfDay != null) {  
    _timeOfDay = timeOfDay;  
  }  
});
  1. 继续在 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;  
          }  
        });  
      },  
    ),  
  ],  
),
  1. 在这一块代码的下方,添加下面的代码:
dart 复制代码
Text(_timeOfDay.format(context)),
  1. 保存文件,热重启项目。点击部件导航图标,点击时间的选择按钮,选择一个时间,点击 确定 按钮,这时,时间显示在了页面上。

提交代码

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

shell 复制代码
git add .
git commit -m '选择并显示时间。'
相关推荐
2501_9160074737 分钟前
iOS 混淆工具链实战,多工具组合完成 IPA 混淆与加固(iOS混淆|IPA加固|无源码混淆|App 防反编译)
android·ios·小程序·https·uni-app·iphone·webview
LinXunFeng1 小时前
Flutter webview 崩溃率上升怎么办?我的分析与解决方案
flutter·ios·webview
Jeled2 小时前
Retrofit 与 OkHttp 全面解析与实战使用(含封装示例)
android·okhttp·android studio·retrofit
游戏开发爱好者82 小时前
FTP 抓包分析实战,命令、被动主动模式要点、FTPS 与 SFTP 区别及真机取证流程
运维·服务器·网络·ios·小程序·uni-app·iphone
西西学代码4 小时前
Flutter---GridView+自定义控件
flutter
Nick56835 小时前
Xcode16 避坑
ios
ii_best5 小时前
IOS/ 安卓开发工具按键精灵Sys.GetAppList 函数使用指南:轻松获取设备已安装 APP 列表
android·开发语言·ios·编辑器
2501_915909065 小时前
iOS 26 文件管理实战,多工具组合下的 App 数据访问与系统日志调试方案
android·ios·小程序·https·uni-app·iphone·webview
hweiyu005 小时前
苹果iOS开发零基础特训(视频教程)
ios
limingade6 小时前
手机转SIP-手机做中继网关-落地线路对接软交换呼叫中心
android·智能手机·手机转sip·手机做sip中继网关·sip中继