如何修改Jetpack Compose中Image组件尺寸且不触发重组？

要避免animateDpAsState触发Image重组，核心是把动画逻辑从组合阶段移到布局/绘制阶段，让尺寸变化不依赖Composable的状态参数更新。下面是具体实现方案：

方案：自定义带动画的LayoutModifier #

通过composed函数在Modifier内部封装动画状态，动画值的变化只会触发布局计算，不会引发组合阶段的重组。

代码实现 #

import androidx.compose.animation.core.Animatable
import androidx.compose.animation.core.spring
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberUpdatedState
import androidx.compose.ui.Modifier
import androidx.compose.ui.composed
import androidx.compose.ui.unit.Dp

fun Modifier.animatedSize(targetSize: Dp) = composed {
    // 初始化动画控制器，保存当前尺寸值
    val animatable = remember { Animatable(targetSize.value, Dp.VectorConverter) }
    // 跟踪最新的目标尺寸，避免targetSize变化触发composed lambda重组
    val currentTarget by rememberUpdatedState(targetSize)

    // 当目标尺寸变化时启动动画
    LaunchedEffect(currentTarget) {
        animatable.animateTo(currentTarget.value, animationSpec = spring())
    }

    // 将动画后的尺寸应用到Modifier
    this.size(animatable.value.dp)
}

使用方式 #

直接在Image上替换原来的size Modifier即可：

Image(
    painter = painterResource(R.drawable.your_image),
    contentDescription = null,
    modifier = Modifier.animatedSize(targetSize = animatedTargetSize)
)

原理说明 #

1. composed函数：为每个使用该Modifier的Composable创建独立的状态作用域，确保动画状态不会在多个Composable间共享。
2. rememberUpdatedState：仅跟踪目标尺寸的最新值，不会因目标值变化触发整个composed lambda的重组，只更新LaunchedEffect的触发条件。
3. Animatable：动画值的变化只会触发Modifier的布局更新，而不会触发Image的组合阶段重组——因为Image的所有组合参数（painter、contentDescription等）都没有变化，只有Modifier的布局行为在动态调整。

如果需要更精细的布局控制，还可以用Modifier.layout直接自定义布局逻辑，完全在布局阶段处理尺寸动画：

fun Modifier.animatedLayoutSize(targetSize: Dp) = composed {
    val animatable = remember { Animatable(targetSize.value, Dp.VectorConverter) }
    val currentTarget by rememberUpdatedState(targetSize)

    LaunchedEffect(currentTarget) {
        animatable.animateTo(currentTarget.value, animationSpec = spring())
    }

    layout { measurable, constraints ->
        val pxSize = animatable.value.dp.toPx().toInt()
        // 强制测量出指定尺寸的可放置对象
        val placeable = measurable.measure(
            constraints.copy(
                minWidth = pxSize,
                maxWidth = pxSize,
                minHeight = pxSize,
                maxHeight = pxSize
            )
        )
        // 设置布局尺寸并放置内容
        layout(pxSize, pxSize) {
            placeable.place(0, 0)
        }
    }
}

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