compose lazycolumn 卡顿?

Question

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

data class Message(val author: String, val body: String)

@Preview
@Composable
fun 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()
    }
}


@Composable
fun 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
            )
        }
    }
}





@Composable
fun 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 composeBom
androidTestImplementation composeBom

//compose bom
api '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"