How to create grid layout for images in jetpack compose? - android-jetpack-compose

Question

I have tried the below code it shows error at Column
val images = (0..8).toList()
LazyVerticalGrid(
cells = GridCells.Fixed(3)
) {
Column(horizontalAlignment = Alignment.CenterHorizontally) {
Image(...)
Image(...)
Image(...) //Like wise eight images
}
}

Answer 1

Like with any other compose lazy view, you need to add items, not just place composables inside.
Check out methods available in LazyGridScope: you can add items by count, enumerate collection or add single item. Check out more in the documentation.
val images = (0..8).toList()
LazyVerticalGrid(
cells = GridCells.Fixed(3)
) {
items(8) { i ->
Image(...)
}
items(images) { image ->
Image(...)
}
item {
// single item
Image(...)
}
}

Answer 2

You require to add items in LazyVerticalGrid as below.
val images = (0..8).toList()
LazyVerticalGrid(
cells = GridCells.Fixed(3)
) {
items(images.size) { // ---------> You need to add this
Column(horizontalAlignment = Alignment.CenterHorizontally) {
Image(...)
Image(...)
Image(...) //Like wise images
}
}
}

Answer 3

val images = (0..8).toList()
LazyVerticalGrid(
cells = GridCells.Fixed(3)
) {
items(images) { image ->
Column(horizontalAlignment = Alignment.CenterHorizontally) {
Text(image.toString())
}
}
}

Answer 4

LazyList and LazyColumn are written in DSL. You cannot use Composables directly inside them. I assume the error is the same old #Composable invocations can only happen.... bla bla bla. So just like lazy column, all the lazy composables offer the item scope, which is actually a Composable scope. Hence if you need to add an item here, you could just
val images = (0..8).toList()
LazyVerticalGrid(
cells = GridCells.Fixed(3)
) {
item{
Column(horizontalAlignment = Alignment.CenterHorizontally){
Image(...)
Image(...)
Image(...) //Like wise eight images
}
}
}
which would produce a single element in the list, that is, a column with three images. If you instead wanted these images to be the elements, you just need to remove the Column call and do something like
val images = (0..8).toList()
LazyVerticalGrid(
cells = GridCells.Fixed(3)
) {
items {
Image(...)
Image(...)
Image(...) //Like wise eight images
}
}
This will make them direct children of the Lazy Grid
There is also a better approach
LazyVerticalGrid(
cells = GridCells.Fixed(3)
) {
items((0..8).toList()) { element ->
Image(...) // Pass in the element here
}
}
In theory, you could also,
val images = (0..8).toList()
LazyVerticalGrid(
cells = GridCells.Fixed(3)
) {
repeat(8) {
Image(images[it]
}
}