今天我们来聊聊Flutter中的日期和日期选择器。
Flutter中的日期和时间戳
使用代码如下:
打印结果如下:
所谓时间戳,是指自格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总秒数。
有些情况下,后台可能会将所有的时间都转换成时间戳返回给我们前端,这是我们就需要将时间戳转换成时间,并将时间进行格式化。
展示一个时间,我们会有多种形式,比如1970-01-01、1970/01/01、1970年01月01日,等等,那么我们如何把同一个时间根据需要转换成不同的格式呢?接下来我就为大家介绍一个Flutter中的第三方库。
Flutter的第三方库 date_format 的使用
实际上,我在之前介绍在Flutter中如何导入第三方库的文章依赖管理(二):第三方组件库在Flutter中要如何管理中,就是以date_format这个库为例子作讲解的。
在依赖管理(二):第三方组件库在Flutter中要如何管理中,我详细介绍了如何去查找第三方库、如何将pub.dev中的第三方库安装到Flutter项目中、date_format库的基本使用,这里我就不赘述了。
简单来个小例子吧,代码如下:
打印结果如下:
在开发项目的时候,我们经常会遇到选择时间或者选择日期的场景,接下来我将为大家介绍Flutter中自带的日期选择器和时间选择器。
调用Flutter自带的日期选择器组件和时间选择器组件
效果如下:
关于上述代码,有以下几点需要说明。
1,调起日期选择器的方法showDatePicker的返回值是Future,Future是一个异步类型,因此showDatePicker是一个异步方法。而要获取异步方法里面的数据,有两种方式。
第一种方式是直接在异步方法的后面直接点语法调用then,如下:
第二种方式是采取async+await的方式,如下:
2,我们如果想让某一个组件可以响应用户的点击事件,那么可以在该组件外面再包裹一层InkWell,如下所示:
3,Flutter自带的日期选择器是showDatePicker,时间选择器是showTimePicker。这两个选择器默认的显示效果都是英文的,我们是在中国,那么就需要将其显示成中文版的,这就涉及到Flutter的国际化的问题。关于Flutter的国际化,接下来我将为大家做详细讲解。
Flutter中的国际化
Flutter中的日期选择器,默认是英文的,如下:
那么,如何将其改成中文展示呢?这就需要用到国际化配置。
在iOS和Android中,都有国际化配置的概念,Flutter中也不例外。在Flutter中如何配置国际化呢?
第一步:配置flutter_localizations依赖
找到pubspec.yaml,配置flutter_localizations
第二步:导入国际化的包flutter_localizations.dart
第三步,设置国际化
第四步,在需要展示特定语言的组件中进行配置
这样配置好了之后,效果如下:
这里多说一句,关于Flutter的国际化,有一篇文章讲解的非常好,大家可以参考:https://www.jianshu.com/p/8356a3bc8f6c
调用Flutter的第三方时间选择器组件
上面我介绍了系统给我们提供的日期时间选择器,但是有时候系统提供的选择器并不符合我们的要求,这时我们就可以到pub.dev上去寻找符合我们要求的日期选择器。
这里我们介绍一款Cupertino风格(即iOS风格)的日期选择器——flutter_cupertino_date_picker。
使用代码如下:
效果如下:
最后,关于第三方库的使用我想说的就是,多看看组件库里对该组件的介绍,实在不行就看看Demo。
以上~
本文分享自微信公众号 - iOS小生活(iOSHappyLife)。
如有侵权,请联系 [email protected] 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。