如何使用ColorFiltered为Stack中的子组件实现类反色滤镜效果？

要实现该需求直接使用自定义矩阵的ColorFilter即可，内置的BlendMode预设没有对应完全反色的配置，自定义矩阵可以精准实现反色效果。

核心反色逻辑 #

标准RGB反色的变换规则为每个颜色通道值等于255 - 原始通道值，Alpha透明度通道保持不变，对应颜色矩阵如下：

const ColorFilter invertColorFilter = ColorFilter.matrix([
  -1, 0, 0, 0, 255, // 红色通道反色
  0, -1, 0, 0, 255, // 绿色通道反色
  0, 0, -1, 0, 255, // 蓝色通道反色
  0, 0, 0, 1, 0, // 透明度通道保持不变
]);

Stack布局中使用示例 #

仅需要把你要反色的指定Stack子组件单独用ColorFiltered包裹即可，不会影响Stack内其他子元素的显示效果：

Stack(
  children: [
    // 不需要反色的子元素直接放置
    const Positioned(
      top: 20,
      left: 20,
      child: Text("未反色的文本内容"),
    ),
    // 需要反色的指定子元素包裹ColorFiltered
    Positioned(
      top: 50,
      left: 20,
      child: ColorFiltered(
        colorFilter: invertColorFilter,
        child: Image.network("your_image_url"),
      ),
    ),
    // 其他子元素不受影响
    const Icon(Icons.person, size: 30),
  ],
)

效果调整说明 #

• 如果需要降低反色强度，可以将矩阵最后一列的255调整为更小的数值，比如改为220即可得到偏柔和的反色效果
• 如果需要反色同时叠加灰度效果，可以在矩阵中增加RGB通道的权重混合配置，按需调整即可

内容的提问来源于stack exchange，提问作者landfire13224