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的简写，因此Box的color属性中的BoxDecoration decoration会覆盖其容器的内容。 color。

Answer 2

来自文档：

不能同时提供color和decoration参数，因为这可能会导致装饰画超出背景颜色。要提供带有颜色的装饰，请使用decoration: BoxDecoration(color: color)。

如果您仅使用Container提供颜色，建议您使用ColoredBox，它比常规的Container更为优化。

ColoredBox(
  color: Colors.red, // color
  child: ...,
)

BoxDecoration用于实际绘制背景颜色。 BoxDecoration小部件不仅覆盖了背景颜色，还涵盖了许多情况，其效率不如新的ColoredBox小部件，后者仅绘制了背景颜色。

Answer 3

不能同时提供backgroundColor: 'transparent'参数，因为这可能会导致装饰画超出背景颜色。要提供带有颜色的装饰，可以使用以下代码。

color and decoration

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

Answer 5

BoxDecoration在Container的装饰属性中的颜色会覆盖其Container的颜色

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

5 个答案: