如何使用Jetpack Compose创建GridView

Question

如何在Jetpack撰写中创建网格视图而不使用回收器视图或android.widget.gridview？

Answer 1

正如@Pavel Marchenko所提到的，LazyVerticalGrid是从版本1.0.0-alpha09

这里有一个简单的例子:

    LazyVerticalGrid(
        cells = GridCells.Adaptive(96.dp),
        contentPadding = PaddingValues(16.dp),
    ) {
        items(bookList) { book ->
            Image(book.cover, modifier = Modifier.padding(8.dp))
        }
    }

Answer 2

UPD:合成版本1.0.0-alpha09引入了标准组件:

懒散垂直网格

另一个基于LazyColumnFor的解决方案（Jetpack Compose版本1.0.0-alpha04）

@Composable
fun <T> LazyGridFor(
    items: List<T>,
    rowSize: Int = 1,
    itemContent: @Composable BoxScope.(T) -> Unit,
) {
    val rows = items.chunked(rowSize)
    LazyColumnFor(rows) { row ->
        Row(Modifier.fillParentMaxWidth()) {
            for ((index, item) in row.withIndex()) {
                Box(Modifier.fillMaxWidth(1f / (rowSize - index))) {
                    itemContent(item)
                }
            }
        }
    }
}
    
@Preview("LazyGridFor: example")
@Composable()
fun LazyGridForPreview() {
    val data = (1..100).map(Integer::toString)
    LazyGridFor(data, 3) { item ->
        Text(item)
    }
}

Answer 3

在< code>1.0.x中，< code>LazyVerticalGrid可组合组件为在网格中显示项目提供了实验性支持。

val numbers = (0..20).toList()

LazyVerticalGrid(
    cells = GridCells.Fixed(4)
) {
    items(numbers.size) {
        Column(horizontalAlignment = Alignment.CenterHorizontally) {
            Text(text = "Number")
            Text(text = "  $it",)
        }
    }
}

cell=GridCells.Fixed（4）表示有4列1/4的父宽。

val numbers = (0..20).toList()

LazyVerticalGrid(
    cells = GridCells.Adaptive(minSize = 64.dp)
) {
    items(numbers) {
        Column(horizontalAlignment = Alignment.CenterHorizontally) {
            Text(text = "Number")
            Text(text = "  $it",)
        }
    }
}

单元格=网格单元格。自适应（minSize=64.dp）意味着将有尽可能多的列，每列至少为64.dps，所有列的宽度将相等。