Flutter 日期时间DatePicker控件及国际化
注意:无特殊说明,flutter版本及dart版本如下:
- flutter版本: 1.12.13+hotfix.5
- dart版本: 2.7.0
datepicker
flutter并没有datepicker这个控件,需要使用showdatepicker
方法弹出日期选择控件,基本用法如下:
raisedbutton( onpressed: () async { var result = await showdatepicker( context: context, initialdate: datetime.now(), firstdate: datetime(2020), lastdate: datetime(2021)); print('$result'); }, )
initialdate
初始化时间,通常情况下设置为当前时间。
firstdate
表示开始时间,设置后,选择器不能选择小于此值的时间。
lastdate
表示结束时间,设置后,选择器不能选择大于此值的时间。
showdatepicker
方法是future方法,点击日期选择控件的“确定按钮后,返回选择的日期。
效果如下:
selectabledaypredicate
参数控制可选日期,返回true表示日期可选,用法如下:
showdatepicker( selectabledaypredicate: (datetime day) { return day.difference(datetime.now()).indays < 2; }, ... )
表示后天之前的时间可选,效果如下:
19日及以后的日期变为灰色,不可选状态。
builder
参数用于设置设置子控件,比如设置深色主题用法如下:
showdatepicker( builder: (context, child) { return theme( data: themedata.dark(), child: child, ); }, ... )
效果如下:
中文支持
增加国际化处理,在pubspec.yaml添加支持:
dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter
在*控件materialapp添加国际化支持:
materialapp( localizationsdelegates: [ globalmateriallocalizations.delegate, globalwidgetslocalizations.delegate, ], supportedlocales: [ const locale('zh', 'ch'), const locale('en', 'us'), ], locale: locale('zh'), ... )
设置showdatepicker
的local参数如下:
showdatepicker( locale: locale('zh'), ... )
效果如下:
timepicker
timepicker和datepicker一样,需要使用showtimepicker
方法,用法如下:
raisedbutton( onpressed: () async { showtimepicker( context: context, initialtime: timeofday.now()); }, )
效果如下:
builder
参数用于控制子控件,可以向datepicker一样设置深色主题,还可以设置其显示24小时,用法如下:
showtimepicker( context: context, initialtime: timeofday.now(), builder: (context, child) { return mediaquery( data: mediaquery.of(context) .copywith(alwaysuse24hourformat: true), child: child, ); });
效果如下:
中文支持
添加国际化支持,步骤同datepicker中文支持,但showtimepicker
并没有local参数,使用builder
参数设置,如下:
showtimepicker( context: context, initialtime: timeofday.now(), builder: (context, child) { return localizations( locale: const locale('zh'), child: child, delegates: <localizationsdelegate>[ globalmateriallocalizations.delegate, globalwidgetslocalizations.delegate, ] ); });
效果如下:
cupertinodatepicker
ios风格的日期选择器,用法如下:
var _datetime = datetime.now(); cupertinodatepicker( initialdatetime: _datetime, ondatetimechanged: (date) { setstate(() { _datetime = date; }); }, )
效果如下:
mode
参数设置日期的格式:
- time:只显示时间,效果:
4 | 14 | pm
- date:只显示日期,效果:
july | 13 | 2012
- dateandtime:时间和日期都显示,效果:
fri jul 13 | 4 | 14 | pm
设置最大日期和最小日期:
cupertinodatepicker( minimumdate: datetime.now().add(duration(days: -1)), maximumdate: datetime.now().add(duration(days: 1)), ... )
效果如下:
使用24小时制:
cupertinodatepicker( use24hformat: true, ... )
cupertinotimerpicker
cupertinotimerpicker 是ios风格的时间选择器,基本用法如下:
cupertinotimerpicker( ontimerdurationchanged: (duration duration){ }, )
效果如下:
设置只显示小时和分钟:
cupertinotimerpicker( mode: cupertinotimerpickermode.hm, ... )
默认情况下,cupertinotimerpicker显示0:0:0,设置显示当前时间:
var now = datetime.now(); return container( height: 200, child: cupertinotimerpicker( initialtimerduration: duration(hours: now.hour,minutes: now.minute,seconds: now.second), ontimerdurationchanged: (duration duration) {}, ), );
欢迎加入flutter的微信交流群(mqd_zzy),一起学习,一起进步,生活不止眼前的苟且,还有诗和《远方》。
当然我也非常希望您关注我个人的公众号,里面有各种福利等着大家哦。