如何在Jetpack Compose中减少文本颜色动画时的重组？

当前实现代码 #

@Composable
fun TextDemo() {
    var selectedIndex by remember {
        mutableIntStateOf(0)
    }
    Row {
        TabText(
            text = "First",
            isSelected = selectedIndex == 0,
            onClick = {
                selectedIndex = 0
            },
        )
        TabText(
            text = "Second",
            isSelected = selectedIndex == 1,
            onClick = {
                selectedIndex = 1
            },
        )
    }
}

@Composable
fun TabText(
    text: String,
    isSelected: Boolean,
    onClick: () -> Unit,
) {
    val tabTextColor by animateColorAsState(
        targetValue = if (isSelected) {
            Color.Red
        } else {
            Color.Black
        },
        animationSpec = tween(
            easing = LinearEasing,
        ),
        label = "tab_text_color",
    )

    Text(
        modifier = Modifier
            .padding(8.dp)
            .clickable {
                onClick()
            },
        text = text,
        color = tabTextColor,
    )
}

现状说明 #

• 参考UI：Row布局内包含两个Text标签组件，分别显示"First"和"Second"
• 重组问题：原代码用颜色动画切换选中状态时，布局检查器显示动画过程中会触发多次不必要的重组

核心问题 #

如何减少文本颜色动画过程中的重组次数？

优化思路 #

Compose中，alpha、transform这类属性的动画，可以通过Modifier.graphicsLayer {}避免重组——这个修饰符会把动画操作转移到GPU层面执行，不会触发Compose的重组流程。

如果业务允许将颜色切换替换为透明度动画（选中时透明度100%，未选中时50%），就能实现每次切换选中状态仅触发一次重组的效果。

优化后代码 #

@Composable
fun TabText(
    text: String,
    isSelected: Boolean,
    onClick: () -> Unit,
) {
    val alphaValue by animateFloatAsState(
        targetValue = if (isSelected) {
            1F
        } else {
            0.5F
        },
        animationSpec = tween(
            easing = LinearEasing,
        ),
        label = "tab_text_color",
    )

    Text(
        modifier = Modifier
            .graphicsLayer {
                alpha = alphaValue
            }
            .padding(8.dp)
            .clickable {
                onClick()
            },
        text = text,
    )
}

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