Flutter BoxDecoration 的背景色会覆盖 Container 的背景色，为什么？

Question

我有一个 Flutter Container 小部件，并为其定义了一种颜色（粉色），但由于某种原因，BoxDecoration 中的颜色覆盖了它（绿色）。为什么？

new Container(
  color: Colors.pink,
  decoration: new BoxDecoration(
    borderRadius: new BorderRadius.circular(16.0),
    color: Colors.green,
  ),
);

Answer 1

Container 的

color

是 BoxDecoration 的

color

的简写，因此 Container 的

color

属性中 BoxDecoration 的

decoration

会覆盖其 Container 的

color

。

Answer 2

问题：

您不能同时使用

color

和

decoration

。来自文档：

color

和

decoration

参数不能同时提供，因为这可能会导致装饰绘制在背景颜色上。要为装饰提供颜色，请使用

decoration: BoxDecoration(color: color)

。

---

解决方案：

• 仅使用

  color

  ：

  Container(
    color: Colors.red
  )
  

• 仅使用

  decoration

  并在此处提供

  color

  ：

  Container(
    decoration: BoxDecoration(color: Colors.red)
  )
  

Answer 3

仅设置背景颜色使用此代码

new Container(
  color: Colors.pink,
  
);

如果使用半径或形状设置背景颜色，则使用装饰内部的颜色

 Container(
          decoration: BoxDecoration(
          color: Colors.red,
          borderRadius: BorderRadius.circular(17)),
child:SizeBox());

Answer 4

Flutter 团队表示，BoxDecoration() 中的 color 属性经常用于将背景颜色应用于 Container 小部件。因此，他们在容器小部件中放置了单独的颜色属性简写。因此，当我们在同一个 Container 小部件中同时使用 color 属性和 BoxDecoration() color 属性时，将抛出如下断言：

Cannot provide both a color and a decoration
The color argument is just a shorthand for "decoration: new BoxDecoration(color: color)".

Answer 5

所以基本上在 Flutter 中，你不能同时为容器和盒子装饰提供颜色 在下面提供的内容中，我注释掉了一种颜色，在我的例子中是容器，这将帮助您解决错误。

Container(
          height: 150,
          // color: Colors.red,  
          decoration: BoxDecoration(
            color: Colors.black, //assign either here or to the container
              borderRadius: BorderRadius.circular(24),))