我们在上一章回中介绍了TimePicker Widget相关的内容,本章回中将介绍
DatePickerDialog Widget
.闲话休提,让我们一起Talk Flutter吧。
概念介绍
我们在这里说的DatePickerDialog
是一种弹出窗口,只不过窗口的内容固定显示为日期,它主要用来让用户选择日期,选择完时间后点击确认或者取消按钮,窗口
就会消失。本章回将详细介绍它的使用方法。
使用方法
和其它Widget类似,我们可以通过DatePickerDialog
的属性来操作它,下面是一些常用的属性:
- initialDate属性:用来控制初始化日期,也就是弹出窗口时看到的日期;
- firstDate属性:用来控制日期选择范围中的开始日期;
- lastDate属性:用来控制日期选择范围中的结束日期;
- initialCalendarMode属性:用来控制弹出窗口的样式;
- cancelText属性:用来控制取消按钮显示的文字;
- confirmText属性:用来控制确认按钮显示的文字;
注意:
- 上面的这些属性中前三个属性是必选的,其它属性都是可选的。
- 弹出窗口的样式有
calendar
和input
两种样式,calendar样式就是可以显示整月日期的样式,占用屏幕窗口比较大,不过比较直观,在此样式下,我们可以通过点击来选择日期;input样式只显示当前日期,占用屏幕窗口比较小,在此样式下,我们可以通过输入日期来达到日期选择的效果。 - 如果不指定样式的话默认样式是calendar.我的经验是使用默认样式,因为这样显示日期更加直观一些,而且可以通过手指滑动来选择日期。
DatePickerDialog
组件不能单独使用,需要配合showDialog()
方法或者showDatePicker()
方法一起使用才可以。接下来我们通过代码来演示它们如何配合使用。
示例代码
showDialog(
context: context,
builder: (context) {
return DatePickerDialog(
initialEntryMode: DatePickerEntryMode.input,
initialDate: DateTime(2021),
firstDate: DateTime(2001),
lastDate: DateTime(2099),
);
},
);
showDatePicker(
context: context,
initialDate: DateTime(2023),
firstDate: DateTime(2021),
lastDate: DateTime(2033),
);
在上面的代码中,我们使用了两种方法来显示DatePickerDialog
:
showDialog()
方法通过builder属性创建了一个DatePickerDialog
对象。showDatePicker()
方法是直接显示DatePickerDialog
,访方法的参数和DatePickerDialog
的属性十分相似。
把这两种方法赋值给Button类组件的onPress
属性,点击Button时就会弹出窗口,然后就可以在窗口中选择日期了。虽然这两种方法都可以创建DatePickerDialog
,但是我推荐使用showDatePicker()
方法,因为它比showDialog()
方法使用方便,我建议大家自己动手试试,体会一下这两种方法的不同点。
看官们,关于DatePickerDialog Widget
的内容就介绍到这里,欢迎大家在评论区交流与讨论!