如何在Flutter中调整BottomSheet的高度和borderRadius? [英] How do you adjust the height and borderRadius of a BottomSheet in Flutter?

问题描述

我可能在这里遗漏了一些明显的东西，但是我的BottomSheet仅占据了屏幕的下半部分，即使其中的小部件占据了更多的空间.因此，现在在BottomSheet中有滚动行为.我希望能够增加BottomSheet，以便用户不必滚动太多.

I'm probably missing something obvious here, but my BottomSheet only takes up the bottom half the screen, even though the widgets in it take up more space. So now there is scrolling behavior inside the BottomSheet. I'd like to be able to increase the BottomSheet so that the user doesn't have to scroll as much.

我还想在我的BottomSheet的顶部添加一个borderRadius，使它看起来更像模态" -y或"tab"形.

I also want to add a borderRadius to the top of my BottomSheet, so that it looks more "modal"-y or "tab"-like.

代码:

void _showBottomSheet(BuildContext context) {
    showModalBottomSheet<Null>(
      context: context,
      builder: (BuildContext context) {
        return _bottomSheetScreen; // defined earlier on
      },
    );
}

我尝试过:

showModalBottomSheet<Null>(
  context: context,
  builder: (BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: _borderRadius,
      ),
      height: 1000.0,
      child: _bottomSheetScreen,
    );
  },
);

但是看来这只会影响BottomSheet内部的内容，而不会自定义BottomSheet本身.

but it seems like that only affects the contents inside the BottomSheet, and does not customize the BottomSheet itself.

推荐答案

bottomSheet的默认高度是screenSize的一半

Default height for bottomSheet is half the screenSize

如果您要根据内容扩展 bottomSheet

If you want your bottomSheet to expand according to content

使用以下代码

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

这将根据内部内容自动扩展bottomSheet.

This will automatically expand the bottomSheet according to content inside.

对于在bottomSheet 顶部添加半径，请在下面的代码中返回"bottomSheet"

For adding a radius on top of bottomSheet return below code to `bottomSheet'

Container(
  color: forDialog ? Color(0xFF737373) : Colors.white,
  child: Container(
    decoration: new BoxDecoration(
    color: Colors.white,
      borderRadius: new BorderRadius.only(
            topLeft: const Radius.circular(25.0),
            topRight: const Radius.circular(25.0))),
      child: yourWidget(),
   ),
)

满足两个要求的完整代码

showModalBottomSheet<dynamic>(
isScrollControlled: true,
context: context,
builder: (BuildContext bc) {
  return Wrap(
      children: <Widget>[
          Container(
               color: forDialog ? Color(0xFF737373) : Colors.white,
                 child: Container(
                  decoration: new BoxDecoration(
                  color: Colors.white,
                    borderRadius: new BorderRadius.only(
                          topLeft: const Radius.circular(25.0),
                          topRight: const Radius.circular(25.0))),
                    child: yourWidget(),
                 ),
              )
      ]
   )
 }
)

这篇关于如何在Flutter中调整BottomSheet的高度和borderRadius?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！