This Compose book is reviewed by Googlers Check it out →

VerticalPagerScaffold

Android

Component in Wear Material 3 Compose

[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.

Last updated:

Installation

dependencies {
   implementation("androidx.wear.compose:compose-material3:1.0.0-alpha27")
}

Overloads

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

Parameters

namedescription
pagerStateThe state of the pager controlling the page content.
modifierThe modifier to be applied to the scaffold.
pageIndicatorA composable function that defines the page indicator to be displayed. By default, it uses a [VerticalPageIndicator].
pageIndicatorAnimationSpec- 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.FadeOutAnimation] ensures the indicator only shows during paging, and fades out when the Pager is idle.
rotaryScrollableBehaviorParameter for changing rotary behavior. We recommend to use [RotaryScrollableDefaults.snapBehavior] with pagerState parameter. Passing null turns off the rotary handling if it is not required.
contentA composable function that takes the current page index as a parameter and defines the content to be displayed on that page.

Code Example

VerticalPagerScaffoldSample

@Composable
fun VerticalPagerScaffoldSample() {
    AppScaffold {
        val pagerState = rememberPagerState(pageCount = { 10 })

        VerticalPagerScaffold(pagerState = pagerState) { page ->
            ScreenScaffold {
                Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
                    Text("Page $page")
                }
            }
        }
    }
}
by @alexstyl