【绘制 Widget】ColoredBox

家人也中招了，这几天得照顾他们，存货不多，可能哪天就断更了。今天聊个轻松的话题，ColoredBox widget。

ColoredBox 介绍

ColoredBox 先绘制颜色，然后再绘制 child。

看到源码会更清晰一些。

void paint(PaintingContext context, Offset offset) {
    if (size > Size.zero) {
      context.canvas.drawRect(offset & size, Paint()..color = color);
    }
    if (child != null) {
      context.paintChild(child!, offset);
    }
  }
复制代码

在布局方面，如果有 ColoredBox 有 child，ColoredBox 和child 一样大，如果没有 child， 取约束的最小值。

在使用 ColoredBox 之前，先简单说下 Color。

如何表示颜色

Color(0x00FFFFFF) 透明白色，00 表示完全透明，可以省略掉  Color(0xFFFFFF) 。Color(0xFFFFFFFF) 不透明白色，FF 表示完全不透明，不可以省略掉 。

开始的两位介于 00-FF 之间就表示半透明。如果你是前端开发，可能不大习惯于 0xFFFFFFFF 这样格式，幸运的是我们还可以这样写 Color.fromRGBO(100, 200, 200, 0.6)，最后一位代表透明，这就和 css 中的格式一样了。

知道如何写颜色值，再看 ColoredBox 就非常轻松了。

使用 ColoredBox

首先就是 Container Widget，他的背景色就是用的 ColoredBox。

if (color != null) {
      current = ColoredBox(color: color!, child: current);
}
复制代码

我们大多时候都直接用 Container了。但是如果只是增加一个背景色，还是用 ColoredBox 为好。比如我们给 Row 加一个背景色。

ColoredBox(
      color: Colors.greenAccent,
      child: Row(children: [Text('IAM17'),SizedBox(width: 10,),Text('天天更新')],)
);
复制代码

用 ColoredBox 个人认为可读性会好些。不过如果你喜欢用 Container 也没有问题。

今天就聊到这了，谢谢观看！