Flutter的日期，格式化日期和组件选择

Flutter中的日期和时间戳

//获取当前日期
DateTime \_nowDate = DateTime.now();

print(\_nowDate);//2019-10-29 10:57:20.384872

print(\_nowDate.millisecondsSinceEpoch);//时间戳，1572317840384

print(DateTime.fromMicrosecondsSinceEpoch(1572317840384));//时间戳转换日期，1970-01-19 12:45:17.840384

所谓时间戳，是指自格林威治时间1970年01月01日00时00分00秒（北京时间1970年01月01日08时00分00秒）起至现在的总秒数。

有些情况下，后台可能会将所有的时间都转换成时间戳返回给我们前端，这是我们就需要将时间戳转换成时间，并将时间进行格式化。

展示一个时间，我们会有多种形式，比如1970-01-01、1970/01/01、1970年01月01日，等等，那么我们如何把同一个时间根据需要转换成不同的格式呢？接下来我就为大家介绍一个Flutter中的第三方库。

Flutter第三方組件庫

登录pub.dev搜索date_format组件查看Installing添加依赖

pubspec.yaml

dependencies:
    date\_format: ^1.0.8

按ctrl s或flutter packages get后会自动下载依賴包，注意控制台，如无异常就是下载成功

引入包

import 'package:date\_format/date\_format.dart';

print(formatDate(DateTime.now(), \[yyyy, "-", mm, "-", dd, " ", DD, " ", HH, ":", nn, ":", ss\]));

输出

2019-10-29 Wednesday 14:27:29

调用Flutter自带的日期选择器组件和时间选择器组件

显示日历組件和获取选中数据的方法一

//\_代表私有，重写私有的日历组件
  \_showDatePicker(){
    showDatePicker(
      context:context,//上下文必须传入
      initialDate:\_nowDate,//设置初始化日期
      firstDate:DateTime(1900),//设置起始时间
      lastDate: DateTime(2100),//设置结束时间
    ).then((val){//異步方法
      print(val);
    });
  }

方法二

\_showDatePicker() async{
    var val \= await showDatePicker(
      context:context,//上下文必须传入
      initialDate:\_nowDate,//设置初始化日期
      firstDate:DateTime(1900),//设置起始时间
      lastDate: DateTime(2100),//设置结束时间
    );
    setState(() {
      //将获得的时间传给变量
      this.\_nowDate =val;
    });
  }

使用变量替換文本

Container(  
  margin: EdgeInsets.all(5),  
  width: 350,  
  height: 120,  
  decoration: new BoxDecoration(  
    color: Colors.black12,  
    borderRadius:BorderRadius.circular(10.0),//边框  
  ),  
  child: GestureDetector(//手势事件
    child: Text('${formatDate(\_nowDate, \[yyyy, "-", mm, "-", dd\])}'),//替換文本  
    onTap: (){  
      \_showDatePicker();//调用重写的组件  
    },  
  ),  
),

时间

　　//自带组件
  showTimePicker(
      context: context,
      initialTime: new TimeOfDay.now(),
    ).then((val) {
      print(val);
    }).catchError((err) {
      print(err);
    });            

  //获得当前时间
  var \_nowTime = TimeOfDay.now();


\_showTimePicker() async{
    var val \= await showTimePicker(
        context: context,//上下文
        initialTime: \_nowTime/当前时间，设置固定时间TimeOfDay(hour: 12,minute: 10)
    );
    setState(() {
      this.\_nowTime = val;
    });
  }

最后

如果你看到了这里，觉得文章写得不错就给个赞呗？如果你觉得那里值得改进的，请给我留言。一定会认真查询，修正不足。谢谢。

最后针对Android程序员，我这边给大家整理了一些资料，包括不限于高级UI、性能优化、移动架构师、NDK、混合式开发（ReactNative Weex）微信小程序、Flutter等全方面的Android进阶实践技术；希望能帮助到大家，也节省大家在网上搜索资料的时间来学习，也可以分享动态给身边好友一起学习！

需要资料的朋友可以扫描下方二维码

这篇好文章是转载于：学新通技术网