如何在Jetpack Compose LazyColumn中实现带卡片的分组懒加载列表？

你的核心问题是：当前把整个分组（Header+Card+所有内部条目）作为外层LazyColumn的单个item，导致分组内的100+条数据会被一次性全部加载，无法实现懒加载；嵌套LazyColumn则因为外层item仍会加载整个内部列表容器，同样达不到懒加载效果。

正确解决方案：拆分所有条目到外层LazyColumn #

将分组的Header、每个内部条目都作为外层LazyColumn的独立项，通过调整Card的样式让多个小Card拼接成一个完整的视觉分组，这样所有内容都会跟随外层LazyColumn实现懒加载。

优化后的代码示例：

LazyColumn(
    contentPadding = PaddingValues(vertical = 8.dp),
    verticalArrangement = Arrangement.spacedBy(8.dp),
) {
    rows.forEach { group ->
        // 分组标题头
        item(key = "header-${group.getUniqueId()}") {
            Header(
                title = group.title,
                modifier = Modifier
                    .padding(horizontal = 16.dp, vertical = 8.dp)
            )
        }

        val innerRows = group.innerRows
        // 分组内的每个条目作为独立item
        items(innerRows, key = { it.getUniqueId() }) { row, index ->
            val isFirst = index == 0
            val isLast = index == innerRows.lastIndex

            Card(
                shape = when {
                    isFirst && isLast -> RoundedCornerShape(12.dp)
                    isFirst -> RoundedCornerShape(topStart = 12.dp, topEnd = 12.dp)
                    isLast -> RoundedCornerShape(bottomStart = 12.dp, bottomEnd = 12.dp)
                    else -> RoundedCornerShape(0.dp)
                },
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(horizontal = 16.dp),
                elevation = if (isFirst) 4.dp else 0.dp
            ) {
                Column(modifier = Modifier.padding(vertical = 8.dp)) {
                    Text(row.text) // 替换成你的自定义itemRow布局
                }
            }
        }
    }
}

关键要点说明 #

• 全量懒加载：每个内部条目都是外层LazyColumn的独立项，只有进入视口才会被组合渲染，彻底解决100+条数据一次性加载的问题。
• 视觉完整性：通过isFirst和isLast判断调整Card的圆角与阴影，让多个小Card拼接后看起来和一个完整Card一致。
• 复用稳定性：给每个Header和内部条目设置唯一key，避免Compose的item复用错误。

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