flutter - 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'scolor是 BoxDecoration's 的简写color，因此colorContainerdecoration属性中的 BoxDecoration's 会覆盖其 Container's color。

Answer 2

问题：

你不能同时使用color和decoration。来自文档：

不能同时提供 and 参数，因为它可能会导致装饰画在背景颜色上color。decoration要为装饰提供颜色，请使用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

Flutter 团队表示 BoxDecoration() 中的 color 属性经常用于将背景颜色应用于 Container 小部件。因此，他们在 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)".