# LazyVerticalGrid

Common/All

## Functions summary

|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/grid/LazyVerticalGrid.composable#LazyVerticalGrid(androidx.compose.foundation.lazy.grid.GridCells,androidx.compose.ui.Modifier,androidx.compose.foundation.lazy.grid.LazyGridState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.lazy.layout.LazyLayoutCacheWindow,kotlin.Function1)( columns: https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/grid/GridCells, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/grid/LazyGridState, contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues, reverseLayout: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, verticalArrangement: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement.Vertical, horizontalArrangement: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement.Horizontal, flingBehavior: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/FlingBehavior, userScrollEnabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, overscrollEffect: https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect?, cacheWindow: https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/layout/LazyLayoutCacheWindow, content: https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/grid/LazyGridScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` A lazy vertical grid layout. | Cmn |

## Functions

### LazyVerticalGrid

Cmn Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/lazy/grid/LazyGridDsl.kt+function:LazyVerticalGrid)

```
@Composable
fun LazyVerticalGrid(
    columns: GridCells,
    modifier: Modifier = Modifier,
    state: LazyGridState = rememberLazyGridState(),
    contentPadding: PaddingValues = PaddingValues(0.dp),
    reverseLayout: Boolean = false,
    verticalArrangement: Arrangement.Vertical = if (!reverseLayout) Arrangement.Top else Arrangement.Bottom,
    horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
    flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior(),
    userScrollEnabled: Boolean = true,
    overscrollEffect: OverscrollEffect? = rememberOverscrollEffect(),
    cacheWindow: LazyLayoutCacheWindow = LazyGridDefaults.cacheWindow(state),
    content: LazyGridScope.() -> Unit
): Unit
```

A lazy vertical grid layout. It composes only visible rows of the grid.

Sample:

```kotlin
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.lazy.grid.items
import androidx.compose.foundation.lazy.grid.itemsIndexed
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

val itemsList = (0..5).toList()
val itemsIndexedList = listOf("A", "B", "C")

val itemModifier = Modifier.border(1.dp, Color.Blue).height(80.dp).wrapContentSize()

LazyVerticalGrid(columns = GridCells.Fixed(3)) {
    items(itemsList) { Text("Item is $it", itemModifier) }
    item { Text("Single item", itemModifier) }
    itemsIndexed(itemsIndexedList) { index, item ->
        Text("Item at index $index is $item", itemModifier)
    }
}
```

Sample with custom item spans:

```kotlin
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.GridItemSpan
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.lazy.grid.items
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

val sections = (0 until 25).toList().chunked(5)
LazyVerticalGrid(
    columns = GridCells.Fixed(3),
    horizontalArrangement = Arrangement.spacedBy(16.dp),
    verticalArrangement = Arrangement.spacedBy(16.dp),
) {
    sections.forEachIndexed { index, items ->
        item(span = { GridItemSpan(maxLineSpan) }) {
            Text(
                "This is section $index",
                Modifier.border(1.dp, Color.Gray).height(80.dp).wrapContentSize(),
            )
        }
        items(
            items,
            // not required as it is the default
            span = { GridItemSpan(1) },
        ) {
            Text("Item $it", Modifier.border(1.dp, Color.Blue).height(80.dp).wrapContentSize())
        }
    }
}
```

Sample with custom cache window:

```kotlin
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.lazy.grid.items
import androidx.compose.foundation.lazy.layout.LazyLayoutCacheWindow
import androidx.compose.material3.Text

val itemsList = (0..100).toList()

LazyVerticalGrid(
    columns = GridCells.Fixed(3),
    cacheWindow = LazyLayoutCacheWindow(aheadFraction = 0.5f, behindFraction = 0.2f),
) {
    items(itemsList) { item -> Text("Item $item") }
}
```

| Parameters |
|---|---|
| `columns: https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/grid/GridCells` | describes the count and the size of the grid's columns, see `https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/grid/GridCells` doc for more information |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | the modifier to apply to this layout |
| `state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/grid/LazyGridState = rememberLazyGridState()` | the state object to be used to control or observe the list's state |
| `contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues = PaddingValues(0.dp)` | specify a padding around the whole content |
| `reverseLayout: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = false` | reverse the direction of scrolling and layout. When `true`, items will be laid out in the reverse order and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/grid/LazyGridState#firstVisibleItemIndex()` == 0 means that grid is scrolled to the bottom. Note that `https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/grid/package-summary#LazyVerticalGrid(androidx.compose.foundation.lazy.grid.GridCells,androidx.compose.ui.Modifier,androidx.compose.foundation.lazy.grid.LazyGridState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.lazy.layout.LazyLayoutCacheWindow,kotlin.Function1)` does not change the behavior of `https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/grid/package-summary#LazyVerticalGrid(androidx.compose.foundation.lazy.grid.GridCells,androidx.compose.ui.Modifier,androidx.compose.foundation.lazy.grid.LazyGridState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.lazy.layout.LazyLayoutCacheWindow,kotlin.Function1)`, e.g. with `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement#Top()` (top) 123### (bottom) becomes (top) 321### (bottom). |
| `verticalArrangement: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement.Vertical = if (!reverseLayout) Arrangement.Top else Arrangement.Bottom` | The vertical arrangement of the layout's children |
| `horizontalArrangement: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement.Horizontal = Arrangement.Start` | The horizontal arrangement of the layout's children |
| `flingBehavior: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/FlingBehavior = ScrollableDefaults.flingBehavior()` | logic describing fling behavior |
| `userScrollEnabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | whether the scrolling via the user gestures or accessibility actions is allowed. You can still scroll programmatically using the state even when it is disabled. |
| `overscrollEffect: https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect? = rememberOverscrollEffect()` | the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect` that will be used to render overscroll for this layout. Note that the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect#node()` will be applied internally as well - you do not need to use Modifier.overscroll separately. |
| `cacheWindow: https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/layout/LazyLayoutCacheWindow = LazyGridDefaults.cacheWindow(state)` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/layout/LazyLayoutCacheWindow` configuring the area ahead and behind the viewport to prefetch and retain items. The default cache window does not cache items while the user is not scrolling. Override this to tune scrolling performance, such as increasing the ahead window to reduce frame drops during scrolling or adding a behind window to retain recently visible items when scrolling back and forth. |
| `content: https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/grid/LazyGridScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/grid/LazyGridScope` which describes the content |