如何将 showModalBottomSheet 设置为全高？

Question

我使用

showRoundedModalBottomSheet

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

Answer 1

[更新]

在

showModalBottomSheet(...)

设置属性

isScrollControlled:true

.

这将使 bottomSheet 达到全高。

---

【原答案】

您可以改为实现 FullScreenDialog。

Flutter Gallery 应用程序有一个例子FullScreenDialog

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

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

查看此博客post更多：

希望对你有帮助

Answer 2

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

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

Answer 3

如果用

showModalBottomSheet()

调用

isScrollControlled: true

，那么对话框将被允许占据整个高度。

要根据内容调整高度，您可以照常进行，例如，使用

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

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
      }
    );
  }
)

Answer 5

我想最简单的方法是：

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

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
);}

到

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

2. 您可以使用其他名称创建一个新类并从类 BottomSheet 复制源代码并更改 maxHeight

Answer 7

您可以将内容包裹在 Container 中并提供高度为全高

  await showModalBottomSheet(
      context: context,
      shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(30), topRight: Radius.circular(30))),
      backgroundColor: Colors.white,
      builder: (BuildContext context) {
         return Container(
             height: MediaQuery.of(context).size.height,
             child: ListView(
         )
      )
   }
}

Answer 8

可以在bottom sheet的定义中修改这个方法。通常情况下，它是 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,
        );
      }

Answer 9

BottomSheet 的默认高度是屏幕尺寸的一半。如果您希望 BottomSheet 根据您的内容动态扩展。

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

这样会根据里面的内容自动展开BottomSheet