如何更改showModalBottomSheet的大小？【Flutter】

Question

我正在使用一个showModalBottomSheet小部件，我想改变它的大小，以便占据屏幕约75％的空间（默认情况下似乎占据50％）。我尝试遵循文档，但找不到大小属性。有人能建议一种方法来改变这个小部件的大小吗？

目前看起来像这样

- user12372626

---

请至少更新您尝试过的代码或为您的场景制作一个快速示例。这将有所帮助。 - Duc Hong

Answer 1

• 在 Container 或 SizedBox 中使用 MediaQuery
• 在 Column 或 Row Widgets 中使用 Flexible、Expanded widgets
• 使用 Wrap、FractionallySizedBox widgets

选择其中一个最适合您的架构

       showModalBottomSheet(
          context: context,
          builder: (BuildContext builder) {
            return Container(
              height: MediaQuery.of(context).copyWith().size.height * 0.75,
              child: CupertinoDatePicker(
                initialDateTime: appointmentDate,
                onDateTimeChanged: (DateTime newDate) {
                  if (this.mounted) setState(() => appointmentDate = newDate);
                },
                use24hFormat: true,
                mode: CupertinoDatePickerMode.date,
                isScrollControlled: true,
              ),
            );
          },
        );

- Can Karabag

---

这个似乎占据了屏幕的33％。我尝试设置小于1（即0.3）的值，它所占据的最大尺寸是屏幕的50％。 - user12372626

如果你设置isScrollControlled: true，modalBottomSheet的高度将与全屏高度相同。你应该使用我在答案中提到的其中一种方式来包装你的内容。我添加了isScrollControlled: true并编辑了我的答案。 - Can Karabag

明白了！感谢您的帮助。 - user12372626

我很高兴能够帮助你。 - Can Karabag

尝试了这个。只有在将 isScrollControlled 设置为 true 时才能正常工作。 - kbpontius

Answer 2

使用Wrap widget包裹您的布局子节点，这样就不需要设置高度了。

showModalBottomSheet(
          context: context,
          isScrollControlled: true,
          builder: (BuildContext builder) {
            return  Container(
            child: Wrap(
              children: <Widget>[

              ],
            ),
          );
          },
        );

- Ravinder Kumar

---

以前这段代码是可以运行的，我记得可能是 Flutter 2.5 的时候。但一旦我升级到 Flutter 2.8 后，它就不再起作用了。当底部弹窗显示时，它会在某种程度上将我的列表视图中的第一个项目添加到其内容中，感觉很奇怪。 - chitgoks

Answer 3

您需要将参数isScrollControlled设置为true。

showModalBottomSheet(
  context: context,
  isScrollControlled: true,
  builder: (BuildContext context) {
    /* your code */
  }
);

- Caffo17

---

这将占据整个屏幕。我需要它占据大约75%的屏幕。 - user12372626

@user12372626，这不是真的。我必须将 isScrollControlled 设置为 true 才能使上述提到的高度计算（为 0.75）正确工作。 - kbpontius

你可以将isScrollControlled设置为true，然后在你的模态容器内使用Wrap小部件。 - Michael Cauduro

Answer 4

这是完整的代码，根据以上答案：

final Map<String, String>? dictValue = await showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      builder: (context) {
        return SizedBox(
          height: MediaQuery.of(context).copyWith().size.height * (3 / 4),
          child: MyCustomWidget(
            showPhoneCode: true,
            onSelect: (value) {},
          ),
        );
      },
    );
    ```

- kokemomuke

Answer 5

占据屏幕的75％，

showModalBottomSheet(
          context: context,
          builder: (BuildContext builder) {
            return Container(
              height: MediaQuery.of(context).copyWith().size.height* (3/4),
              child: CupertinoDatePicker(
                initialDateTime: appointmentDate,
                onDateTimeChanged: (DateTime newDate) {
                  if (this.mounted) setState(() => appointmentDate = newDate);
                },
                use24hFormat: true,
                mode: CupertinoDatePickerMode.date,
              ),
            );
          },
        );

- Jay Mungara

---

尝试过了，只有在将 isScrollControlled 设置为 true 时才有效。 - kbpontius