如何将 showModalBottomSheet 设置为全高？答案

【问题标题】：how to set showModalBottomSheet to full height?如何将 showModalBottomSheet 设置为全高？
【发布时间】：2019-04-18 02:08:48
【问题描述】：

我使用showRoundedModalBottomSheet，如何调整这个模态高度直到appbar？

【问题讨论】：

我认为不可能，但您可以实现全屏对话框。
是否可以向下拖动关闭全屏对话框？
您可以使用 GestureDetector 来执行此操作。
如何在全屏对话框中透明应用栏？和脚手架的主体边缘，所以它会看起来像我之前的帖子图像的全高？

标签： dart flutter

【解决方案1】：

[更新]

在showModalBottomSheet(...) 中设置属性isScrollControlled:true。

它将使bottomSheet达到全高。

[原答案]

您可以改为实现 FullScreenDialog。

Flutter Gallery 应用有一个 FullScreenDialog 的示例

您可以使用以下代码打开对话框：

Navigator.of(context).push(new MaterialPageRoute<Null>(
      builder: (BuildContext context) {
        return Dialog();
      },
    fullscreenDialog: true
  ));

查看此博客post 了解更多信息：

希望对你有所帮助。

【讨论】：

如何在全屏对话框中透明应用栏？和脚手架的主体边缘，所以它会看起来像我之前的帖子图像的全高？
那是另一个问题。您可以使用使 Appbar 的颜色透明。
它会变成黑色。如果将所有基材颜色设置为透明，则会产生另一个问题
@ibhavikmakwana 弹窗在状态栏上方，你知道怎么调整吗？
尝试使用SafeArea 小部件。

【解决方案2】：

你在flutter库中打开类BottomSheet并更改maxHeight

来自

BoxConstraints getConstraintsForChild(BoxConstraints constraints) {
return BoxConstraints(
  minWidth: constraints.maxWidth,
  maxWidth: constraints.maxWidth,
  minHeight: 0.0,
  maxHeight: constraints.maxHeight * 9.0 / 16.0
);}

到

BoxConstraints getConstraintsForChild(BoxConstraints constraints) {
return BoxConstraints(
  minWidth: constraints.maxWidth,
  maxWidth: constraints.maxWidth,
  minHeight: 0.0,
  maxHeight: constraints.maxHeight
);}

您可以创建一个具有其他名称的新类，并从类 BottomSheet 复制源代码并更改 maxHeight

【讨论】：

【解决方案3】：

如果你用isScrollControlled: true调用showModalBottomSheet()，那么对话框将被允许占据整个高度。

要调整内容的高度，您可以照常进行，例如，使用Container 和Wrap 小部件。

例子：

final items = <Widget>[
  ListTile(
    leading: Icon(Icons.photo_camera),
    title: Text('Camera'),
    onTap: () {},
  ),
  ListTile(
    leading: Icon(Icons.photo_library),
    title: Text('Select'),
    onTap: () {},
  ),
  ListTile(
    leading: Icon(Icons.delete),
    title: Text('Delete'),
    onTap: () {},
  ),
  Divider(),
  if (true)
    ListTile(
      title: Text('Cancel'),
      onTap: () {},
    ),
];

showModalBottomSheet(
  context: context,
  builder: (BuildContext _) {
    return Container(
      child: Wrap(
        children: items,
      ),
    );
  },
  isScrollControlled: true,
);

【讨论】：

【解决方案4】：

我想最简单的方法是：

showModalBottomSheet(
      isScrollControlled: true,
      context: context,
      builder: (context) => Wrap(children: [YourSheetWidget()]),
    );

【讨论】：

【解决方案5】：

对我有用的是返回封装在 DraggableScrollableSheet 中的模态内容：

showModalBottomSheet(
  backgroundColor: Colors.transparent,
  context: context,
  isScrollControlled: true,
  isDismissible: true,
  builder: (BuildContext context) {
    return DraggableScrollableSheet(
      initialChildSize: 0.75, //set this as you want
      maxChildSize: 0.75, //set this as you want
      minChildSize: 0.75, //set this as you want
      expand: true,
      builder: (context, scrollController) {
        return Container(...); //whatever you're returning, does not have to be a Container
      }
    );
  }
)

【讨论】：

不错的答案@ivanacorovic

【解决方案6】：

您可以在底部工作表的定义中修改此方法。通常，它是 9.0，但正如您在此处看到的，我将其更改为 13.0。 16.0 为全屏。

@override
      BoxConstraints getConstraintsForChild(BoxConstraints constraints) {
        return BoxConstraints(
          minWidth: constraints.maxWidth,
          maxWidth: constraints.maxWidth,
          minHeight: 0.0,
          maxHeight: isScrollControlled
            ? constraints.maxHeight
            : constraints.maxHeight * 13.0 / 16.0,
        );
      }

【讨论】：

【解决方案7】：

您可以通过使用 FractionallySizedBox 并将 isScrollControlled 设置为 true 来控制高度。

showModalBottomSheet(
    context: context,
    isScrollControlled: true,
    builder: (context) {
      return FractionallySizedBox(
        heightFactor: 0.9,
        child: Container(),
      );
    });

【讨论】：

这个答案值得更多关注。
这个答案应该得到更多的投票。这是更优雅的解决方案。
拯救我的一天，谢谢哥们
应该是答案，谢谢