前言:
在Android 和iOS 常用的App里面经常有获取当前时间和日期 原生的android 和iOS 有系统的api提供很详细 这边我就不展开讲了 今天主要说说flutter 中如何获取时间和日期 以及时间戳的格式转换
效果图:
日期选择
时间选择
1需要用到的三方库 以及选择器中文汉的配置 :
flutter_localizations:
sdk: flutter
date_format: ^1.0.8
把这些复制到 pubspec.yaml 里面
然后在控制台敲flutter pub get 命令下载依赖
2 具体的效果实现
我们写了两个Row组件里面嵌套 Text 和Icon 来进行测试 外层嵌套InkWell 来实现点击效果
我们在onTap方法里面来对我们获取时间和日期进行操作
下面我们再说明我们怎么获取但当前时间和日期
首先要import 进来 import 'package:date_format/date_format.dart'; 依赖
然后通过
DateTime_nowDate=DateTime.now();
var _nowTime=TimeOfDay(hour:12,minute:20);
分别获取当前日期和时间
然后我们调起的日期选择器和时间选择器
日期选择器 :
_showDatePciker()async{
var reslut =await showDatePicker(
context:context,
initialDate:_nowDate,
firstDate:DateTime(1900),
lastDate:DateTime(2050),
);
setState(() {
this._nowDate=reslut;
});
}
时间选择器 :
_showTimePciker()async {
var result=await showTimePicker(
context:context,
initialTime:_nowTime);
setState(() {
this._nowTime=result;
});
}
分别在setState 方法里面 将result 赋值给当前的时间和日期变量
this._nowDate=reslut;
this._nowTime=result;
3我们在具体显示组件里面替换
InkWell(
child:Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("${formatDate(_nowDate, [yyyy, '年', mm, '月', dd])}"),
Icon(Icons.arrow_drop_down)
],
),
onTap: _showDatePciker
/* onTap: _showDatePciker()*/
),
我们要注意将获取的时间格式进行转换
日期 :Text("${formatDate(_nowDate, [yyyy, '年', mm, '月', dd])}"),
时间:Text("${_nowTime.format(context)}"),
到此我们就能实现日期选择和时间选择 但是选择器的界面默认是英文的 为了符合国人习惯我们要做汉化处理
我们需要在程序入口的MaterialApp 里面进行配置
MaterialApp(
home:Scaffold(
appBar:AppBar(
title:Text("主页"),
),
body:MyHomePage(),
),
localizationsDelegates: [
//此处
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
],
supportedLocales: [
//此处
const Locale('zh', 'CH'),
const Locale('en', 'US'),
],
);
配置以后 如果手机是中文的ROM系统 选择器界面就会变成中文显示
最后总结:
这个时间日期选择相对简单需要用到三方库 date_format: ^1.0.8 和语言国际化配置 flutter_localizations:sdk: flutter ,相对简单 ,和原生app时间选择器效果 也非常的接近 算是比较好用,我也是一个flutter学习的新手 有兴趣的同学可以私聊多多交流