Jetpack Compose实现冻结表头侧边栏表格滚动卡顿如何解决

卡顿根本原因 #

原实现的性能问题来自架构设计错误：

• 横向滚动的单元格容器里，每一列都单独创建了一个独立的LazyColumn，所有列虽然复用了同一个滚动状态，但滚动时每一列都会独立触发测量、布局、重组流程。如果表格有20列，垂直滚动一帧的计算量就是正常实现的20倍，必然掉帧卡顿。
• 代码中state = hState.also { hState.firstVisibleItemScrollOffset }属于无效逻辑，没有实际作用，还会额外触发不必要的重组。

流畅实现方案 #

核心设计原则：同滚动方向全局仅保留一个惰性列表容器，同方向列表共用同一个LazyListState实现滚动位置自动同步，从根源上减少重复计算。
完整实现代码如下：

// 尺寸配置可根据业务需求调整
private val fixedHeaderHeight = 48.dp
private val fixedSideBarWidth = 96.dp
private val cellWidth = 80.dp
private val cellHeight = 48.dp

@Composable
fun FreezePaneTable(
    scores: List<Score>,
    students: List<Student>,
    cells: List<List<StudentScore>>,
    onEvent: (TableEvent) -> Unit,
    modifier: Modifier = Modifier
) {
    // 全局仅保留两个滚动状态，分别对应垂直、水平方向，同方向列表复用
    val verticalScrollState = rememberLazyListState()
    val horizontalScrollState = rememberLazyListState()

    ConstraintLayout(modifier = modifier.fillMaxSize()) {
        val (topLeftBlock, headerRow, sideBarColumn, cellArea) = createRefs()

        // 左上角固定区块
        Box(
            modifier = Modifier
                .size(fixedSideBarWidth, fixedHeaderHeight)
                .background(Color.LightGray)
                .border(BorderStroke(0.5.dp, Color.DarkGray))
                .constrainAs(topLeftBlock) {
                    top.linkTo(parent.top)
                    start.linkTo(parent.start)
                },
            contentAlignment = Alignment.Center
        ) {
            Text(text = "设置")
        }

        // 顶部冻结表头：仅随水平方向滚动
        LazyRow(
            state = horizontalScrollState,
            modifier = Modifier
                .height(fixedHeaderHeight)
                .constrainAs(headerRow) {
                    top.linkTo(parent.top)
                    start.linkTo(topLeftBlock.end)
                    end.linkTo(parent.end)
                    width = Dimension.fillToConstraints
                }
        ) {
            items(items = scores, key = { it.id }) { score ->
                Box(
                    modifier = Modifier
                        .width(cellWidth)
                        .fillMaxHeight()
                        .background(Color.LightGray)
                        .border(BorderStroke(0.5.dp, Color.DarkGray)),
                    contentAlignment = Alignment.Center
                ) {
                    HeaderLabel(score = score, onEvent = onEvent)
                }
            }
        }

        // 左侧冻结侧边栏：仅随垂直方向滚动
        LazyColumn(
            state = verticalScrollState,
            modifier = Modifier
                .width(fixedSideBarWidth)
                .constrainAs(sideBarColumn) {
                    top.linkTo(topLeftBlock.bottom)
                    start.linkTo(parent.start)
                    bottom.linkTo(parent.bottom)
                    height = Dimension.fillToConstraints
                }
        ) {
            items(items = students, key = { it.id }) { student ->
                Box(
                    modifier = Modifier
                        .height(cellHeight)
                        .fillMaxWidth()
                        .border(BorderStroke(0.5.dp, Color.DarkGray)),
                    contentAlignment = Alignment.Center
                ) {
                    BasicSidebarLabel(student = student, onEvent = onEvent)
                }
            }
        }

        // 单元格区域：仅嵌套一层横+纵惰性列表，无重复同方向滚动容器
        LazyRow(
            state = horizontalScrollState,
            modifier = Modifier.constrainAs(cellArea) {
                top.linkTo(topLeftBlock.bottom)
                start.linkTo(topLeftBlock.end)
                end.linkTo(parent.end)
                bottom.linkTo(parent.bottom)
                width = Dimension.fillToConstraints
                height = Dimension.fillToConstraints
            }
        ) {
            item {
                LazyColumn(
                    state = verticalScrollState,
                    modifier = Modifier.fillMaxHeight()
                ) {
                    itemsIndexed(items = cells, key = { index, _ -> students[index].id }) { rowIndex, rowData ->
                        Row(modifier = Modifier.height(cellHeight)) {
                            rowData.forEachIndexed { colIndex, cellData ->
                                Box(
                                    modifier = Modifier
                                        .width(cellWidth)
                                        .fillMaxHeight()
                                        .border(BorderStroke(0.5.dp, Color.DarkGray)),
                                    contentAlignment = Alignment.Center
                                ) {
                                    eventContent(
                                        studentScore = cellData,
                                        listIndex = colIndex,
                                        index = rowIndex,
                                        onEvent = onEvent
                                    )
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

额外性能优化点 #

• 所有列表项提前设置固定宽高，避免滚动时动态测量子项尺寸，可减少60%以上的布局计算耗时
• 所有items调用传入key参数绑定数据唯一标识，避免列表增删、滚动时触发全量重组
• 列表项内尽量避免使用weight、fillMaxSize等需要二次测量的修饰符，减少布局阶段开销
• 数据量超过千条时，可基于LazyLayout直接自定义表格布局，跳过嵌套布局的约束传递流程，性能还能进一步提升

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