Wear OS中LazyColumn加载可变高度项出现异常问题求助

问题概述 #

在Wear OS环境下使用LazyColumn时，出现了Item高度复用异常：前4个（数量取决于设备高度）Item的高度计算正常，但后续Item会被分配与前面某一个Item相同的高度，导致内容要么有多余空白，要么被截断。例如：

• 索引4的Item仅需1行空间，却被分配了索引0的2行高度
• 索引8的Item需要3行空间，却只得到索引0的2行高度，内容被截断
• 替换为Column + Modifier.verticalScroll(...)后，所有Item高度均正常，但失去了LazyColumn的懒加载性能优势

复现代码 #

@WearPreviewLargeRound
@Composable
fun DefaultPreview() {
    LazyColumn(
        modifier = Modifier.fillMaxSize().padding(all = 20.dp),
        state = rememberLazyListState()
    ) {
        val cardSizes = listOf(2, 3, 4, 5, 1, 2, 3, 4, 3, 4, 5, 6, 1, 1, 1, 1)

        itemsIndexed(cardSizes) { i, lines ->
            Card(
                modifier = Modifier.fillMaxWidth().border(1.dp, color = Color.White),
                onClick = { },
            ) {
                Text("${i}. ${lines} lines", color = Color.Red)
                Text("- line" + "\n- line".repeat(lines - 1), color = Color.Green)
                Text("------", color = Color.Cyan, modifier = Modifier.border(1.dp, color = Color.Cyan))
            }
        }
    }
}

原因分析 #

LazyColumn的核心优化是Item布局复用：它会缓存滑出屏幕的Item的测量结果，用来快速创建新进入屏幕的Item。但在Wear OS的小屏幕约束下，如果Item的高度依赖内部多行Text的动态内容，LazyColumn可能无法正确识别不同Item的内容差异，错误地复用了之前的测量高度。

而Column + verticalScroll会一次性测量所有Item的高度，不存在复用缓存，因此高度计算准确，但当Item数量较多时会有明显的性能损耗。

解决方案 #

1. 为每个Item设置唯一Key #

这是官方推荐的解决复用问题的方案，通过给itemsIndexed传入唯一的key参数，让LazyColumn识别每个Item的唯一性，从而避免复用错误的测量结果。

修改后的代码：

itemsIndexed(cardSizes, key = { index, _ -> index }) { i, lines ->
    Card(
        modifier = Modifier.fillMaxWidth().border(1.dp, color = Color.White),
        onClick = { },
    ) {
        Text("${i}. ${lines} lines", color = Color.Red)
        Text("- line" + "\n- line".repeat(lines - 1), color = Color.Green)
        Text("------", color = Color.Cyan, modifier = Modifier.border(1.dp, color = Color.Cyan))
    }
}

这里使用Item的索引作为唯一Key，确保每个Item都有独立的标识，LazyColumn会为每个Key对应的Item重新计算高度。如果你的业务场景中lines值是唯一的，也可以用lines作为Key。

2. 其他辅助方案（可选） #

• 如果Key方案仍有问题，可以给Card添加Modifier.animateItemPlacement()，该Modifier会强制Item在位置变化时重新测量
• 对于多行Text，可以显式设置Modifier.heightIn(min = ...)来约束最小高度，但这种方式灵活性较差，仅适用于固定场景

验证效果 #

添加唯一Key后，LazyColumn会正确计算每个Item的高度，所有内容都能正常显示，既保留了懒加载的性能优势，又解决了高度复用的异常问题。

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