Android Jetpack Compose实现可横竖滚动表格时崩溃问题求解决

崩溃原因分析 #

• 你在每个LazyRow上同时添加了horizontalScroll(scrollState)，属于嵌套滚动容器（LazyRow本身已支持水平滚动，额外添加horizontalScroll会触发测量冲突）。
• Modifier.wrapContentWidth(unbounded = true)强制容器使用无限最大宽度约束，这是错误提示中明确指出的违规操作。
• 试图用单个ScrollState控制多个独立滚动容器，不符合Compose的滚动状态管理逻辑。

修复后代码实现 #

父布局调整（添加尺寸约束） #

先给TableView分配合理的剩余空间，避免尺寸不确定导致的测量问题：

Column(
    modifier = Modifier
        .fillMaxWidth()
        .heightIn(250.dp, max = 350.dp)
        .shadow(5.dp)
        .clip(RoundedCornerShape(5.dp))
        .background(Color.White)
        .padding(top = 8.dp, bottom = 8.dp),
    horizontalAlignment = Alignment.Start,
    verticalArrangement = Arrangement.Top
) {
    Text("text")
    ProgressBar()
    // 用weight(1f)让TableView占据Column剩余空间
    TableView(modifier = Modifier.weight(1f), viewState)
}

修复后的TableView（同步横竖滚动） #

通过外层统一水平滚动容器包裹垂直懒加载列表，实现所有行同步水平滚动，同时垂直方向懒加载：

@Composable
private fun TableView(modifier: Modifier, viewState: DashletsViewState) {
    val tableData = viewState.tableData
    val horizontalScrollState = rememberScrollState()
    val verticalScrollState = rememberLazyListState()

    if (!tableData.isNull()) {
        val rows = tableData.rows.size + 1
        val cols = tableData.columns.flatMap { it.child.orEmpty() }.size + 1

        Box(modifier = modifier.fillMaxSize()) {
            // 外层水平滚动，控制所有行的同步水平滚动
            HorizontalScroll(
                state = horizontalScrollState,
                modifier = Modifier.fillMaxSize()
            ) {
                // 垂直懒加载列表，处理大量行的性能问题
                LazyColumn(
                    state = verticalScrollState,
                    modifier = Modifier.wrapContentWidth() // 宽度由内容决定，避免无限约束
                ) {
                    items(rows) { rowIndex ->
                        Row(
                            modifier = Modifier
                                .height(40.dp)
                                .padding(8.dp)
                                .background(if (rowIndex == 0) gray14 else Color.White)
                        ) {
                            // 渲染每一列的单元格
                            repeat(cols) { colIndex ->
                                Box(
                                    modifier = Modifier
                                        .size(40.dp)
                                        .padding(4.dp),
                                    contentAlignment = Alignment.Center
                                ) {
                                    Text(
                                        text = "($rowIndex, $colIndex)",
                                        color = Color.Black
                                    )
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

其他横竖滚动表格实现方案 #

方案1：大量列场景优化（独立行滚动） #

如果列数量极多且不需要同步滚动，可以保留LazyRow但移除外层HorizontalScroll，每个行独立处理水平滚动：

@Composable
private fun TableView(modifier: Modifier, viewState: DashletsViewState) {
    val tableData = viewState.tableData
    val verticalScrollState = rememberLazyListState()

    if (!tableData.isNull()) {
        val rows = tableData.rows.size + 1
        val cols = tableData.columns.flatMap { it.child.orEmpty() }.size + 1

        LazyColumn(
            state = verticalScrollState,
            modifier = modifier.fillMaxSize()
        ) {
            items(rows) { rowIndex ->
                LazyRow(
                    modifier = Modifier
                        .height(40.dp)
                        .padding(8.dp)
                        .background(if (rowIndex == 0) gray14 else Color.White)
                ) {
                    items(cols) { colIndex ->
                        // 单元格内容...
                    }
                }
            }
        }
    }
}

方案2：固定表头/列（自定义Layout） #

如果需要固定表头（垂直滚动时表头不动）或固定第一列（水平滚动时第一列不动），需要自定义Layout来精确控制每个元素的位置和滚动偏移，核心思路是：

• 分离表头、表体、固定列三个部分
• 监听滚动状态，同步各部分的偏移量
• 自定义测量和布局逻辑，实现固定效果

注意事项 #

• 避免嵌套滚动容器（如LazyRow + horizontalScroll），这会导致测量约束冲突。
• 始终给滚动容器明确的尺寸约束（如通过fillMaxSize()、weight()或固定尺寸），避免无限约束。
• 大量数据场景优先使用LazyColumn/LazyRow实现懒加载，避免性能问题。

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