Search code examples
androidandroid-jetpack-composeandroid-jetpack-compose-list

Jetpack Compose - How to get LazyVerticaGrid item row index?


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,
                            ...