VerticalPagerScaffold

Functions summary

Unit

@Composable VerticalPagerScaffold(     pagerState: PagerState,     modifier: Modifier,     pageIndicator: (@Composable BoxScope.() -> Unit)?,     pageIndicatorAnimationSpec: AnimationSpec<Float>?,     content: @Composable () -> Unit ) VerticalPagerScaffold is one of the Wear Material3 scaffold components.

Functions

VerticalPagerScaffold

Artifact: androidx.wear.compose:compose-material3

View Source

Added in 1.5.0

@Composable
fun VerticalPagerScaffold(
    pagerState: PagerState,
    modifier: Modifier = Modifier,
    pageIndicator: (@Composable BoxScope.() -> Unit)? = { VerticalPageIndicator(pagerState) },
    pageIndicatorAnimationSpec: AnimationSpec<Float>? = null,
    content: @Composable () -> Unit
): Unit

VerticalPagerScaffold is one of the Wear Material3 scaffold components.

The scaffold components AppScaffold and VerticalPagerScaffold lay out the structure of a Pager and coordinate transitions of the VerticalPageIndicator and TimeText components.

VerticalPagerScaffold displays the VerticalPageIndicator at the center-end of the screen by default and coordinates showing/hiding TimeText and VerticalPageIndicator according to whether the Pager is being paged, this is determined by the PagerState.

VerticalPagerScaffold supports rotary input by default. Rotary input allows users to scroll through the pager's content - by using a crown or a rotating bezel on their Wear OS device. It can be modified or turned off using the rotaryScrollableBehavior parameter.

Example of using AppScaffold and VerticalPagerScaffold with default snap sensitivity, for screens with many pages:

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.pager.PagerDefaults
import androidx.wear.compose.foundation.pager.VerticalPager
import androidx.wear.compose.foundation.pager.rememberPagerState
import androidx.wear.compose.foundation.rotary.RotaryScrollableDefaults
import androidx.wear.compose.material3.AnimatedPage
import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.MaterialTheme
import androidx.wear.compose.material3.PagerScaffoldDefaults
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.VerticalPagerScaffold

AppScaffold {
    val pagerState = rememberPagerState(pageCount = { 10 })

    VerticalPagerScaffold(pagerState = pagerState) {
        VerticalPager(
            state = pagerState,
            flingBehavior =
                PagerDefaults.snapFlingBehavior(
                    state = pagerState,
                    maxFlingPages = 1,
                    snapPositionalThreshold = PagerScaffoldDefaults.HighSnapPositionalThreshold,
                    snapAnimationSpec = MaterialTheme.motionScheme.defaultSpatialSpec(),
                ),
            rotaryScrollableBehavior = RotaryScrollableDefaults.snapBehavior(pagerState),
        ) { page ->
            AnimatedPage(pageIndex = page, pagerState = pagerState) {
                ScreenScaffold {
                    Column(
                        modifier = Modifier.fillMaxSize(),
                        horizontalAlignment = Alignment.CenterHorizontally,
                        verticalArrangement = Arrangement.Center,
                    ) {
                        Text(text = "Page #$page")
                        Spacer(modifier = Modifier.height(8.dp))
                        Text(text = "Swipe up and down")
                    }
                }
            }
        }
    }
}

Example of using AppScaffold and VerticalPagerScaffold with PagerSensitivity.Low and androidx.wear.compose.foundation.rotary.RotarySnapSensitivityValues.Default, for screens where gross motor control is limited:

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.pager.PagerDefaults
import androidx.wear.compose.foundation.pager.VerticalPager
import androidx.wear.compose.foundation.pager.rememberPagerState
import androidx.wear.compose.foundation.rotary.RotaryScrollableDefaults
import androidx.wear.compose.material3.AnimatedPage
import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.PagerScaffoldDefaults
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.VerticalPagerScaffold

AppScaffold {
    val pagerState = rememberPagerState(pageCount = { 3 })

    VerticalPagerScaffold(pagerState = pagerState) {
        VerticalPager(
            state = pagerState,
            flingBehavior =
                PagerDefaults.snapFlingBehavior(
                    state = pagerState,
                    maxFlingPages = 0,
                    snapPositionalThreshold = PagerScaffoldDefaults.LowSnapPositionalThreshold,
                    snapAnimationSpec = PagerDefaults.SnapAnimationSpec,
                ),
            rotaryScrollableBehavior =
                RotaryScrollableDefaults.snapBehavior(
                    pagerState = pagerState,
                    snapSensitivity = RotaryScrollableDefaults.LowSnapSensitivity,
                ),
        ) { page ->
            AnimatedPage(pageIndex = page, pagerState = pagerState) {
                ScreenScaffold {
                    Column(
                        modifier = Modifier.fillMaxSize(),
                        horizontalAlignment = Alignment.CenterHorizontally,
                        verticalArrangement = Arrangement.Center,
                    ) {
                        Text(text = "Page #$page")
                        Spacer(modifier = Modifier.height(8.dp))
                        Text(text = "Swipe up and down")
                    }
                }
            }
        }
    }
}

Parameters
pagerState: PagerState	The state of the pager controlling the page content.
modifier: Modifier = Modifier	The modifier to be applied to the scaffold.
pageIndicator: (@Composable BoxScope.() -> Unit)? = { VerticalPageIndicator(pagerState) }	A composable function that defines the page indicator to be displayed. By default, it uses a VerticalPageIndicator.
pageIndicatorAnimationSpec: AnimationSpec<Float>? = null	An optional parameter to set whether the page indicator should fade out when paging has finished. This is useful for when the underlying page content conflicts with the page indicator. By default this is null, so the page indicator will be visible at all times, setting this to PagerScaffoldDefaults.FadeOutAnimationSpec ensures the indicator only shows during paging, and fades out when the Pager is idle.
content: @Composable () -> Unit	A composable function where a androidx.compose.foundation.pager.VerticalPager can be added.