android - compose lazycolumn 卡顿?

Question

大佬们 我刚开始学习compose 写了一个列表 但是滑动的时候会特别卡 求帮助

data class Message(val author: String, val body: String)@Preview@Composablefun MyList() {    val context = LocalContext.current    val msgList = (1..20).map { Message("Jetpack Compose", "$it") }    MessageList(list = msgList) { position, message ->        Toast.makeText(context, "message ${message.body} position $position", Toast.LENGTH_SHORT).show()    }}@Composablefun MessageList(list: List<Message>, onItemClick: ((Int, Message) -> Unit)?) {    LazyColumn {        item {            Text(                text = "————Start————",                modifier = Modifier.fillMaxWidth(),                textAlign = TextAlign.Center            )        }        itemsIndexed(list) { index: Int, item: Message ->            key(item.body) {                MessageCard(message = item) {                    onItemClick?.invoke(index, item)                }            }        }        item {            Text(                text = "————End————",                modifier = Modifier.fillMaxWidth(),                textAlign = TextAlign.Center            )        }    }}@Composablefun MessageCard(message: Message, onClick: (() -> Unit)?) {    val roundedCornerShape = RoundedCornerShape(10.dp)    Surface(        shape = MaterialTheme.shapes.medium, // 使用 MaterialTheme 自带的形状        color = MaterialTheme.colorScheme.background,        modifier = Modifier            .padding(all = 8.dp)            .clickable { onClick?.invoke() }    ) {        Row(            modifier = Modifier                .padding(8.dp)                .fillMaxWidth()        ) {            Box(modifier = Modifier.align(Alignment.CenterVertically)) {                Image(                    painter = painterResource(id = R.drawable.ic_launcher_background),                    contentDescription = "这是图片",                    modifier = Modifier                        .size(50.dp)                        .clip(roundedCornerShape)                        .border(1.5.dp, MaterialTheme.colorScheme.secondary, roundedCornerShape)                )                Image(                    painter = painterResource(id = R.drawable.ic_launcher_foreground),                    contentDescription = "这是图片",                    modifier = Modifier                        .size(50.dp)                        .clip(roundedCornerShape)                )            }            Spacer(modifier = Modifier.padding(start = 8.dp))            Column(                modifier = Modifier.height(50.dp),                verticalArrangement = Arrangement.SpaceBetween            ) {                Text(                    text = "作者是 ${message.author}",                    color = MaterialTheme.colorScheme.tertiary,                    style = MaterialTheme.typography.titleMedium,                )                Text(                    text = "主题是 ${message.body}",                    style = MaterialTheme.typography.bodyLarge                )            }        }    }}

我试着更新了依赖库依然没有变化

def composeBom = platform('androidx.compose:compose-bom:2024.05.00')api composeBomandroidTestImplementation composeBom//compose bomapi 'androidx.compose.foundation:foundation'api 'androidx.compose.material:material-icons-core'api 'androidx.compose.material:material-icons-extended'api "androidx.compose.material:material"api "androidx.compose.ui:ui-tooling-preview"api 'androidx.activity:activity-compose'api 'androidx.compose.material3:material3'api 'androidx.lifecycle:lifecycle-viewmodel-compose'api "androidx.compose.runtime:runtime-livedata"

Answer 1

你的LazyColumn列表滑动卡顿可能由几个不同的原因造成。以下是一些可能的解决方案和检查点：

1. 优化图片加载：

   • 如果painterResource加载的图片很大或者未经优化，它可能会导致性能问题。确保图片大小合适，并且已经进行了适当的压缩。
   • 考虑使用异步图片加载库，如Glide或Coil，来在后台线程加载图片，并在它们准备好时将它们绘制到UI上。

2. 减少重绘和布局计算：

   • 避免在列表项中执行复杂的布局或计算，特别是在每次滚动时都会调用的部分。
   • 尽可能复用视图或布局，以减少不必要的重绘和布局计算。

3. 使用正确的key：

   • 在LazyColumn的itemsIndexed中，你使用了item.body作为key。如果body内容经常变化或不是唯一的，这可能会导致性能问题。确保key是唯一的，并且不会频繁变化。

4. 避免在列表项中创建新的对象：

   • 在MessageCard中，每次渲染列表项时都创建新的RoundedCornerShape和Modifier对象。这可能会导致不必要的性能开销。尝试将这些对象定义为可复用的常量或成员变量。

5. 使用remember缓存数据：

   • 如果某些数据或计算可以在列表项之间共享，并且不会随着滚动而变化，可以使用remember来缓存这些数据或计算结果。

6. 减少onClick回调的嵌套：

   • 在MessageCard中，你使用了onClick回调来调用另一个onItemClick回调。虽然这不一定导致性能问题，但保持代码简洁和直接总是好的做法。

7. 使用Profiler工具分析性能：

   • 使用Android Studio的Profiler工具来分析应用的性能。这可以帮助你识别哪些部分的代码导致了性能瓶颈。

8. 更新Compose版本：

   • 确保你使用的是最新版本的Compose库。新版本可能包含性能改进和bug修复。

请注意，以上只是一些通用的建议。要准确地确定问题的根源，你可能需要更深入地分析你的代码和应用的性能。使用Profiler工具来监控CPU和GPU的使用情况，以及布局和绘制的性能，可以帮助你找到具体的瓶颈所在。