颤动角半径与透明背景

Question

下面是我希望渲染具有透明背景的圆角容器的代码。

return new Container(
                //padding: const EdgeInsets.all(32.0),
                height: 800.0,
                //color: const Color(0xffDC1C17),
                //color: const Color(0xffFFAB91),
                decoration: new BoxDecoration(
                  color: Colors.green, //new Color.fromRGBO(255, 0, 0, 0.0),
                  borderRadius: new BorderRadius.only(
                    topLeft:  const  Radius.circular(40.0),
                    topRight: const  Radius.circular(40.0))
                ),
                child:  new Container(
                    decoration: new BoxDecoration(
                        color: Colors.blue,
                        borderRadius: new BorderRadius.only(
                            topLeft:  const  Radius.circular(40.0),
                            topRight: const  Radius.circular(40.0))
                    ),
                  child: new Center(
                    child: new Text("Hi modal sheet"),
                  )

              ),

然而，这是它呈现的内容，它呈现一个圆角半径的白色容器（预期透明）。有帮助吗？

Answer 1

如果你用背景颜色设置为Container的父母包裹你的Colors.transparent圆角，我认为这就是你要找的东西。如果您使用的是Scaffold，则默认背景颜色为白色。如果达到你想要的，那就改为Colors.transparent。

        new Container(
          height: 300.0,
          color: Colors.transparent,
          child: new Container(
              decoration: new BoxDecoration(
                  color: Colors.green,
                  borderRadius: new BorderRadius.only(
                      topLeft: const Radius.circular(40.0),
                      topRight: const Radius.circular(40.0))),
              child: new Center(
                child: new Text("Hi modal sheet"),
              )),
        ),

Answer 2

如果你想要透明背景的圆角，最好的方法是使用ClipRRect。

return ClipRRect(
  borderRadius: BorderRadius.circular(40.0),
  child: Container(
    height: 800.0,
    width: double.infinity,
    color: Colors.blue,
    child: Center(
      child: new Text("Hi modal sheet"),
    ),
  ),
);

Answer 3

这是一个老问题。但对于那些遇到这个问题的人......

圆角后面的白色背景实际上不是容器。这是应用程序的画布颜色。

要修复：将应用程序的画布颜色更改为Colors.transparent

例：

return new MaterialApp(
  title: 'My App',
  theme: new ThemeData(
    primarySwatch: Colors.green,
    canvasColor: Colors.transparent, //----Change to this------------
    accentColor: Colors.blue,
  ),
  home: new HomeScreen(),
);

Answer 4

/// Create the bottom sheet UI
  Widget bottomSheetBuilder(){
    return Container(
      color: Color(0xFF737373), // This line set the transparent background
      child: Container(
        decoration: BoxDecoration(
          color: Colors.white,
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(16.0),
                topRight: Radius.circular( 16.0)
            )
        ),
        child: Center( child: Text("Hi everyone!"),)
      ),
    );
  }

调用此方法以显示带角的BotoomSheet：

/// Show the bottomSheet when called
  Future _onMenuPressed() async {
    showModalBottomSheet(
        context: context,
        builder: (widgetBuilder) => bottomSheetBuilder()
    );
  }

Answer 5

截至2019年5月1日，使用BottomSheetTheme。

MaterialApp(
    theme: ThemeData(
      // Draw all modals with a white background and top rounded corners
      bottomSheetTheme: BottomSheetThemeData(
        backgroundColor: Colors.white,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(top: Radius.circular(10))
        )
      )
    ),

Introduced最近，使用主题来控制床单样式应该是最好的这个问题。

如果要以不同的方式对不同的底部工作区进行主题化，请在相应的子树中包含一个新的Theme对象，以覆盖该区域的底部工作表主题。

如果出于某种原因你还想在启动底部工作表时手动覆盖主题，showBottomSheet和showModalBottomSheet现在有一个backgroundColor参数。像这样使用它：

 showModalBottomSheet(
    backgroundColor: Colors.transparent,
    context: context,
    builder: (c) {return NavSheet();},
  );

使用主题可以重复使用底部工作表，无论应用程序/应用程序的当前主题如何，并且没有如上所述设置画布颜色的负面影响。