如何填充嵌套在 lazycolumn 中的行。 JetpacCompose

Question

我制作了我自己的非常简单的日历。问题：我正在尝试显示列表中的值。一行有七个值。每一个新行都延续了列表。以下是无效代码的示例。但是他展示了本质和问题）

          //.....
          LazyColumn (
            modifier = Modifier,
            content = {
                items(7) { row ->
                    Row {
                        for(n in 0..6){Text("${weeks1[n]}")}
                    }
                }
            }
        )

输出：here

所以我需要显示如下列表项：

1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21 等

Answer 1

我不知道这是不是你想要的，但你可以试试这个:

val dates = MutableList(31) { it }

LazyVerticalGrid(
    modifier = Modifier
        .fillMaxWidth()
        .systemBarsPadding(),
    columns = GridCells.Fixed(7),
    contentPadding = PaddingValues(horizontal = 16.dp, vertical = 16.dp),
    verticalArrangement = Arrangement.spacedBy(8.dp),
    horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
    items(dates) {
        Box(contentAlignment = Alignment.Center) {
            Text(text = "${it + 1}")
        }
    }
}

结果是：

更新替代解决方案

LazyColumn 和 Row 结果相同的解决方案（更难实现，不太优雅）

val dates = MutableList(35) { if (it + 1 > 31) -1 else it + 1 }
val chunks = dates.chunked(7)

LazyColumn(
    Modifier
        .fillMaxSize()
        .systemBarsPadding()
) {
    items(chunks) {
        Row(
            Modifier
                .fillMaxWidth()
                .padding(vertical = 8.dp),
            horizontalArrangement = Arrangement.SpaceEvenly
        ) {
            it.forEach { date ->
                Box(Modifier.size(24.dp), contentAlignment = Alignment.Center) {
                    if (date != -1) Text(text = "$date")
                }
            }
        }
    }
}

Answer 2

您可以使用 staggered grid layout 实现相同的效果。 Google 的 Compose 示例之一 Owl shows how to do a staggered grid layout. Also you can go through this .

如何填充嵌套在 lazycolumn 中的行。 JetpacCompose

How to fill row nested in lazycolumn. JetpacCompose

android

kotlin

android-jetpack

android-jetpack-compose