Anyone know of a proper way to achieve a grid like the first kotlinlang #compose

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:

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?

efemoney

01/25/2023, 10:20 PM

Have you tried the staggered grid?

sindrenm

01/26/2023, 11:18 AM

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

11 Views

#compose Join Slack