如何在Flutter中调整BottomSheet的高度和borderRadius？

Question

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

我还想在我的BottomSheet的顶部添加一个borderRadius，这样它看起来更像“模态”-y或“tab”。

码：

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本身。

Answer 1

使用showBottomSheet而不是showModalBottomSheet

创建全局键和侦听器

final _scaffoldKey = new GlobalKey<ScaffoldState>();
VoidCallback _showPersBottomSheetCallBack;

写下您的方法以显示工作表

  void _showBottomSheet() {
    setState(() {
      _showPersBottomSheetCallBack = null;
    });

    _scaffoldKey.currentState
        .showBottomSheet((context) {
      return new Container(
        height: MediaQuery.of(context).size.height-100.0,
        color: Colors.greenAccent,
        child: new Center(
          child: new Text("Hi BottomSheet"),
        ),
      );
    })
        .closed
        .whenComplete(() {
      if (mounted) {
        setState(() {
          _showPersBottomSheetCallBack = _showBottomSheet;
        });
      }
    });
  }

初始化监听器

void initState() {
    super.initState();
    _showPersBottomSheetCallBack = _showBottomSheet;
  }

在您需要的任何地方调用方法

new RaisedButton(
                  onPressed: _showPersBottomSheetCallBack,
                  child: new Text("Persistent"),
                ),

希望能帮助到你 ！

Answer 2

最近我发现了一个解决方法。通过在应用程序主题中将canvasColor属性设置为Colors.transparent，我们可以使BottomSheet的叠加层消失。

return new MaterialApp(
  title: 'MyApp',
  theme: new ThemeData(
    primarySwatch: Colors.blue,
    canvasColor: Colors.transparent,
  ),
  //...
);

设置完成后，可以使用带圆角的ClipRRect或装饰。

Answer 3

在@Shyju Madathil的上述代码中，您需要在scaffold中添加键才能使其工作

return new Scaffold(
  key: _scaffoldKey,
  ....