How to impl LazyVerticalGrid with set full span or dynamic num of GridCells.Fixed in jetpack compose？

Question

Just like Sliver in Flutter or StaggeredGridLayoutManager in android reyclerview

so I can insert a banner or some thing else into grid layout

Answer 1

Both item and items have argument span, using which you can specify how many of grid placed each item takes:

val colors = listOf(
    Color.Gray,
    Color.Red,
    Color.Cyan,
    Color.Blue,
    Color.LightGray,
    Color.Yellow,
)
val columnsCount = 3
LazyVerticalGrid(columns = GridCells.Fixed(columnsCount)) {
    items(6) {
        Box(
            modifier = Modifier
                .height(100.dp)
                .fillMaxWidth()
                .background(colors[it])
        )
    }
    items(3, span = { GridItemSpan(columnsCount) }) {
        Box(
            modifier = Modifier
                .height(100.dp)
                .fillMaxWidth()
                .background(colors[it])
        )
    }
}

Result: