第四十二回：DateRangePickerDialog Widget

talk_8

于 2023-05-30 22:02:13 发布

阅读量1.2k

点赞数

分类专栏：一起Talk Flutter吧文章标签： flutter android 日期选择器日期范围选择

本文链接：https://blog.csdn.net/talk_8/article/details/130958062

版权

一起Talk Flutter吧专栏收录该内容

605 篇文章 16 订阅

订阅专栏

本文介绍了Flutter中的DateRangePickerDialogWidget，这是一种用于选择日期范围的组件，包含两个日历分别选择开始和结束日期。文章详细讲解了其概念、常用属性如firstDate、lastDate、currentDate等，以及如何配合showDialog和showDateRangePicker方法使用。建议使用showDateRangePicker方法因其便捷性。

摘要由CSDN通过智能技术生成

我们在上一章回中介绍了DatePickerDialog Widget相关的内容,本章回中将介绍 DateRangePickerDialog Widget.闲话休提，让我们一起Talk Flutter吧。

概念介绍

我们在这里说的DateRangePickerDialog是一种弹出窗口，只不过窗口的内容固定显示为日期，它和DatePickerDialog类似，也是用来让用户选择日期，选择完日期后点击确认或者取消按钮，窗口就会消失。不同点在于它弹出的窗口中包含两个日历，一个用来选择开始日期，另外一个用来选择结束日期,而DatePickerDialog只显示一个日历。通俗点讲，该组件弹出的窗口就是用来选择日期范围，这和它名字中的Range相匹配，本章回将详细介绍它的使用方法。

使用方法

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

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

注意：

上面的这些属性中前两个属性是必选的，其它属性都是可选的。
弹出窗口的样式有calendar和input两种样式，calendar样式就是可以显示整月日期的样式，占用屏幕窗口比较大，不过比较直观,在此样式下，我们可以通过点击来选择日期；
input样式只显示当前日期，占用屏幕窗口比较小，在此样式下，我们可以通过输入日期来达到日期选择的效果。
如果不指定样式的话默认样式是calendar.我的经验是使用input样式，因为这样显示日期更加直观一些，而使用calendar样式会让窗口变的更加大，因为窗口中包含了两日历。
DateRangePickerDialog组件不能单独使用，需要配合showDialog()方法或者showDateRangePicker()方法一起使用才可以。

接下来我们通过代码来演示它们如何配合使用。

示例代码

return DateRangePickerDialog(
  initialEntryMode: DatePickerEntryMode.input,
  //currentDate属性必须写不然报空指针异常
  currentDate:DateTime(2023),
  firstDate: DateTime(2001),
  lastDate: DateTime(2099),
);

showDateRangePicker(
  context: context,
  firstDate: DateTime(2021),
  lastDate: DateTime(2033),
);

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

showDialog()方法通过builder属性创建了一个DateRangePickerDialog对象。
showDateRangePicker()方法是直接显示DateRangePickerDialog，访方法的参数和DateRangePickerDialog的属性十分相似。

把这两种方法赋值给Button类组件的onPress属性，点击Button时就会弹出窗口，然后就可以在窗口中选择日期了。虽然这两种方法都可以创建DateRangePickerDialog，但是我推荐使用showDateRangePicker()方法，因为它比showDialog()方法使用方便，我建议大家自己动手试试，体会一下这两种方法的不同点。

看官们，关于DateRangePickerDialog Widget的内容就介绍到这里，欢迎大家在评论区交流与讨论!