Question

我正在编写一个应用程序，该应用程序的底面必须具有角半径。您可以在Google Task应用程序中看到类似的内容。

这是我的代码

showModalBottomSheet(
        context: context,
        builder: (builder) {
          return new Container(
            height: 350.0,
            color: Colors.transparent,
            child: new Container(
                decoration: new BoxDecoration(
                    color: Colors.white,
                    borderRadius: new BorderRadius.only(
                        topLeft: const Radius.circular(10.0), topRight: const Radius.circular(10.0))),
                child: new Center(
                  child: new Text("This is a modal sheet"),
                )),
          );
        });

仍显示没有边框半径的图纸。

好的，我找到了一个原因。它确实显示了圆角，但是由于脚手架的背景颜色，容器的背景保持白色。现在的问题是如何覆盖支架背景颜色。

Answer 1

在show showModalBottomSheet中使用shape属性，并将其赋予RoundedRectangleBorder。

showModalBottomSheet(
        context: context,
        shape : RoundedRectangleBorder(
            borderRadius : BorderRadius.circular(20)
        ),
        builder: (builder) {
          return new Container(
            height: 350.0,
            color: Color(0xFF737373),
            child: new Container(
                child: new Center(
                  child: new Text("This is a modal sheet"),
                )),
          );
        });

Answer 2

对于仍在尝试解决此问题的用户：

由于某些原因Colors.transparent不起作用，因此您所需要做的就是将颜色更改为：Color(0xFF737373)

showModalBottomSheet( context: context, builder: (builder) { return new Container( height: 350.0, color: Color(0xFF737373), child: new Container( decoration: new BoxDecoration( color: Colors.white, borderRadius: new BorderRadius.only( topLeft: const Radius.circular(10.0), topRight: const Radius.circular(10.0))), child: new Center( child: new Text("This is a modal sheet"), )), ); });

Answer 3

好的，因此将应用程序主主题中的canvasColor更改为Colors.transparent即可。

Answer 4

  _settingModalBottomSheet(context) {
    showModalBottomSheet(
      context: context,
      builder: (BuildContext bc){
        return Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(ScreenUtil().setWidth(16)),
              topRight: Radius.circular(ScreenUtil().setWidth(16))
            ),
          ),
        );
      }
    );
  }

它看起来像这样： result_1

在main.dart中添加以下代码：

return MaterialApp(
  theme: ThemeData(
    canvasColor: Colors.transparent
  ),
);

它看起来像这样： result_2

Answer 5

使用如下所示的ClipRRect小部件。

showMaterialModalBottomSheet(
                backgroundColor: Colors.transparent,
                context: context,
                builder: (context, scrollController) =>
                    ClipRRect(
                      borderRadius: BorderRadius.circular(16),
                      child: Container(
                        height:
                        MediaQuery.of(context).size.height *
                            0.95,
                        child: whateverChild();

Answer 6

使用此代码，对我来说效果很好！

shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0))

这是完整的代码。

showModalBottomSheet(
       shape: RoundedRectangleBorder(
         borderRadius: BorderRadius.circular(10.0),
       ),
        context: context,
        builder: (BuildContext bc) {
          return StatefulBuilder(
              builder: (BuildContext context, StateSetter state) {
            return SingleChildScrollView(
                child: InkWell(
                    onTap: () {},
                    child: Container(
                        margin:
                            EdgeInsets.only(left: 10, right: 10, bottom: 10),
                        child: Column(
                            mainAxisSize: MainAxisSize.max,
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: Container()))));
          });
        });

输出：

颤振底片角半径

6 个答案: