Issue
I'm using a LazyVerticalGrid to display items, with Adaptive GridCells, i.e. there's a variable number of columns depending on the screen width.
LazyVerticalGrid(
columns = GridCells.Adaptive(minSize = 160.dp),
I'd like the items in the top row to display slightly differently. I can do this by passing a boolean parameter to these item Composables, e.g.
itemsIndexed(
items = newsList,
) { index, item ->
NewsCard(
newsItem = item,
isHero = index == 0,
In this example the very first item in the grid will have the desired layout, but if there is more than one column in the grid the other items on the top row will be different. My problem is I don't know how to detect if the item is on the first row. Is there a way of dynamically reading how many columns are in an Adaptive LazyGrid? Or some other way of retrieving the current Row index (as opposed to just item index)?
Solution
So I found that maxLineSpan
gives me what I need. This is available in LazyGridItemSpanScope. Here's the solution I was looking for (suggested improvements welcome):
Surface {
val isHero = remember { mutableStateMapOf<Int, Boolean>() }
LazyVerticalGrid(
columns = GridCells.Adaptive(minSize = 150.dp),
...
) {
itemsIndexed(
items = newsList,
span = { index, _ ->
isHero[index] = index < maxLineSpan -1
}
) { index, item ->
NewsCard(
newsItem = item,
isHero = isHero[index] == true,
...
Answered By - aaronmarino
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.