Flutter Container：不能同时提供颜色和装饰

Question

我想在我的容器周围绘制边框并为背景着色。

Widget bodyWidget() {
  return Container(
    color: Colors.yellow,
    decoration: BoxDecoration(
      border: Border.all(color: Colors.black),
    ),
    child: Text("Flutter"),
  );
}

但是当我尝试这个时我得到了错误

Cannot provide both a color and a decoration
The color argument is just a shorthand for "decoration: new BoxDecoration(color: color)".

这个怎么解决的？

Answer 1

从 Container 中移除 color 参数并将其添加到 BoxDecoration:

Widget bodyWidget() {
  return Container(
    decoration: BoxDecoration(
      color: Colors.yellow,
      border: Border.all(color: Colors.black),
    ),
    child: Text("Flutter"),
  );
}

如果您检查 Container source code，您可以看到 color 参数仅用于在装饰为 null 时设置 BoxDecoration 颜色。

decoration = decoration ?? (color != null ? BoxDecoration(color: color) : null),

你得到的错误只是一个有用的提醒。否则你会得到一个奇怪的覆盖 () 或者你甚至可能不会注意到这个错误。

Answer 2

color 属性是一个 shorthand 用于创建带有颜色字段的 BoxDecoration。如果要添加盒子装饰，只需将颜色放在 BoxDecoration 上即可。

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

因此，如果您在 Container 中使用了 BoxDecoration，那么您必须从 Container 中删除颜色参数并添加到 BoxDecoration 中

          Container(
              decoration: BoxDecoration(
                color: Colors.yellow,
              ),
           // color: Colors.yellow,
          )

Flutter Container：不能同时提供颜色和装饰

Flutter Container: cannot provide both a color and a decoration

flutter

dart

background-color

flutter-container

decoration