Flutter 中的日期范围选择器如何自动保存范围?

How can a Date Range Picker in Flutter save the range automatically?

提问人:river_song 提问时间:8/15/2023 最后编辑:river_song 更新时间:8/18/2023 访问量:169

问:

我在代码中添加了日期范围选择器。如图所示,我正在使用文本“选择”作为保存按钮。但是,我想更改此行为,以便在选择结束日期后立即保存日期范围,并关闭弹出窗口。在查看此函数的文档时,似乎不允许此行为,因为该函数需要用户在保存日期范围之前输入(通过保存按钮)。我怎样才能克服这个问题?有没有办法自定义此功能,或者我应该创建一个完全自定义的日期范围选择器?

enter image description here

这是我的代码片段:

_showDatePicker() async {
    DateTimeRange? dates = await showDateRangePicker(
        context: context,
        firstDate: widget.dateFrom ?? DateTime.now(),
        lastDate: DateTime(2033, 12, 31),
        currentDate: DateTime.now(),
        useRootNavigator: true,
        saveText: 'Select',
        builder: (context, child) {
          return Column(
            children: [
              ConstrainedBox(
                constraints: BoxConstraints(
                    maxWidth: 400.0, maxHeight: 700.0),
                child: Container(
                  padding: EdgeInsets.fromLTRB(10, 10, 10, 0),
                  child: child,
                ),
              )
            ],
          );
        });

    if (dates != null) {
      if (dates == 1) {
        setState(() {
          widget.onChanged!(dates.start, dates.start
        );
      } else {
         widget.onChanged!(dates.start, dates.end);
      }
    }
  }

我什至尝试调用 Navigator.pop() 函数,但在按下按钮之前没有任何反应。

Dart DateRangePicker Flutter-日期范围选择器

评论


答:

0赞 B0Andrew 8/18/2023 #1

在这一点上,似乎不可能监听事件和 .onStartDateChangedonEndDateChangedDateRangePicker

如果我们看一下源代码,似乎这些事件在 和 中可用,不幸的是,它们是私有类。_CalendarRangePickerDialog_CalendarDateRangePicker

另一种方法是基于已提供的日历包构建自定义日期范围选取器对话框。

我只能推荐table_calendar因为我在两个项目中使用过。它是自定义日历小部件最受欢迎的软件包之一。它是非常可定制的,但这可能会有代价,因为根据您的用例的先进程度,设置起来可能会变得困难。

小组件公开了许多您可以使用的事件,您可能对其中一个事件感兴趣:onRangeSelectedTableCalendar