如何在 Flutter 中创建带有圆角的持久底页？答案

【问题标题】：How to create a persistent bottomsheet with circular corners in Flutter?如何在 Flutter 中创建带有圆角的持久底页？
【发布时间】：2019-07-07 09:24:15
【问题描述】：

我想创建一个带有圆角的持久 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");
        });
      }

    });
  }

【问题讨论】：

你能用你试过的代码更新你的问题吗？结果如何？
是的，我已经更新了代码。但它不是拐角处。
您是否要使 bottomLeft 和 bottomRight 角变圆？还是您的意思是 topLeft 和 topRight？

标签： flutter flutter-layout

【解决方案1】：

您可以使用 -ClipRRect 小部件。

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

输出：

【讨论】：