Flutter 3 基础11: 选择并显示日期

到目前为止,我们已经添加了两个部件:按钮和文本框,并对代码进行了优化。本文继续增加一个新部件:日期选择。

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

打开日期选择对话框

  1. lib/widget 文件夹下,打开 my_widgets.dart 文件,定位到下列代码:
dart 复制代码
MaterialButton buildMaterialButton() {
  1. 在这一行代码的上方,添加下列代码:
dart 复制代码
Widget buildDateField(BuildContext context) {  
  return Column(  
    crossAxisAlignment: CrossAxisAlignment.start,  
    children: [  
      Row(  
        mainAxisAlignment: MainAxisAlignment.spaceBetween,  
        children: [  
          const Text(  
            '日期',  
            style: TextStyle(fontSize: 20),  
          ),  
          TextButton(  
            child: const Text('选择', style: TextStyle(fontSize: 20),),
            onPressed: () async {  
              final currentDate = DateTime.now();  
              showDatePicker(  
                context: context,  
                initialDate: currentDate,  
                firstDate: currentDate,  
                lastDate: DateTime(currentDate.year + 5),  
              );  
            },  
          ),  
        ],  
      ),
    ],  
  );  
}
  1. 继续在 my_widgets.dart 文件中,定位到下列代码:
dart 复制代码
buildMaterialButton(),
  1. 在这一行代码的上方,添加下列代码:
dart 复制代码
buildDateField(context),
  1. 热重启项目。点击部件导航图标,页面上出现了日期选择的按钮。
  1. 点击选择按钮,会弹出日期选择对话框。

选择日期,点击OK按钮后,对话框自动关闭,但是选择的日期并没有显示出来。接下来,我们就解决这个问题。

显示选择的日期

  1. 继续在 my_widgets.dart 文件中,定位到下列代码:
dart 复制代码
final _textController = TextEditingController();
  1. 在这一行代码的下方,添加下面的代码:
dart 复制代码
DateTime _dueDate = DateTime.now();
  1. 继续在 my_widgets.dart 文件中,定位到下列代码:
dart 复制代码
showDatePicker(
  1. 把这一行代码,替换为以下代码:
dart 复制代码
final selectedDate = await showDatePicker(
  1. 继续在 my_widgets.dart 文件中,定位到下列代码:
dart 复制代码
  lastDate: DateTime(currentDate.year + 5),  
);
  1. 在这两行代码的下方,添加下面的代码:
dart 复制代码
setState(() {
  if (selectedDate != null) {
    _dueDate = selectedDate;
  }
});
  1. 继续在 my_widgets.dart 文件中,定位到下列代码:
dart 复制代码
Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    const Text(
      '日期',
      style: TextStyle(fontSize: 20),
    ),
    TextButton(
      child: const Text('选择', style: TextStyle(fontSize: 20),),
      onPressed: () async {
        final currentDate = DateTime.now();
        final selectedDate = await showDatePicker(
          context: context,
          initialDate: currentDate,
          firstDate: currentDate,
          lastDate: DateTime(currentDate.year + 5),
        );
        setState(() {
          if (selectedDate != null) {
            _dueDate = selectedDate;
          }
        });
      },
    ),
  ],
),
  1. 在这块代码的下方,添加下面的代码:
dart 复制代码
Text(_dueDate.toString()),
  1. 热重启项目。点击部件导航图标,点击选择按钮,选择一个日期,点击 OK 按钮,这时,日期显示在了页面上。

格式化日期显示

现在,页面上已经显示出用户选择的日期,但是我们希望只显示日期的年月日部分,所以还需要对日期内容进行格式化。

  1. 打开 pubspec.yaml 文件,定位到下列代码:
dart 复制代码
dependencies:  
  flutter:  
    sdk: flutter
  1. 在这块代码的下方,添加一行代码 intl: ^0.18.1, 如下所示:
dart 复制代码
dependencies:  
  flutter:  
    sdk: flutter
  intl: ^0.18.1

注意:务必让 flutter:intl: ^0.18.1 缩进保持一致。

  1. 点击文件上方的 Pub get 按钮,下载依赖软件包:
  1. 打开 my_widgets.dart 文件,在文件的起始位置,添加如下导入语句:
dart 复制代码
import 'package:intl/intl.dart';
  1. 继续在 my_widgets.dart 文件中,定位到下列代码:
dart 复制代码
Text(_dueDate.toString()),
  1. 把这一行代码,替换为以下代码:
dart 复制代码
Text(DateFormat('yyyy-MM-dd').format(_dueDate)),
  1. 热重启项目。重新选择一个日期,效果如下图所示:

本地化日期选择

日期选择功能已经大功告成,但美中不足的是,日期选择页面的文字是英语。虽然容易看懂,但是与应用使用的中文语言有些格格不入。现在就来本地化这个日期选择对话框。

  1. 打开 pubspec.yaml 文件,定位到下列代码:
yaml 复制代码
intl: ^0.18.1
  1. 在这一行代码的下面,添加如下代码:
dart 复制代码
flutter_localizations:  
  sdk: flutter

注意:代码缩进。

  1. 点击文件上方的 Pub get 按钮,下载依赖软件包。

  2. 打开 main.dart 文件,定位到下列代码:

dart 复制代码
title: 'Hello World Flutter App',

如果没有找到,可能是之前没有修改过这行代码,需要定位到下列代码:

dart 复制代码
title: 'Flutter Demo',
  1. 在这行代码的下面,添加如下代码:
dart 复制代码
localizationsDelegates: const [  
  GlobalMaterialLocalizations.delegate,  
  GlobalCupertinoLocalizations.delegate,  
  GlobalWidgetsLocalizations.delegate,  
],  
supportedLocales: const [  
  Locale('zh', 'CH'),  
  Locale('en', 'US'),  
],  
locale: const Locale('zh'),
  1. 打开 my_widgets.dart 文件,定位到下列代码:
dart 复制代码
lastDate: DateTime(currentDate.year + 5),
  1. 在这行代码的下面,添加如下代码:
dart 复制代码
locale: const Locale('zh')
  1. 热重启项目。重新打开日期选择框,效果如下图所示:

提交代码

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

shell 复制代码
git add .
git commit -m '选择并显示日期。'
相关推荐
独立开阀者_FwtCoder1 分钟前
"页面白屏了?别慌!前端工程师必备的排查技巧和面试攻略"
java·前端·javascript
慧一居士2 分钟前
Vite 完整功能详解与 Vue 项目实战指南
前端·vue.js
南岸月明2 分钟前
不聊主业,聊聊你们眼中的副业是什么样的?
前端
Kevin在掘金920147 分钟前
c#、.net、Fluent UI Blazor
前端
LovelyAqaurius8 分钟前
RSA加密算法:从数学魔法到现实守护
前端
Hilaku9 分钟前
说实话,React的开发体验,已经被Vue甩开几条街了
前端·javascript·vue.js
蛋黄蛋黄13 分钟前
微信表情怎么在自己的项目使用微信表情?-> [开源仓库]wechat-emoji
前端·github
汪子熙14 分钟前
错误剖析:net::ERR_HTTP2_PROTOCOL_ERROR 200 (OK) 的含义与解决之道
前端
猩猩程序员16 分钟前
Rust 1.88 稳定支持裸函数:更安全简洁的汇编函数写法
前端
艾克马斯奎普特17 分钟前
为什么响应性语法糖最终被废弃了?尤雨溪也曾经试图让你不用写 .value
前端·vue.js·代码规范