flutter 如何将showModalBottomSheet设置为全高?

sxpgvts3  于 2023-04-07  发布在  Flutter
关注(0)|答案(8)|浏览(398)

我用的是showRoundedModalBottomSheet,我怎么调整这个模式的高度直到appbar?

3gtaxfhh

3gtaxfhh1#

[更新]

showModalBottomSheet(...)中设置属性isScrollControlled:true
它将使bottomSheet达到全高度。

[原始答案]

您可以实现FullScreenDialog。
Flutter Gallery应用程序有一个FullScreenDialog示例
您可以使用以下代码打开对话框:

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

查看post博客了解更多:
希望对你有帮助。

carvr3hs

carvr3hs2#

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

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

3duebb1j3#

如果您使用isScrollControlled: true调用showModalBottomSheet(),则对话框将被允许占据整个高度。
要调整内容的高度,您可以像往常一样进行,例如使用ContainerWrap小部件。
示例:

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

qacovj5a4#

对我有用的是返回 Package 在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
      }
    );
  }
)
zfycwa2u

zfycwa2u5#

我想最简单的方法是:

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

ih99xse16#

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

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

esbemjvw

esbemjvw7#

您可以将内容 Package 在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(
         )
      )
   }
}
pgx2nnw8

pgx2nnw88#

你可以在底部工作表的定义中修改这个方法。通常情况下,它是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,
        );
      }

相关问题