Flutter 使 showDateRangePicker 变小

Question

按照 Flutter 的showDateRangePicker文档创建一个全屏选择器。这在移动设备上看起来没问题，但在 iPad 和网络上却很令人讨厌。

我需要一种方法来限制比例以使覆盖更小。

Answer 1

将参数添加builder到showDateRangePicker()函数中将允许您将日期范围选择器放置在容器或约束框中。

请记住，这似乎仅在构建器的父小部件是Column时才有效。

例子：

dateTimeRangePicker() async {
      DateTimeRange picked = await showDateRangePicker(
          context: context,
          firstDate: DateTime(DateTime.now().year - 5),
          lastDate: DateTime(DateTime.now().year + 5),
          initialDateRange: DateTimeRange(
            end: DateTime(DateTime.now().year, DateTime.now().month, DateTime.now().day + 13),
            start: DateTime.now(),
          ),
          builder: (context, child) {
            return Column(
              children: [
                ConstrainedBox(
                  constraints: BoxConstraints(
                    maxWidth: 400.0,
                  ),
                  child: child,
                )
              ],
            );
          });
      print(picked);
    }

该ConstrainedBox小部件允许我们指定 maxWidth 和 maxHeight 属性。这使我们仍然可以在较小的设备上看到全屏显示，但在 iPad 或网络浏览器等较大设备上限制最大尺寸。

在我看来，这个小部件看起来很高，因为它显示了您可以滚动浏览的许多月份。然而，它看起来并不宽。

上面的例子maxWidth仅显示了一个约束。但maxHeight如果您也想限制的话，也可以添加。

由于这些限制，选择器显示为叠加层，其中背景变暗。您可以单击背景上的任意位置来关闭叠加层、取消选择并返回null。