AppScaffold

Component in Wear Material 3 Compose

[AppScaffold] is one of the Wear Material3 scaffold components.

The scaffold components [AppScaffold] and [ScreenScaffold] lay out the structure of a screen and coordinate transitions of the [ScrollIndicator] and [TimeText] components.

[AppScaffold] allows static screen elements such as [TimeText] to remain visible during in-app transitions such as swipe-to-dismiss. It provides a slot for the main application content, which will usually be supplied by a navigation component such as SwipeDismissableNavHost.

Last updated: 2024-09-07 14:23

Installation

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

Overloads

@Composable
fun AppScaffold(
    modifier: Modifier = Modifier,
    timeText: @Composable () -> Unit = { TimeText { time() } },
    content: @Composable BoxScope.() -> Unit,
)

Parameters

name	description
modifier	The modifier for the top level of the scaffold.
timeText	The default time (and potentially status message) to display at the top middle of the screen in this app. When [AppScaffold] is used in combination with [ScreenScaffold], the time text will be scrolled away and shown/hidden according to the scroll state of the screen.
content	The main content for this application.

Code Example

ScaffoldSample

@Composable
fun ScaffoldSample() {
    // Declare just one [AppScaffold] per app such as in the activity.
    // [AppScaffold] allows static screen elements (i.e. [TimeText]) to remain visible
    // during in-app transitions such as swipe-to-dismiss.
    AppScaffold {
        // Define the navigation hierarchy within the AppScaffold,
        // such as using SwipeDismissableNavHost.
        // For this sample, we will define a single screen inline.
        val listState = rememberScalingLazyListState()

        // By default, ScreenScaffold will handle transitions showing/hiding ScrollIndicator
        // and showing/hiding/scrolling away TimeText.
        ScreenScaffold(scrollState = listState) {
            ScalingLazyColumn(state = listState, modifier = Modifier.fillMaxSize()) {
                items(10) {
                    Button(
                        onClick = {},
                        label = { Text("Item ${it + 1}") },
                    )
                }
            }
        }
    }
}