android - 如何在 Jetpack Compose 中创建表格？

Question

我想创建表格 View ，如下图所示，以显示我拥有的数据。


一个标题
另一个标题


第一的
排

第二
排


我尝试使用 LazyVerticalGrid实现它，但 Jetpack Compose 不允许我输入 LazyVerticalGrid在可垂直滚动的 Column 内.
已经两天了，我真的不知道。请帮忙。

Answer 1

据我所知，没有内置组件。但实际上使用 LazyColumn 很容易做到这一点并使用相同的weight对于同一列的所有行。
看这个例子:
首先，您可以为表格定义一个单元格:

@Composable
fun RowScope.TableCell(
    text: String,
    weight: Float
) {
    Text(
        text = text,
        Modifier
            .border(1.dp, Color.Black)
            .weight(weight)
            .padding(8.dp)
    )
}

然后你可以用它来构建你的表:

@Composable
fun TableScreen() {
    // Just a fake data... a Pair of Int and String
    val tableData = (1..100).mapIndexed { index, item ->
        index to "Item $index" 
    }
    // Each cell of a column must have the same weight. 
    val column1Weight = .3f // 30%
    val column2Weight = .7f // 70%
    // The LazyColumn will be our table. Notice the use of the weights below
    LazyColumn(Modifier.fillMaxSize().padding(16.dp)) {
        // Here is the header
        item {
            Row(Modifier.background(Color.Gray)) {
                TableCell(text = "Column 1", weight = column1Weight)
                TableCell(text = "Column 2", weight = column2Weight)
            }
        }
        // Here are all the lines of your table.
        items(tableData) {
            val (id, text) = it
            Row(Modifier.fillMaxWidth()) {
                TableCell(text = id.toString(), weight = column1Weight)
                TableCell(text = text, weight = column2Weight)
            }
        }
    }
}

结果如下: