# VerticalPager

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/pager/VerticalPager.composable#VerticalPager(androidx.compose.foundation.pager.PagerState,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.pager.PageSize,kotlin.Int,androidx.compose.ui.unit.Dp,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,kotlin.Boolean,kotlin.Function1,androidx.compose.ui.input.nestedscroll.NestedScrollConnection,androidx.compose.foundation.gestures.snapping.SnapPosition,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.gestures.BringIntoViewSpec,kotlin.Function2)( state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/PagerState, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues, pageSize: https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/PageSize, beyondViewportPageCount: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html, pageSpacing: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, horizontalAlignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Horizontal, flingBehavior: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/TargetedFlingBehavior, userScrollEnabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, reverseLayout: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, key: ((index: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html)?, pageNestedScrollConnection: https://developer.android.com/reference/kotlin/androidx/compose/ui/input/nestedscroll/NestedScrollConnection, snapPosition: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/snapping/SnapPosition, overscrollEffect: https://developer.android.com/reference/kotlin/androidx/compose/foundation/OverscrollEffect?, bringIntoViewSpec: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/BringIntoViewSpec, pageContent: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/PagerScope.(page: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` A Pager that scrolls vertically. | Cmn |

## Functions

### VerticalPager

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/pager/Pager.kt+function:VerticalPager)

```
@Composable
fun VerticalPager(
    state: PagerState,
    modifier: Modifier = Modifier,
    contentPadding: PaddingValues = PaddingValues(0.dp),
    pageSize: PageSize = PageSize.Fill,
    beyondViewportPageCount: Int = PagerDefaults.BeyondViewportPageCount,
    pageSpacing: Dp = 0.dp,
    horizontalAlignment: Alignment.Horizontal = Alignment.CenterHorizontally,
    flingBehavior: TargetedFlingBehavior = PagerDefaults.flingBehavior(state = state),
    userScrollEnabled: Boolean = true,
    reverseLayout: Boolean = false,
    key: ((index: Int) -> Any)? = null,
    pageNestedScrollConnection: NestedScrollConnection = PagerDefaults.pageNestedScrollConnection(state, Orientation.Vertical),
    snapPosition: SnapPosition = SnapPosition.Start,
    overscrollEffect: OverscrollEffect? = rememberOverscrollEffect(),
    bringIntoViewSpec: BringIntoViewSpec = PagerDefaults.bringIntoViewSpec(state),
    pageContent: @Composable PagerScope.(page: Int) -> Unit
): Unit
```

A Pager that scrolls vertically. Pages are lazily placed in accordance to the available viewport size. By definition, pages in a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/package-summary#Pager(androidx.compose.ui.Modifier,androidx.compose.foundation.pager.PagerState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.gestures.Orientation,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,kotlin.Int,androidx.compose.ui.unit.Dp,androidx.compose.foundation.pager.PageSize,androidx.compose.ui.input.nestedscroll.NestedScrollConnection,kotlin.Function1,androidx.compose.ui.Alignment.Horizontal,androidx.compose.ui.Alignment.Vertical,androidx.compose.foundation.gestures.snapping.SnapPosition,androidx.compose.foundation.gestures.BringIntoViewSpec,kotlin.Function2)` have the same size, defined by `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/package-summary#VerticalPager(androidx.compose.foundation.pager.PagerState,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.pager.PageSize,kotlin.Int,androidx.compose.ui.unit.Dp,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,kotlin.Boolean,kotlin.Function1,androidx.compose.ui.input.nestedscroll.NestedScrollConnection,androidx.compose.foundation.gestures.snapping.SnapPosition,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.gestures.BringIntoViewSpec,kotlin.Function2)` and use a snap animation (provided by `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/package-summary#VerticalPager(androidx.compose.foundation.pager.PagerState,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.pager.PageSize,kotlin.Int,androidx.compose.ui.unit.Dp,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,kotlin.Boolean,kotlin.Function1,androidx.compose.ui.input.nestedscroll.NestedScrollConnection,androidx.compose.foundation.gestures.snapping.SnapPosition,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.gestures.BringIntoViewSpec,kotlin.Function2)` to scroll pages into a specific position). You can use `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/package-summary#VerticalPager(androidx.compose.foundation.pager.PagerState,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.pager.PageSize,kotlin.Int,androidx.compose.ui.unit.Dp,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,kotlin.Boolean,kotlin.Function1,androidx.compose.ui.input.nestedscroll.NestedScrollConnection,androidx.compose.foundation.gestures.snapping.SnapPosition,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.gestures.BringIntoViewSpec,kotlin.Function2)` to place more pages before and after the visible pages.

