概念介绍

我们在这里说的DateRangePickerDialog是一种弹出窗口#xff0c;只不…

文章目录

我们在这里说的DateRangePickerDialog是一种弹出窗口只不过窗口的内容固定显示为日期它和DatePickerDialog类似也是用来让用户选择日期选择完日期后点击确认或者取消按钮窗口就会消失。

不同点在于它弹出的窗口中包含两个日历一个用来选择开始日期另外一个用来选择结束日期,而DatePickerDialog只显示一个日历。

通俗点讲该组件弹出的窗口就是用来选择日期范围这和它名字中的Range相匹配本章回将详细介绍它的使用方法。

使用方法

和其它Widget类似我们可以通过DateRangePickerDialog的属性来操作它下面是一些常用的属性

firstDate属性用来控制日期选择范围中的开始日期lastDate属性用来控制日期选择范围中的结束日期currentDate属性用来控制初始化日期也就是弹出窗口时看到的日期initialEntryMode属性用来控制弹出窗口的样式cancelText属性用来控制取消按钮显示的文字confirmText属性用来控制确认按钮显示的文字

上面的这些属性中前两个属性是必选的其它属性都是可选的。

弹出窗口的样式有calendar和input两种样式calendar样式就是可以显示整月日期的样式占用屏幕窗口比较大不过比较直观,在此样式下我们可以通过点击来选择日期input样式只显示当前日期占用屏幕窗口比较小在此样式下我们可以通过输入日期来达到日期选择的效果。

如果不指定样式的话默认样式是calendar.我的经验是使用input样式因为这样显示日期更加直观一些而使用calendar样式会让窗口变的更加大因为窗口中包含了两日历。

DateRangePickerDialog组件不能单独使用需要配合showDialog()方法或者showDateRangePicker()方法一起使用才可以。

示例代码

DateRangePickerDialog(initialEntryMode:

DatePickerEntryMode.input,//currentDate属性必须写不然报空指针异常currentDate:DateTime(2023),firstDate:

DateTime(2099),

);在上面的代码中我们使用了两种方法来显示DateRangePickerDialog

showDialog()方法通过builder属性创建了一个DateRangePickerDialog对象。

showDateRangePicker()方法是直接显示DateRangePickerDialog访方法的参数和DateRangePickerDialog的属性十分相似。

把这两种方法赋值给Button类组件的onPress属性点击Button时就会弹出窗口然后就可以在窗口中选择日期了。

虽然这两种方法都可以创建DateRangePickerDialog但是我推荐使用showDateRangePicker()方法因为它比showDialog()方法使用方便我建议大家自己动手试试体会一下这两种方法的不同点。