Flutter中如何仅对透明背景图片应用ColorFilter而不影响背景？

要实现仅修改透明背景眼睛图的颜色（应用BlendMode.hue效果）且不影响背景，你可以通过ShaderMask来实现，它能让颜色混合仅作用于图片的不透明区域，完全避免额外背景色的干扰：

ShaderMask(
  // 将图片作为遮罩，只在图片像素区域应用颜色混合
  shaderCallback: (Rect bounds) => ImageShader(
    AssetImage('assets/eyes/$eyes.png'),
    TileMode.clamp,
    TileMode.clamp,
    Matrix4.identity().storage,
  ),
  // 使用hue混合模式，将绿色色相应用到图片上
  blendMode: BlendMode.hue,
  // 提供要应用的目标颜色
  child: Container(
    color: Colors.green,
    // 建议设置和图片一致的尺寸，避免拉伸
    width: 100, // 替换成你的图片宽度
    height: 50, // 替换成你的图片高度
  ),
)

原理说明 #

• ShaderMask通过图片的Alpha通道作为遮罩，只有图片的不透明区域会与child的颜色（绿色）进行混合
• BlendMode.hue会取绿色的色相，保留原图片的饱和度和亮度，完美实现你要的眼睛变色效果
• 不需要额外的白色Container，背景完全透明，不会影响后方任何内容

如果你更倾向于用ColorFiltered嵌套的方式，也可以这样写：

ColorFiltered(
  // 先用srcIn确保颜色仅作用于图片的不透明区域
  colorFilter: ColorFilter.mode(Colors.green, BlendMode.srcIn),
  child: ColorFiltered(
    // 再叠加hue模式调整色相
    colorFilter: ColorFilter.mode(Colors.green, BlendMode.hue),
    child: Image.asset('assets/eyes/$eyes.png'),
  ),
)

不过第一种ShaderMask的方式更直观，也更贴合你需求的混合效果。

内容的提问来源于stack exchange，提问作者Thales von Milet