如何将 showModalBottomSheet 设置为全屏高度？

Question

我在使用showRoundedModalBottomSheet，如何将这个模态框的高度调整到appbar的位置？

- RIFAL

---

我不认为这是可能的，但你可以实现全屏对话框。 - ibhavikmakwana

是否可以通过向下拖动来关闭全屏对话框？ - RIFAL

您可以使用GestureDetector来实现此功能。 - ibhavikmakwana

如何在全屏对话框上使应用栏透明？并且将Scaffold的边缘调整为与我的帖子图片的完整高度相同？ - RIFAL

Answer 1

[更新]

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

这将使底部表单达到全高度。

---

[原始回答]

您可以实现 FullScreenDialog。

Flutter Gallery 应用程序有一个 FullScreenDialog 的示例。

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

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

还可以查看此博客文章了解更多：

希望它能帮到您。

- ibhavikmakwana

---

如何在全屏对话框上使应用栏透明？并且将Scaffold的边缘与帖子图像的完整高度对齐，以便看起来更加美观？ - RIFAL

这是另一个问题。您可以使用它使Appbar的颜色透明。 - ibhavikmakwana

@ibhavikmakwana 这个弹出窗口在状态栏上方，你知道如何调整它吗？ - thanhbinh84

尝试使用 SafeArea 小部件。 - ibhavikmakwana

我不知道为什么我的评论没有显示在这里 :-| 但是我已经更新了一个链接。谢谢。 - ibhavikmakwana

Answer 2

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

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

- Muhammad Usman

---

这个回答值得更多的关注。 - Reitenator

让我们给它无限点赞！ - Rudolf J

isScrollControlled 解决了我的问题... 它使动态 showModalBottomSheet 的高度变得可控。 - genericUser

它可以运行，但是现在拖动消失的行为已经消失了!!! - zulkarnain shah

这个回答肯定需要更多关注，正是我所需要的。 - Shiju Shaji

@zulkarnainshah 我多次使用了showModalBottomSheet并设置了isScrollControlled: true，一切都没有任何问题。拖动关闭功能仍然正常工作。 - undefined

Answer 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,
);

- jose.angel.jimenez

Answer 4

对我有用的是将模态框的内容包裹在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

---

很好的回答 @ivanacorovic - Balaji

你的建议真是太好了，向你致敬！;) - Java Nerd

Answer 5

我猜最简单的方法是:

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

- Andrew

Answer 6

1. 你打开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
);}

to

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

2. 您可以创建一个新的类并从BottomSheet类复制源代码，然后更改maxHeight属性。

- Bé Tập Code

Answer 7

BottomSheet 的默认高度为屏幕大小的一半。如果您想让 BottomSheet 根据您的内容动态地扩展。

showModalBottomSheet<dynamic>(
isScrollControlled: true,
context: context,
builder: (BuildContext bc) {
  return Wrap(
      children: <Widget>[...]
  )
 }
)

这将根据内容自动展开BottomSheet。

- zulkarnain shah

Answer 8

你可以通过使用 FractionallySizedBox 控制高度，并将 useSafeArea 设置为 true，以获取没有刘海的准确可用高度。

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

- MD. IBRAHIM KHALIL TANIM

Answer 9

使用约束和isScrollControlled字段，可以像这样：

 showModalBottomSheet(
                  context: context,
                   constraints: BoxConstraints(minHeight:  context.mediaQuerySize.height * .9, maxHeight: context.mediaQuerySize.height * .9),
                  isScrollControlled: true,
                  builder: (context) => YourWidget(),
                )

但是我们应该同时实现minHeight和maxHeight。

- Marjan Davodinejad

Answer 10

你还可以使用 DraggableScrollableSheet 来调整底部面板的高度并处理滚动：

  showModalBottomSheet(
  context: context,
  useRootNavigator: true,
  isScrollControlled: true,
  enableDrag: true,
  builder: (_) {
    return DraggableScrollableSheet(
      minChildSize: minSize,
      maxChildSize: maxSize,
      expand: false,
      initialChildSize: initSize,
      builder: (context, scrollController) {
        return YourWidget();
      },
    );
  },
);

- Vahid Rajabi