带有透明背景的扑角半径 [英] flutter corner radius with transparent background

问题描述

下面是我的代码，我希望使用透明背景渲染一个圆角容器。

Below is my code which I expect to render a round-corner container with a transparent background.

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"),
                  )

              ),

然而，它渲染的却是渲染一个带有圆角半径的白色容器（预期透明）。有什么帮助吗？

However this is what it renders, it renders a white container (expected transparent) with a round corner radius. Any help?

推荐答案

如果您将容器包裹在具有内部圆角的父对象中，且背景色设置为 Colors.transparent 我认为这可以满足您的需求。如果您使用的是脚手架，则默认背景颜色为白色。如果可以实现，则将其更改为 Colors.transparent 。

If you wrap your Container with rounded corners inside of a parent with the background color set to Colors.transparent I think that does what you're looking for. If you're using a Scaffold the default background color is white. Change that to Colors.transparent if that achieves what you want.

        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"),
           )
         ),
        ),

这篇关于带有透明背景的扑角半径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！