Flutter教学目录持续更新中
Github源代码持续更新中
1.Date & Time Pickers介绍
- DatePicker：日期选择器
- DateRangePicker：范围日期选择器
- TimePicker：时间选择器
2.DatePicker属性
- context：BuildContext
- initialDate：DateTime 初始化选中日期
- firstDate：DateTime 日历开始日期
- lastDate：DateTime 日历结束日期
- currentDate：DateTime 当前日期
- initialEntryMode：DatePickerEntryMode.calendar 初始化样式，是日历样式还是输入框样式
- selectableDayPredicate：SelectableDayPredicate 日历可选日期范围
- helpText：帮助文本
- cancelText：取消文本
- confirmText：确认文本
- locale：Locale
- textDirection：TextDirection 文本方向
- builder：TransitionBuilder
- initialDatePickerMode：DatePickerMode.day 日历初始化展示日还是年
- errorFormatText：DatePickerEntryMode.input模式下输入日期时格式错误提示
- errorInvalidText：DatePickerEntryMode.input模式下日期超出范围提醒
- fieldHintText：DatePickerEntryMode.input模式下日期输入的提示文本
- fieldLabelText：DatePickerEntryMode.input模式下日期输入悬浮提示文本
3.DateRangePicker属性
- context：BuildContext
- initialDateRange：DateTime 初始化选中日期范围
- firstDate：DateTime 日历开始日期
- lastDate：DateTime 日历结束日期
- currentDate：DateTime 当前日期
- initialEntryMode：DatePickerEntryMode.calendar 初始化样式，是日历样式还是输入框样式
- helpText：帮助文本
- cancelText：取消文本
- confirmText：确认文本
- saveText: 保存文本
- locale：Locale
- textDirection：TextDirection 文本方向
- builder：TransitionBuilder
- initialDatePickerMode：DatePickerMode.day 日历初始化展示日还是年
- errorFormatText：DatePickerEntryMode.input模式下输入日期时格式错误提示
- errorInvalidText：DatePickerEntryMode.input模式下日期超出范围提醒
- fieldStartLabelText: DatePickerEntryMode.input模式下开始日期悬浮提示
- fieldStartHintText: DatePickerEntryMode.input模式下开始日期输入提示
- fieldEndHintText: DatePickerEntryMode.input模式下结束日期悬浮提示
- fieldEndLabelText: DatePickerEntryMode.input模式下结束日期输入提示
4.TimePicker属性
- context,
- initialTime：TimeOfDay 初始化时间
- builder：TransitionBuilder
- initialEntryMode：TimePickerEntryMode.dial
- helpText：帮助文本
- cancelText：取消文本
- confirmText：确认文本
5. DatePicker
- selectableDayPredicate这个属性，这个是控制日历可点选范围了，返回true就是可选，返回false就是不可选，如果设置了选择范围吗，initialDate的日期必须是在可选范围之内，不然会报错
-
initialEntryMode是决定日历初始样式的，一种是输入样式，一种是日历样式
DatePickerEntryMode.calendar.jpg
DatePickerEntryMode.input.jpg
- initialDatePickerMode是决定日历样式下是直接展示日还是展示年，选则年之后再展示日
DatePickerMode.day.jpg
DatePickerMode.year.jpg
-
builder这个属性可以设置日历的样式，例如夜间模式
1601364056701.jpg
_showDatePicker() async {
var result = await showDatePicker(
context: context,
initialDate: DateTime(2020, 5, 10),
firstDate: DateTime(2019, 2, 10),
lastDate: DateTime(2021, 2, 10),
currentDate: DateTime(2020, 5, 12),
initialEntryMode: DatePickerEntryMode.calendar,
selectableDayPredicate: (nowDate) {
return nowDate.isAfter(DateTime(2020, 5, 9)) &&
nowDate.isBefore(DateTime(2020, 5, 22));
},
helpText: '帮助文本：这是一个单选日期选择器',
cancelText: '取消',
confirmText: '确定',
initialDatePickerMode: DatePickerMode.day,
errorFormatText: '输入日期格式错误',
errorInvalidText: '输入日期超出可选范围',
fieldHintText: '请输入日期',
fieldLabelText: '日期',
textDirection: TextDirection.ltr,
builder: (context, widget) {
return Theme(
data: ThemeData.dark(),
child: widget,
);
},
);
setState(() {
if (result != null) {
_date = '${result.year}年${result.month}月${result.day}日';
}
});
}
6.DateRangePicker
这个跟DatePicker区别不大，就是单选变范围选择
1601364416894.jpg
1601364431264.jpg
_showDateRangePicker() async {
var result = await showDateRangePicker(
context: context,
initialDateRange: DateTimeRange(
start: DateTime(2020, 5, 9), end: DateTime(2020, 5, 22)),
firstDate: DateTime(2020, 4, 10),
lastDate: DateTime(2020, 6, 10),
currentDate: DateTime(2020, 5, 12),
initialEntryMode: DatePickerEntryMode.calendar,
helpText: '帮助文本：这是一个范围日期选择器',
cancelText: '取消',
confirmText: '确定',
errorFormatText: '输入日期格式错误',
errorInvalidText: '输入日期超出可选范围',
saveText: '保存',
fieldStartLabelText: '开始日期',
fieldStartHintText: '请输入开始日期',
fieldEndHintText: '请输入结束日期',
fieldEndLabelText: '结束日期',
textDirection: TextDirection.ltr,
builder: (context, widget) {
return Theme(
data: ThemeData.dark(),
child: widget,
);
},
);
setState(() {
if (result != null) {
_dateRange =
'${result.start.year}年${result.start.month}月${result.start.day}日 - ${result.end.year}年${result.end.month}月${result.end.day}日';
}
});
}
7.TimePicker
这个比较简单
TimePickerEntryMode.dial.jpg
TimePickerEntryMode.input.jpg
_showTimePicker() async {
var result = await showTimePicker(
context: context,
initialTime: TimeOfDay(hour: 17, minute: 30),
// builder: (context, widget) {
// return Theme(
// data: ThemeData.dark(),
// child: widget,
// );
// },
helpText: '帮助文本：这是一个时间选择器',
cancelText: '取消',
confirmText: '确定',
initialEntryMode: TimePickerEntryMode.dial,
);
setState(() {
if (result != null) {
_time = '${result.hour}小时${result.minute}分钟';
}
});
}
8.国际化的问题
flutter的自带组件中的语言文字都是英文的，如果需要显示中文那就需要引入国际化
- 添加依赖
flutter_localizations:
sdk: flutter
- MaterialApp中配置国际化
//国际化语言支持
localizationsDelegates:[GlobalMaterialLocalizations.delegate,GlobalWidgetsLocalizations.delegate],
supportedLocales: [Locale('zh','CH')],
1601365034176.jpg
下一节：Material组件之SimpleDialog