If you need snapping with pages of different size, you can use a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/snapping/package-summary#snapFlingBehavior(androidx.compose.foundation.gestures.snapping.SnapLayoutInfoProvider,androidx.compose.animation.core.DecayAnimationSpec,androidx.compose.animation.core.AnimationSpec)` with a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/snapping/SnapLayoutInfoProvider` adapted to a LazyList.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.pager.PagerState
import androidx.compose.foundation.pager.VerticalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.material3.Text
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

// Creates a 1-pager/viewport vertical pager with single page snapping
val state = rememberPagerState { 10 }
VerticalPager(state = state, modifier = Modifier.fillMaxSize()) { page ->
    Box(
        modifier =
            Modifier.padding(10.dp).background(Color.Blue).fillMaxWidth().aspectRatio(1f),
        contentAlignment = Alignment.Center,
    ) {
        Text(text = page.toString(), fontSize = 32.sp)
    }
}
```

| Parameters |
|---|---|
| `state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/PagerState` | The state to control this pager |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | A modifier instance to be apply to this Pager outer layout |
| `contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues = PaddingValues(0.dp)` | a padding around the whole content. This will add padding for the content after it has been clipped, which is not possible via `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/package-summary#VerticalPager(androidx.compose.foundation.pager.PagerState,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.pager.PageSize,kotlin.Int,androidx.compose.ui.unit.Dp,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,kotlin.Boolean,kotlin.Function1,androidx.compose.ui.input.nestedscroll.NestedScrollConnection,androidx.compose.foundation.gestures.snapping.SnapPosition,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.gestures.BringIntoViewSpec,kotlin.Function2)` param. You can use it to add a padding before the first page or after the last one. Use `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/package-summary#VerticalPager(androidx.compose.foundation.pager.PagerState,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.pager.PageSize,kotlin.Int,androidx.compose.ui.unit.Dp,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,kotlin.Boolean,kotlin.Function1,androidx.compose.ui.input.nestedscroll.NestedScrollConnection,androidx.compose.foundation.gestures.snapping.SnapPosition,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.gestures.BringIntoViewSpec,kotlin.Function2)` to add spacing between the pages. |
| `pageSize: https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/PageSize = PageSize.Fill` | Use this to change how the pages will look like inside this pager. |
| `beyondViewportPageCount: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html = PagerDefaults.BeyondViewportPageCount` | Pages to compose and layout before and after the list of visible pages. Note: Be aware that using a large value for `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/package-summary#VerticalPager(androidx.compose.foundation.pager.PagerState,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.pager.PageSize,kotlin.Int,androidx.compose.ui.unit.Dp,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,kotlin.Boolean,kotlin.Function1,androidx.compose.ui.input.nestedscroll.NestedScrollConnection,androidx.compose.foundation.gestures.snapping.SnapPosition,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.gestures.BringIntoViewSpec,kotlin.Function2)` will cause a lot of pages to be composed, measured and placed which will defeat the purpose of using lazy loading. This should be used as an optimization to pre-load a couple of pages before and after the visible ones. This does not include the pages automatically composed and laid out by the pre-fetcher in \* the direction of the scroll during scroll events. |
| `pageSpacing: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = 0.dp` | The amount of space to be used to separate the pages in this Pager |
| `horizontalAlignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Horizontal = Alignment.CenterHorizontally` | How pages are aligned horizontally in this Pager. |
| `flingBehavior: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/TargetedFlingBehavior = PagerDefaults.flingBehavior(state = state)` | The `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/TargetedFlingBehavior` to be used for post scroll gestures. |
| `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 `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/PagerState#scroll(androidx.compose.foundation.MutatePriority,kotlin.coroutines.SuspendFunction1)` even when it is disabled. |
| `reverseLayout: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = false` | reverse the direction of scrolling and layout. |
| `key: ((index: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html)? = null` | a stable and unique key representing the item. When you specify the key the scroll position will be maintained based on the key, which means if you add/remove items before the current visible item the item with the given key will be kept as the first visible one. If null is passed the position in the list will represent the key. |
| `pageNestedScrollConnection: https://developer.android.com/reference/kotlin/androidx/compose/ui/input/nestedscroll/NestedScrollConnection = PagerDefaults.pageNestedScrollConnection(state, Orientation.Vertical)` | A `https://developer.android.com/reference/kotlin/androidx/compose/ui/input/nestedscroll/NestedScrollConnection` that dictates how this `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/package-summary#Pager(androidx.compose.ui.Modifier,androidx.compose.foundation.pager.PagerState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.gestures.Orientation,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,kotlin.Int,androidx.compose.ui.unit.Dp,androidx.compose.foundation.pager.PageSize,androidx.compose.ui.input.nestedscroll.NestedScrollConnection,kotlin.Function1,androidx.compose.ui.Alignment.Horizontal,androidx.compose.ui.Alignment.Vertical,androidx.compose.foundation.gestures.snapping.SnapPosition,androidx.compose.foundation.gestures.BringIntoViewSpec,kotlin.Function2)` behaves with nested lists. The default behavior will see `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/package-summary#Pager(androidx.compose.ui.Modifier,androidx.compose.foundation.pager.PagerState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.gestures.Orientation,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,kotlin.Int,androidx.compose.ui.unit.Dp,androidx.compose.foundation.pager.PageSize,androidx.compose.ui.input.nestedscroll.NestedScrollConnection,kotlin.Function1,androidx.compose.ui.Alignment.Horizontal,androidx.compose.ui.Alignment.Vertical,androidx.compose.foundation.gestures.snapping.SnapPosition,androidx.compose.foundation.gestures.BringIntoViewSpec,kotlin.Function2)` to consume all nested deltas. |
| `snapPosition: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/snapping/SnapPosition = SnapPosition.Start` | The calculation of how this Pager will perform snapping of Pages. Use this to provide different settling to different positions in the layout. This is used by `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/package-summary#Pager(androidx.compose.ui.Modifier,androidx.compose.foundation.pager.PagerState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.gestures.Orientation,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,kotlin.Int,androidx.compose.ui.unit.Dp,androidx.compose.foundation.pager.PageSize,androidx.compose.ui.input.nestedscroll.NestedScrollConnection,kotlin.Function1,androidx.compose.ui.Alignment.Horizontal,androidx.compose.ui.Alignment.Vertical,androidx.compose.foundation.gestures.snapping.SnapPosition,androidx.compose.foundation.gestures.BringIntoViewSpec,kotlin.Function2)` as a way to calculate `https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/PagerState#currentPage()`, currentPage is the page closest to the snap position in the layout (e.g. if the snap position is the start of the layout, then currentPage will be the page closest to that). |
| `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 Pager. 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. |
| `bringIntoViewSpec: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/BringIntoViewSpec = PagerDefaults.bringIntoViewSpec(state)` | the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/BringIntoViewSpec` that will be used to scroll pages into view when a page receives a bring into view request. |
| `pageContent: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/pager/PagerScope.(page: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | This Pager's page Composable. |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/snapping/SnapLayoutInfoProvider` | for the implementation of a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/snapping/SnapLayoutInfoProvider` that uses `https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/LazyListState`. Please refer to the sample to learn how to use this API. |