Flutter小技巧

小技巧：1️⃣实现带小图标灰色；2️⃣实现多列自适应布局。

实现灰色图标

代码实现灰色滤镜效果（使用同一张素材图）

ColorFiltered(
  // 过滤透明背景
  colorFilter: const ColorFilter.matrix(<double>[
    0.2126, 0.7152, 0.0722, 0, 0,
    0.2126, 0.7152, 0.0722, 0, 0,
    0.2126, 0.7152, 0.0722, 0, 0,
    0, 0, 0, 1, 0,
  ]),
  child: Opacity(
    opacity: 0.6,
    child: Image.network(
      'https://example.com/image.jpg',
      fit: BoxFit.cover,
    )
  ),
),

ColorFiltered(
  // 所有素材都灰掉
  colorFilter: ColorFilter.mode(Colors.grey, BlendMode.color),
  child: Opacity(
    opacity: 0.6,
    child: Image.network(
      'https://example.com/image.jpg',
      fit: BoxFit.cover,
    )
  ),
)

实现多列自适应布局

(1)使用Expanded。如果想要实现间距，中间还可以添加SizedBox(width: 8)等。适合宽度不定的模式。

Row(
  children: [
    Expanded(child: Container(color: Colors.blue)),
    Expanded(child: Container(color: Colors.green)),
    Expanded(child: Container(color: Colors.red)),
  ],
)

（2）使用 MainAxisAlignment.spaceAround。这种方式适合于你知道每列的确切宽度的情况，然后均匀分布它们

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
    Container(color: Colors.blue, width: 100),
    Container(color: Colors.green, width: 100),
    Container(color: Colors.red, width: 100),
  ],
)