PagerScaffoldDefaults

object PagerScaffoldDefaults

Contains default values used for HorizontalPagerScaffold and VerticalPagerScaffold.

Summary

Public functions
TargetedFlingBehavior

Recommended fling behavior for pagers on Wear when using Material3, snaps at most one page at a time.

Public properties
AnimationSpec<Float>

The default value for the indicator fade out animation spec.

Public functions

snapWithSpringFlingBehavior

Added in 1.0.0-alpha34
@Composable
fun snapWithSpringFlingBehavior(state: PagerState): TargetedFlingBehavior

Recommended fling behavior for pagers on Wear when using Material3, snaps at most one page at a time. This behavior is tailored for a smooth, spring-like snapping effect, enhancing the user experience with a more fluid transition between pages.

Example of using HorizontalPager and snapWithSpringFlingBehavior:

import androidx.compose.foundation.layout.Box
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.HorizontalPager
import androidx.wear.compose.foundation.pager.rememberPagerState
import androidx.wear.compose.material3.AnimatedPage
import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.HorizontalPagerScaffold
import androidx.wear.compose.material3.PagerScaffoldDefaults
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.Text

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

    HorizontalPagerScaffold(pagerState = pagerState) {
        HorizontalPager(
            state = pagerState,
            flingBehavior =
                PagerScaffoldDefaults.snapWithSpringFlingBehavior(state = pagerState),
            rotaryScrollableBehavior = null,
        ) { page ->
            AnimatedPage(page = page, pagerState = pagerState) {
                ScreenScaffold {
                    Box(
                        modifier = Modifier.fillMaxSize(),
                        contentAlignment = Alignment.Center
                    ) {
                        if (page == 0) {
                            Column {
                                Text("Page 0")
                                Spacer(modifier = Modifier.height(16.dp))
                                Button(onClick = navigateBack) { Text("Exit") }
                            }
                        } else {
                            Text("Page $page")
                        }
                    }
                }
            }
        }
    }
}

Example of using VerticalPager and snapWithSpringFlingBehavior:

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
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 = { 10 })

    VerticalPagerScaffold(pagerState = pagerState) {
        VerticalPager(
            state = pagerState,
            flingBehavior =
                PagerScaffoldDefaults.snapWithSpringFlingBehavior(state = pagerState),
            rotaryScrollableBehavior = RotaryScrollableDefaults.snapBehavior(pagerState)
        ) { page ->
            AnimatedPage(page = page, pagerState = pagerState) {
                ScreenScaffold {
                    Box(
                        modifier = Modifier.fillMaxSize(),
                        contentAlignment = Alignment.Center
                    ) {
                        Text("Page $page")
                    }
                }
            }
        }
    }
}
Parameters
state: PagerState

The PagerState that controls the Pager to which this FlingBehavior will be applied to.

Public properties

FadeOutAnimation

Added in 1.0.0-alpha34
val FadeOutAnimation: AnimationSpec<Float>

The default value for the indicator fade out animation spec. Use this to fade out the page indicator when paging has stopped.