怎么使用Flutter实现日期时间选择类控件及国际化-创新互联
本篇内容介绍了“怎么使用Flutter实现日期时间选择类控件及国际化”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
创新互联公司是一家集网站建设,利津企业网站建设,利津品牌网站建设,网站定制,利津网站建设报价,网络营销,网络优化,利津网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。注意:无特殊说明,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:[ 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实现日期时间选择类控件及国际化”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联-成都网站建设公司网站,小编将为大家输出更多高质量的实用文章!
本文名称:怎么使用Flutter实现日期时间选择类控件及国际化-创新互联
文章来源:http://myzitong.com/article/dcpdso.html