如何在Jetpack Compose中创建自定义表格视图？

核心思路是避免同方向滚动组件嵌套，把外部Column的所有内容都移到LazyVerticalGrid内部，通过span控制非表格内容占满整行，保留Lazy组件的复用能力，性能最优，适合数据量大的场景。

LazyVerticalGrid(
    columns = GridCells.Fixed(2), // 对应你的表格列数，示例为2列
    modifier = Modifier.fillMaxSize()
) {
    // 原外部Column中的顶部内容，通过span占满整行
    item(span = { GridItemSpan(maxLineSpan) }) {
        Text(text = "页面标题", style = MaterialTheme.typography.headlineSmall, modifier = Modifier.padding(16.dp))
    }

    // 表格表头
    item { Text(text = "A header", modifier = Modifier.padding(8.dp), fontWeight = FontWeight.Bold) }
    item { Text(text = "Another header", modifier = Modifier.padding(8.dp), fontWeight = FontWeight.Bold) }

    // 表格数据行，可替换为实际数据集遍历
    item { Text(text = "First", modifier = Modifier.padding(8.dp)) }
    item { Text(text = "row", modifier = Modifier.padding(8.dp)) }
    item { Text(text = "Second", modifier = Modifier.padding(8.dp)) }
    item { Text(text = "row", modifier = Modifier.padding(8.dp)) }

    // 原外部Column中的底部内容，通过span占满整行
    item(span = { GridItemSpan(maxLineSpan) }) {
        Button(onClick = { /* 业务逻辑 */ }, modifier = Modifier.padding(16.dp)) {
            Text("操作按钮")
        }
    }
}

如果表格数据量较小（少于20行），不需要Lazy复用能力，可以禁用LazyVerticalGrid的滚动并让它自适应内容高度，直接嵌套在外部可滚动Column中：

Column(
    modifier = Modifier
        .fillMaxSize()
        .verticalScroll(rememberScrollState())
) {
    // 外部Column的其他顶部内容
    Text(text = "页面标题", style = MaterialTheme.typography.headlineSmall, modifier = Modifier.padding(16.dp))

    LazyVerticalGrid(
        columns = GridCells.Fixed(2),
        modifier = Modifier
            .fillMaxWidth()
            .height(IntrinsicSize.Max), // 高度自适应所有单元格内容
        userScrollEnabled = false // 禁用自身滚动，完全跟随外部容器滚动
    ) {
        // 表头
        item { Text(text = "A header", modifier = Modifier.padding(8.dp), fontWeight = FontWeight.Bold) }
        item { Text(text = "Another header", modifier = Modifier.padding(8.dp), fontWeight = FontWeight.Bold) }
        // 数据行
        item { Text(text = "First", modifier = Modifier.padding(8.dp)) }
        item { Text(text = "row", modifier = Modifier.padding(8.dp)) }
        item { Text(text = "Second", modifier = Modifier.padding(8.dp)) }
        item { Text(text = "row", modifier = Modifier.padding(8.dp)) }
    }

    // 外部Column的其他底部内容
    Text(text = "备注信息", modifier = Modifier.padding(16.dp))
}

注意该方案数据量过大时会有性能损耗，因为所有单元格会一次性完成组合，没有复用机制。

如果表格行数固定且极少，不需要任何懒加载能力，直接用Column嵌套Row实现即可，无滚动冲突问题：

Column(modifier = Modifier.fillMaxWidth()) {
    // 表头行
    Row(modifier = Modifier.fillMaxWidth()) {
        Text(text = "A header", modifier = Modifier.weight(1f).padding(8.dp), fontWeight = FontWeight.Bold)
        Text(text = "Another header", modifier = Modifier.weight(1f).padding(8.dp), fontWeight = FontWeight.Bold)
    }
    // 数据行1
    Row(modifier = Modifier.fillMaxWidth()) {
        Text(text = "First", modifier = Modifier.weight(1f).padding(8.dp))
        Text(text = "row", modifier = Modifier.weight(1f).padding(8.dp))
    }
    // 数据行2
    Row(modifier = Modifier.fillMaxWidth()) {
        Text(text = "Second", modifier = Modifier.weight(1f).padding(8.dp))
        Text(text = "row", modifier = Modifier.weight(1f).padding(8.dp))
    }
}

将上述静态表格组件直接放入可滚动的外部Column即可正常使用。

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