Jetpack Compose中如何减少可动画轮廓图标的重组合次数？

我通常在drawBehind里用drawRect来减少颜色动画引发的重组合，但遇到图标时就不知道该怎么处理了。比如常见的背景色动画示例是这样的：

modifier = Modifier.drawBehind {
    drawRect(animatedColor)
}

但如果是图标，像下面的代码，重组合计数工具显示有大概11次重组合，而且drawRect根本没法改变图标颜色，只能在图标后面画个矩形。这种情况该怎么减少重组合次数？

val isClicked = remember {
    mutableStateOf(false)
}
val color = animateColorAsState(targetValue = if (isClicked.value) Color.White else Color.Blue)

Icon(
    modifier = Modifier.clickable {
        isClicked.value = !isClicked.value
    },
    imageVector = Icons.Outlined.Home,
    contentDescription = null,
    tint = color.value,
)

核心解决方案：分离动画状态与组件重组 #

要减少重组合，关键是让动画值的更新只触发绘制层的重绘，不引发整个Icon组件的重组。这里提供两种实用方法：

方法一：用drawWithCache缓存图标并动态着色

通过缓存图标矢量图，在绘制阶段用动画颜色重新着色，避免Icon因tint变化触发重组：

val isClicked = remember { mutableStateOf(false) }
val animatedColor = animateColorAsState(
    targetValue = if (isClicked.value) Color.White else Color.Blue,
    label = "iconTintAnimation"
)

Icon(
    modifier = Modifier
        .clickable { isClicked.value = !isClicked.value }
        .drawWithCache {
            // 缓存图标为Bitmap，避免每次重绘重复解析矢量图
            val iconBitmap = imageVectorToBitmap(Icons.Outlined.Home, size)
            onDrawWithContent {
                // 用动画颜色绘制缓存的图标，覆盖原有图标
                drawImage(
                    image = iconBitmap,
                    colorFilter = ColorFilter.tint(animatedColor.value)
                )
            }
        },
    imageVector = Icons.Outlined.Home,
    contentDescription = null,
    // 设为透明，让自定义绘制的图标显示出来
    tint = Color.Transparent
)

// 辅助函数：将ImageVector转换为Bitmap
@Composable
fun imageVectorToBitmap(imageVector: ImageVector, size: Size): ImageBitmap {
    val density = LocalDensity.current
    return remember(imageVector, size, density) {
        val pxSize = with(density) { size.toPxSize() }
        ImageVector.toBitmap(
            imageVector,
            pxSize.width.toInt(),
            pxSize.height.toInt()
        )
    }
}

方法二：用rememberUpdatedState隔离动画值

通过rememberUpdatedState包装动画值，让Icon组件不直接依赖动画状态，仅在绘制层应用颜色变化：

val isClicked = remember { mutableStateOf(false) }
val targetColor = if (isClicked.value) Color.White else Color.Blue
val animatedColor = animateColorAsState(targetValue = targetColor, label = "iconTint")
// 包装动画值，避免其更新触发Icon重组
val updatedColor = rememberUpdatedState(animatedColor.value)

Icon(
    modifier = Modifier
        .clickable { isClicked.value = !isClicked.value }
        .drawWithCache {
            onDrawWithContent {
                drawContent()
                // 用SrcIn混合模式，让颜色只覆盖图标区域
                drawRect(
                    color = updatedColor.value,
                    blendMode = BlendMode.SrcIn
                )
            }
        },
    imageVector = Icons.Outlined.Home,
    contentDescription = null,
    tint = Color.Unspecified
)

为什么能减少重组合？ #

• 第一种方法中，Icon的tint是固定的透明值，动画值更新只会触发drawWithCache内部的重绘，不会导致Icon组件本身重组。
• 第二种方法用rememberUpdatedState后，Icon的参数没有直接引用animatedColor.value，动画更新不会触发组件重组，仅绘制层刷新。

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