Flutter BoxDecoration 的背景色覆盖了 Container 的背景色，为啥？

Posted 2023-02-21

【中文标题】Flutter BoxDecoration 的背景色覆盖了 Container 的背景色，为啥？

【英文标题】：Flutter BoxDecoration’s background color overrides the Container's background color, why?Flutter BoxDecoration 的背景色覆盖了 Container 的背景色，为什么？

【发布时间】：2018-01-25 05:55:00

【问题描述】：

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

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

【参考方案1】：

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

【讨论】：

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

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

【参考方案2】：

问题：

来自docs：

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

源代码明确提到color 或decoration 应该是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))

【参考方案3】：

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

【参考方案4】：

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

decoration: BoxDecoration(color: Colors.red).

【讨论】：

已在其他答案中提及。当你有像Container(color: ...)这样的合法方式提供颜色时，为什么还要使用 BoxDecoration 对象。

请不要为了“编辑”而简单地编辑帖子，OP不会接受您复制的答案。