减少Jetpack Compose中图像/图标(Images/Icons)的重新组合(Recomposition)

减少Jetpack Compose中图像/图标(Images/Icons)的重新组合(Recomposition)

一个简单的技巧来提高你的Compose应用的性能
在检查应用程序以提高列表滚动性能时，我意识到图像和图标在它们的状态没有改变时仍然进行了重新组合！相当奇怪，不是吗？例如…

var counter: Int by remember { mutableStateOf(0) }

Column(modifier = Modifier.fillMaxSize()) {
    Image(
        painter = painterResource(id = R.drawable.ic_launcher_background),
        contentDescription = null
    )
    Text(text = "Text1") // text1
    Button(onClick = { counter += 1 }) {
        Text(text = "Click me ")
    }
    Text("I've been clicked $counter times")
}

当计数器状态发生变化时，Text1 被跳过，而图像则一直重新组合。

左边的数字表示重新组合次数，右边的数字表示跳过的重新组合次数

显然，问题在于 Painter 不被认为是稳定类型。这基本上意味着编译器无法可靠地确定对象是否发生了变化，导致图像一直重新组合。

解决方法

对于矢量资源，我们可以使用 ImageVector 而不是 Painter，因为 ImageVector 被认为是稳定类型，因为它被标记为 @Immutable（不可变）。

// From resources
Image(  
    imageVector = ImageVector.vectorResource(id = R.drawable.ic_launcher_background),
    ...
)

// For material icons
Image(
    imageVector = Icons.Default.ArrowForward,
    ...
)

对于Compose图像，你可以创建一个包装组件，接受 drawableResId 而不是 Painter…

@Composable
fun GetcontactImage(
    drawableResId: Int,
    modifier: Modifier = Modifier,
    ...
) {
    val painter = painterResource(id = drawableResId)
    Image(
        painter = painter,
        contentDescription = "",
        modifier = modifier
    )
}

由于 GetcontactImage（或者 Icon）接受稳定的参数（drawableResId: Int），它被认为是可跳过的，如果它的参数没有改变，它将被跳过。

注意：在设计可重用组件时，建议将 drawableResId 或 color 类型作为参数传递，而不是 Painter。请查看 Android 文档。
https://developer.android.com/jetpack/compose/graphics/images/optimization#pass-url