如何在Flutter中创建带有圆角的持久底部Sheet？

Question

我想创建一个带有圆角的持久BottomSheet，但是无法实现想要的效果。我已经尝试了链接中提供的代码 "How to create a modal bottomsheet with circular corners in Flutter?" 但它实现的是模态底部面板。

我已经尝试了持久性底部面板，但没有成功。请帮忙告诉我如何做到这一点。

下面的代码可以工作并显示底部面板，但是边角没有变成圆角。

void _showBottomSheet() {
    _scaffoldKey.currentState.showBottomSheet<void>((BuildContext context) {
      final ThemeData themeData = Theme.of(context);
      return new Container(
          padding: const EdgeInsets.all(0),
          width: double.infinity,
          color: Colors.transparent,
          decoration: BoxDecoration(
              borderRadius: new BorderRadius.only(
                  bottomLeft: const Radius.circular(10.0),
                  bottomRight: const Radius.circular(10.0)),
          ),
          child: new Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              BottomNavigationBar(
                currentIndex: 0, // this will be set when a new tab is tapped
                items: [
                  BottomNavigationBarItem(
                    icon: new Icon(Icons.share),
                    title: new Text('Share'),
                  ),
                  BottomNavigationBarItem(
                      icon: Icon(Icons.bookmark),
                      title: Text('Bookmark')
                  )
                ],
                onTap: (index)
                {
                  if(index ==0)
                  {
                    final RenderBox box = context.findRenderObject();
                    Share.share('Hello this is a test',
                        sharePositionOrigin:
                        box.localToGlobal(Offset.zero) & box.size);
                  }
                },
              ),
          ])
      );
    })
      .closed.whenComplete(() {
      if (mounted) {
        setState(() { // re-enable the button
          _showBottomSheetCallback = _showBottomSheet;
          print ("_showBottomSheetCallback enable");
        });
      }

    });
  }

- user1734642

---

你能否更新你的问题并附上你尝试过的代码？还有结果是什么？ - Phuc Tran

是的，我已经更新了代码，但它没有将角落圆滑。 - user1734642

你是想让左下角和右下角变成圆角吗？还是说你的意思是左上角和右上角？ - Jerome Escalante

Answer 1

你可以使用 ClipRRect widget。

void _showBottomSheet() {
    _scaffoldKey.currentState
        .showBottomSheet<void>((BuildContext context) {
          final ThemeData themeData = Theme.of(context);
          return Theme(
            data: themeData.copyWith(canvasColor: Colors.orangeAccent,),
            child: DecoratedBox(
              decoration: BoxDecoration(color: Colors.transparent),
              child: ClipRRect(
                borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(22.0),
                    topRight: Radius.circular(22.0)),
                child:
                    new Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
                  BottomNavigationBar(
                    currentIndex: 0, // this will be set when a new tab is tapped
                    items: [
                      BottomNavigationBarItem(
                        icon: new Icon(Icons.share),
                        title: new Text('Share'),
                      ),
                      BottomNavigationBarItem(
                          icon: Icon(Icons.bookmark),
                          title: Text('Bookmark'))
                    ],
                    onTap: (index) {
                      if (index == 0) {
                        final RenderBox box = context.findRenderObject();
//                      Share.share('Hello this is a test',
//                          sharePositionOrigin:
//                          box.localToGlobal(Offset.zero) & box.size);
                      }
                    },
                  ),
                ]),
              ),
            ),
          );
        })
        .closed
        .whenComplete(() {
          if (mounted) {
//        setState(() { // re-enable the button
//          _showBottomSheetCallback = _showBottomSheet;
//          print ("_showBottomSheetCallback enable");
//        });
          }
        });
  }

输出：

（注：该内容为HTML代码，已翻译并保留了HTML标签）

- anmol.majhail

Answer 2

创建带有圆角的底部工作表的简单方法。

  child: TextButton.icon(
                  onPressed: () {
                    showModalBottomSheet<void>(
                      context: buildContext,
                      shape: const RoundedRectangleBorder(
                        borderRadius: BorderRadius.vertical(
                          top: Radius.circular(20),
                        ),
                      ),
                      clipBehavior: Clip.antiAliasWithSaveLayer,
                      builder: (BuildContext context) {
                        return Flexible(

- shraddha patel