如何在Jetpack Compose中创建表格？ [英] How can I create a table in Jetpack Compose?

问题描述

我要创建表视图，如下图所示，以显示我拥有的数据。

A页眉	另一个页眉
第一个	行
第二个	行

我尝试使用LazyVerticalGrid来实现它，但Jetpack Compose不允许我将LazyVerticalGrid放在可垂直滚动的Column中。

已经两天了，我真的想不起来了。请帮帮忙。

推荐答案

据我所知，其中没有内置组件。但是，使用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)
            }
        }
    }
}

结果如下：

这篇关于如何在Jetpack Compose中创建表格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！