Flutter 学习 ：日期和时间、格式化日期库、showDat

一.复习上一节

1、替换路由
Navigator.of(context).pushReplacementNamed("/search2");

2、返回跟路由
Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(builder: (context) => MyContent()),(route) => route == null);

二.Flutter系统提供日期和时间戳转换

• 获取当前日期

 var dateTime = new DateTime.now();

• 日期转换时间戳

    second = dateTime.millisecondsSinceEpoch;

• 时间戳转换日期

DateTime.fromMillisecondsSinceEpoch(second)

二.转换对应格式

Flutter中时间戳转换为对应的格式需要引入第三方库

1、地址栏中输入pub.dev 回车，搜索dataTime

2、安装date_format 库

image.png

  date_format: ^1.0.8

• 注意

配置完直接保存即可，flutter会执行 flutter pub get 命令 拉取库，如果没有执行，需要我们手动执行

3、使用库参考文档

image.png

formatDate(dateTime, [yyyy, '-', mm, '-', dd])

• 注意

要先导入包才能使用

三.flutter 系统组件实现日期组件

• 通过调用调用 showDatePicker 或者 show DataPacker 来调用

InkWell(child: Row(
             mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
                  Text( "当前时间${formatDate(clickTime, [yyyy, '-',                mm, '-', dd])}"),
                  Icon(Icons.arrow_drop_down) ],),
          onTap: showDataPicker)

showDataPicker() async {
    var result = await showDatePicker(
      context: context,
      initialDate: dateTime,
      firstDate: DateTime(1980),
      lastDate: DateTime(2100),
    );

    setState(() {
      clickTime = result;
    });
  }

• 注意

1、InkWell组件可以监听点击，可用把它当成button组件来用。
2、调用 showDatePicker showTimePicker 可以调用系统的日期选择和时间选择组件。
3、showDatePicker四个参数都要传注意开始时间要小于初始时间。
4、showDataPicker直接赋值在onTap上 方法参数不用添加context。
5、showDataPicker 方法点进去是Future ，Flutter中Future代表异步，异步获取返回值通过awite或者then。
6、awite关键字必须在 async 方法中使用 。

• 效果图

  
  日期选择.gif

三.flutter 系统组件实现时间组件

InkWell( child: Row(
                     mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                          Text("当前时间${clickTime.format(context)}"),
                          Icon(Icons.arrow_drop_down)], ),
             onTap: _showTimePicker)

 showDataPicker() async {
    clickTime = TimeOfDay.now();
    var result = await showDatePicker(
      context: context,
      initialDate: dateTime,
      firstDate: DateTime(1980),
      lastDate: DateTime(2100),
    );

• 效果图

时间选择.gif

四. 总结

1、获取当前日期
var dateTime = new DateTime.now();

2、转化时间戳
second = dateTime.millisecondsSinceEpoch;

3、时间戳转化日期
DateTime.fromMillisecondsSinceEpoch(second)

4、日期选择组件
showDatePicker( context: context, initialDate:,firstDate:lastDate: )

5、时间选择组件
showTimePicker( context: context, initialDate: )