如何在Jetpack Compose中程序化设置矢量图标着色模式与颜色？

我有一批SVG转换的矢量图标，需要根据条件动态修改着色颜色。尝试用Compose代码设置颜色滤镜：

Image(
    modifier = Modifier.size(128.dp),
    painter = painterResource(id = R.drawable.icon_1),
    contentDescription = null,
    colorFilter = ColorFilter.tint(Color.Red)
)

得到的效果不符合预期；换成指定BlendMode.Multiply后结果还是一样：

Image(
    modifier = Modifier.size(128.dp),
    painter = painterResource(id = R.drawable.icon_1),
    contentDescription = null,
    colorFilter = ColorFilter.tint(Color.Red, blendMode = BlendMode.Multiply)
)

但在XML布局中设置以下配置时，却能得到正确的预期效果：

android:tint="@color/red"
android:tintMode="multiply"

想知道如何通过Compose代码实现和XML配置一致的动态着色效果？

解决方案 #

问题出在Compose的BlendMode与Android传统XML的tintMode映射关系上——XML中的multiply模式对应的并不是Compose的BlendMode.Multiply，而是BlendMode.ColorMultiply。

修改代码使用ColorMultiply混合模式即可实现和XML一致的效果：

Image(
    modifier = Modifier.size(128.dp),
    painter = painterResource(id = R.drawable.icon_1),
    contentDescription = null,
    colorFilter = ColorFilter.tint(Color.Red, blendMode = BlendMode.ColorMultiply)
)

补充说明 #

Android传统的着色混合模式和Compose的命名有区别，常见的对应关系是：

• XML里的src_in就是ComposeColorFilter.tint默认用的BlendMode.SrcIn
• XML里的multiply对应Compose的BlendMode.ColorMultiply
• XML里的screen对应Compose的BlendMode.ColorScreen

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