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

Question

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

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

- Mary

Answer 1

Container的 color 是BoxDecoration的 color 的简写形式，因此Container中的 decoration 属性中的BoxDecoration的 color 会覆盖其Container的 color。

- Mary

---

我想为边框设置蓝色，容器背景颜色设置琥珀色，我该怎么做？ - Kamlesh

你可以像这样实现：decoration: BoxDecoration( color: Colors.yellow, border: Border.all(color: Theme.of(context).accentColor,) ), @Kamlesh - Vinoth Vino

Answer 2

问题:

不能同时使用color和decoration。从 文档中可知：

由于装饰可能会覆盖背景颜色，因此无法同时提供color和decoration参数。要使用带有颜色的装饰，请使用decoration: BoxDecoration(color: color)。

---

解决方案:

• 只使用color：

  Container(
    color: Colors.red
  )
  

• 仅使用 decoration，并在此处提供color：

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

- CopsOnRoad

Answer 3

只使用以下代码设置背景颜色

new Container(
  color: Colors.pink,
  
);

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

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

- adarsh

Answer 4

Flutter团队表示，BoxDecoration()中的color属性经常用于将背景颜色应用于Container小部件。因此，他们在Container小部件中为color属性设置了一个单独的速记方式。因此，当我们在同一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)".

- Phan Hero