In Material 3 for Jetpack Compose, there's a component to allow easy implementation of list items. However, on larger screens this is not ideal as list items appear to be stretched. Is there an equivalent component to this in the form of a grid item?
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") }
)
The ListItem
is defined to fill up the whole available width. As such, it still is perfectly usable as a GridItem
inside of a 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") }
)
}
}
}
Output:
If you want to have a LazyColumn
on small screens and a LazyVerticalGrid
on big screens, the ListItem
does not have anything to do with it. Instead, you could use a LazyVerticalGrid
with a Adaptive
cell configuration:
@Composable
fun GridItemDemo() {
LazyVerticalGrid(
columns = GridCells.Adaptive(350.dp),
modifier = Modifier.fillMaxSize()
) {
items(10) {
ListItem(
//...
)
}
}
}
Portrait:
Landscape: