Material 3 中 ListItem 的等效网格项是什么

Question

在 Jetpack Compose 的 Material 3 中，有一个组件可以轻松实现列表项。然而，在较大的屏幕上，这并不理想，因为列表项似乎被拉伸。是否有网格项形式的等效组件？

    ListItem(
        headlineContent = { Text("Three line list item") },
        overlineContent = { Text("OVERLINE") },
        supportingContent = { Text("Secondary text") },
        leadingContent = {
            Icon(
                Icons.Filled.Favorite,
                contentDescription = "Localized description",
            )
        },
        trailingContent = { Text("meta") }
    )

Answer 1

ListItem

被定义为填充整个可用宽度。因此，它仍然可以完美地用作

GridItem

内的

LazyVerticalGrid

:

@Composable
fun GridItemDemo() {
    LazyVerticalGrid(
        columns = GridCells.Fixed(2),
        modifier = Modifier.fillMaxSize()
    ) {
        items(10) {
            ListItem(
                headlineContent = { Text("Three line list item") },
                overlineContent = { Text("OVERLINE") },
                supportingContent = { Text("Secondary text") },
                leadingContent = {
                    Icon(
                        Icons.Filled.Favorite,
                        contentDescription = "Localized description",
                    )
                },
                trailingContent = { Text("meta") }
            )
        }
    }
}

输出：

如果您想在小屏幕上显示

LazyColumn

，在大屏幕上显示

LazyVerticalGrid

，则

ListItem

与此无关。相反，您可以使用

LazyVerticalGrid

和

Adaptive

单元配置：

@Composable
fun GridItemDemo() {
    LazyVerticalGrid(
        columns = GridCells.Adaptive(350.dp),
        modifier = Modifier.fillMaxSize()
    ) {
        items(10) {
            ListItem(
                //...
            )
        }
    }
}

肖像：

风景：