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),一起学习,一起进步,生活不止眼前的苟且,还有诗和《远方》。
今天的文章对大家是否有帮助?如果有,请在文章底部留言和点赞,以表示对我的支持,你们的留言、点赞和转发关注是我持续更新的动力!
- Tomcat 安全配置与性能优化
- 【机器学习】伪标签(Pseudo-Labelling)的介绍:一种半监督机器学习技术
- 这或许是对小白最友好的python入门了吧——13,字典初识
- PHP 安全与性能
- 混合模式程序集是针对“v2.0.50727”版的运行时生成的,在没有配置其他信息的情况下,无法在 4.0 运行时中加载该...
- Linux 系统与数据库安全
- 这或许是对小白最友好的python入门了吧——12,列表深入体验
- 初识SqlLite ---.net连接数据库
- 【实践操作】:六步教你如何用开源框架Tensorflow对象检测API构建一个玩具检测器
- 这或许是对小白最友好的python入门了吧——11,if语句初体验
- 你的网站做好神马搜索优化了吗?神马搜索站长工具提交
- 应用程序的通信成本
- 这或许是对小白最友好的python入门了吧——18,定义函数
- 【深度学习】图片风格转换应用程序:使用CoreML创建Prisma
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PAT (Basic Level) Practice (中文)1015 德才论 (25 分)
- 前端下载二进制流文件
- element-ui 表格打印
- PAT (Basic Level) Practice (中文)1016 部分A+B (15 分)
- 【Linux_Shell 脚本编程学习笔记二、打印菜单】
- PAT (Basic Level) Practice (中文)1017 A除以B (20 分)
- git commit 提交规范
- 非常量的引用左值问题
- PAT (Basic Level) Practice (中文)1019 数字黑洞 (20 分)
- 从 12.9K 开源项目学到的新东西
- PAT (Basic Level) Practice (中文)1048 数字加密 (20 分)
- 一、类加载的双亲委托机制详解
- PAT (Basic Level) Practice (中文)1021 个位数统计 (15 分)
- PAT (Basic Level) Practice (中文)1049 数列的片段和 (20 分)
- PAT (Basic Level) Practice (中文)1022 D进制的A+B (20 分)