Anyone know of a proper way to achieve a grid like...
# compose
s
Anyone know of a proper way to achieve a grid like the first image using
LazyVerticalGrid
? That one uses a
Column
in its second
item {}
to get the two items underneath each other on the right of the larger image. But I would like to avoid a
Column { image, image }
, as each
image
should be in its own
item {}
. But I can't seem to put the third
image
on the right spot, as per the second screenshot.
Code for first screenshot:
Copy code
LazyVerticalGrid(
    modifier = Modifier.fillMaxSize(),
    columns = GridCells.Fixed(3),
    verticalArrangement = spacing,
    horizontalArrangement = spacing,
    contentPadding = innerPadding,
) {
    item(span = { GridItemSpan(2) }) {
        val url = uniqueImageUrls.firstOrNull()

        ImageCell(url)
    }

    item {
        Column(verticalArrangement = spacing) {
            val second = uniqueImageUrls.getOrNull(1)
            ImageCell(second)

            val third = uniqueImageUrls.getOrNull(2)
            ImageCell(third)
        }
    }

    items(uniqueImageUrls.drop(3)) { imageUrl ->
        ImageCell(imageUrl)
    }
}
Code for second screenshot:
Copy code
LazyVerticalGrid(
    modifier = Modifier.fillMaxSize(),
    columns = GridCells.Fixed(3),
    verticalArrangement = spacing,
    horizontalArrangement = spacing,
    contentPadding = innerPadding,
) {
    itemsIndexed(
        items = uniqueImageUrls,
        span = { index, _ ->
            when (index) {
                0 -> GridItemSpan(2)
                else -> GridItemSpan(1)
            }
        },
    ) { _, imageUrl ->
        ImageCell(imageUrl)
    }
}
The issue with the latter, of course, is that there's only room for a single more item horizontally after a
GridItemSpan(2)
on index 0, which will be taken up by the second item. And then the grid puts the next items after that below the large first item. But I would like it to flow next to it instead.
I might need a custom layout for this, perhaps?
e
Have you tried the staggered grid?
s
I did, but it doesn't have span support. However, I just saw the amazing notes from @Colton Idle over at https://kotlinlang.slack.com/archives/CJLTWPH7S/p1674688976815819, which suggests that span support is coming in 1.4.0, so I'm going to try to use that. ­čÄë