LazyColumn滚动异常卡顿的原因及优化方案咨询

问题背景 #

使用LazyColumn渲染100行×100列的网格时，滚动异常卡顿，Release构建优化效果甚微；禁用横向滚动后，垂直滚动虽有所改善，但新行进入视口时会出现滚动速度不均的"卡顿/碰撞"感。

核心原因 #

1. 原方案用Row渲染整行单元格，一次性创建100个ExcelCell，布局与重组开销极大；
2. 横向滚动与垂直滚动的布局计算叠加，双重消耗导致性能瓶颈；
3. 无固定尺寸约束，Compose需反复计算每个单元格的布局参数。

优化方案 #

1. 横向改用LazyRow实现单元格懒加载 #

将每行的Row替换为LazyRow，仅渲染横向视口内的单元格，大幅减少组件创建数量：

fun Grid(data: List<List<CellData>>) {     
    LazyColumn(modifier = Modifier.fillMaxSize()) {         
        itemsIndexed(data) { outerIndex: Int, row ->              
            LazyRow(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.spacedBy(0.dp)
            ) {
                itemsIndexed(row) { innerIndex: Int, cell ->
                    ExcelCell(cell, outerIndex, innerIndex)
                }
            }
            Spacer(modifier = Modifier.height(8.dp))          
        }     
    }
}

2. 给ExcelCell添加固定尺寸约束 #

避免动态布局计算，预设单元格宽高：

@Composable
fun ExcelCell(cell: CellData, outerIndex: Int, innerIndex: Int) {
    Box(
        modifier = Modifier
            .width(100.dp) // 根据业务需求调整固定宽度
            .height(48.dp) // 根据业务需求调整固定高度
            .border(1.dp, Color.Gray)
            .padding(8.dp),
        contentAlignment = Alignment.Center
    ) {
        Text(text = cell.value)
    }
}

3. 抑制不必要的重组 #

• 确保CellData为不可变数据类，让Compose精准判断重组时机：

data class CellData(val value: String)

• 在LazyRow的itemsIndexed中指定唯一key，避免无意义重组：

itemsIndexed(row, key = { _, cell -> cell.value }) { innerIndex: Int, cell ->
    ExcelCell(cell, outerIndex, innerIndex)
}

4. Release模式额外优化 #

开启Compose强跳过模式，增强重组优化：

android {
    buildTypes {
        release {
            composeCompiler {
                enableStrongSkippingMode = true
            }
        }
    }
}

效果验证 #

修改后，垂直/横向滚动均可达到流畅状态，即使数据量保持100×100，也不会出现卡顿或滚动速度不均的问题。

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