flutter基础 - Date & Time Picker

其实dart的语法,加上flutter的英文文档,让有只有js开发基础的小伙伴来说,还是比较容易懵逼的。所以在这个系列中,我会尽量的分享一些常用控件的小demo出来,大家一起进步。

今天要说的就是常用的时间(日期)控件 - DatePicker

先放出官方文档:传送门

flutter基础 - Date & Time Picker_第1张图片
官方实例

说实话,刚看到我也有一句xxx不知当讲不当讲。。

那我们就接着上一篇的内容,把这个时间控件写到一个tab中(注:上一篇的传送门)。

1. 首先我们来实现一个简单的功能,就是点击按钮,显示当前的时间。

来直接看代码:

flutter基础 - Date & Time Picker_第2张图片
demo1

这样我们每次点击按钮,结果中都显示的是当前的时间,接下来我们来加入datePicker控件

首先我们参照官方文档,得到以下的东东

1.  Future 类

    Future 实例(Future 实例会在计算结束后返回结果),返回的是一个DateTime对象

2. 必需项 :

    context(上下文), 

    initialDate(初始日期)--- 定义控件打开时默认选择日期 

    firstDate(最初日期)  --- 定义控件最早可以选择的日期

    lastDate(最晚日期)--- 定义控件最晚可以选择的日期

来直接看代码:

flutter基础 - Date & Time Picker_第3张图片
控件代码

因为showDatePicker返回的是一个DateTime对象,那我们就直接定义一个DateTime的对象:_picked 来获取showDatePicker返回的值,然后在function中用setState方法给_dateTime赋值。 这样一个datepicker控件就搞定了,还算简单吧。

那举一反三,一个时间控件也就是轻松+愉快了

flutter基础 - Date & Time Picker_第4张图片
时间控件

那今天就到此为止咯

flutter 中文社区(官方QQ群:338252156)

你可能感兴趣的:(flutter基础 - Date & Time Picker)