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，因此colorContainer decoration属性中BoxDecoration的优先于其Container的color。

Answer 2

问题：

从文档：

的color和decoration参数不能同时提供，因为它会潜在地导致在装饰绘制在背景颜色。要为装饰提供颜色，请使用decoration: BoxDecoration(color: color)。

源代码清楚地提到 ofcolor或decorationshould be null。

assert(color == null || decoration == null,
'Cannot provide both a color and a decoration\n'
    'To provide both, use "decoration: BoxDecoration(color: color)".',
)

解决方案：

• 仅使用color：

  Container(color: Colors.red)
  

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

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

Answer 3

该color and decoration参数不能同时提供，因为它会潜在地导致在装饰绘制在背景颜色。要提供带有颜色的装饰，您可以使用以下代码。

decoration: BoxDecoration(color: Colors.red).

Answer 4

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

new Container(
  color: Colors.pink,
  
);

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

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