减少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