ModalBottomSheet 中的 CupertinoDatePicker

Question

无法设法将 CupertinoDatePicker 放入 Flutter 的底部模式中。

获取以下信息： RenderCustomMultiChildLayoutBox 对象在布局期间被赋予无限大小。

...

          Padding(
              padding: const EdgeInsets.symmetric(horizontal: 2.0),
              child: IconButton(
                onPressed: () {
                  showModalBottomSheet(
                      context: context,
                      builder: (context) {
                        return Column(
                          children: [
                            CupertinoDatePicker(
                              mode: CupertinoDatePickerMode.date,
                              initialDateTime: DateTime.now(),
                              onDateTimeChanged: (DateTime dateTime) {
                                // tbd
                              },
                            ),
                            ElevatedButton(onPressed: (){}, child: Text("save"))
                          ],
                        );
                      });
                },
                icon: const FaIcon(FontAwesomeIcons.calendar, size:30, color: Colors.orange),
              ),
            )
...

我对 Flutter 太陌生，无法理解如何解决这个问题：

This probably means that it is a render object that tries to be as big as possible, but it was put inside another render object that allows its children to pick their own size.

...

The relevant error-causing widget was: 
  CupertinoDatePicker CupertinoDatePicker

Answer 1

问题是 CupertinoDatePicker 小部件在渲染期间获得无限大小。要解决这个问题，您可以使用 Container 小部件或 SizedBox 小部件包装该小部件，并为其指定一个 height：

...

          Padding(
              padding: const EdgeInsets.symmetric(horizontal: 2.0),
              child: IconButton(
                onPressed: () {
                  showModalBottomSheet(
                      context: context,
                      builder: (context) {
                        return Column(
                          children: [
                            Container(
                              height: 300, // Just as an example
                              child: CupertinoDatePicker(
                                mode: CupertinoDatePickerMode.date,
                                initialDateTime: DateTime.now(),
                                onDateTimeChanged: (DateTime dateTime)   {
                                // tbd
                                },
                              ),
                            ),
                            ElevatedButton(onPressed: (){}, child: Text("save"))
                          ],
                        );
                      });
                },
                icon: const FaIcon(FontAwesomeIcons.calendar, size:30, color: Colors.orange),
              ),
            )
...

另一种方法是包装带有 Expanded 小部件的 CupertinoDatePicker。 Expanded 小部件使其子部件填充可用空间（而不是尝试填充无限高度）。

...

          Padding(
              padding: const EdgeInsets.symmetric(horizontal: 2.0),
              child: IconButton(
                onPressed: () {
                  showModalBottomSheet(
                      context: context,
                      builder: (context) {
                        return Column(
                          children: [
                            Expanded(
                              child: CupertinoDatePicker(
                                mode: CupertinoDatePickerMode.date,
                                initialDateTime: DateTime.now(),
                                onDateTimeChanged: (DateTime dateTime)   {
                                // tbd
                                },
                              ),
                            ),
                            ElevatedButton(onPressed: (){}, child: Text("save"))
                          ],
                        );
                      });
                },
                icon: const FaIcon(FontAwesomeIcons.calendar, size:30, color: Colors.orange),
              ),
            )
...