Scaffold

Functions summary

Unit
@Composable
Scaffold(
    modifier: Modifier,
    vignette: (@Composable () -> Unit)?,
    positionIndicator: (@Composable () -> Unit)?,
    pageIndicator: (@Composable () -> Unit)?,
    timeText: (@Composable () -> Unit)?,
    content: @Composable () -> Unit
)

Scaffold implements the basic Wear Material Design visual layout structure.

Functions

Scaffold

@Composable
fun Scaffold(
    modifier: Modifier = Modifier,
    vignette: (@Composable () -> Unit)? = null,
    positionIndicator: (@Composable () -> Unit)? = null,
    pageIndicator: (@Composable () -> Unit)? = null,
    timeText: (@Composable () -> Unit)? = null,
    content: @Composable () -> Unit
): Unit

Scaffold implements the basic Wear Material Design visual layout structure.

This component provides API to put together several material components to construct your screen, by ensuring proper layout strategy for them and collecting necessary data so these components will work together correctly.

The Scaffold provides the main application structure in a Wear Material application. It provides slots for the different parts of the application and sensible defaults were appropriate.

The layout of the Wear Scaffold is typically z-layered with decorations such as PositionIndicator, HorizontalPageIndicator and Vignette applied in the order laid out in the Wear Material Design guidance.

Simple example of a Scaffold with a ScalingLazyColumn as the main application content and a scroll indicator to show the position of the items in the ScalingLazyColumn as.

import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.mutableStateOf
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.lazy.ScalingLazyColumn
import androidx.wear.compose.foundation.lazy.rememberScalingLazyListState
import androidx.wear.compose.material.Chip
import androidx.wear.compose.material.ChipDefaults
import androidx.wear.compose.material.PositionIndicator
import androidx.wear.compose.material.Scaffold
import androidx.wear.compose.material.Text
import androidx.wear.compose.material.TimeText
import androidx.wear.compose.material.Vignette
import androidx.wear.compose.material.VignettePosition

val listState = rememberScalingLazyListState()
val vignetteState = mutableStateOf(VignettePosition.TopAndBottom)
val showVignette = mutableStateOf(true)

Scaffold(
    positionIndicator = {
        PositionIndicator(scalingLazyListState = listState, modifier = Modifier)
    },
    vignette = {
        if (showVignette.value) {
            Vignette(vignettePosition = vignetteState.value)
        }
    },
    timeText = { TimeText() },
) {
    ScalingLazyColumn(
        contentPadding = PaddingValues(top = 40.dp),
        state = listState,
        modifier = Modifier.fillMaxWidth(),
    ) {
        item {
            Chip(
                onClick = { showVignette.value = false },
                label = { Text("No Vignette") },
                colors = ChipDefaults.secondaryChipColors(),
            )
        }
        item {
            Chip(
                onClick = {
                    showVignette.value = true
                    vignetteState.value = VignettePosition.Top
                },
                label = { Text("Top Vignette only") },
                colors = ChipDefaults.secondaryChipColors(),
            )
        }
        item {
            Chip(
                onClick = {
                    showVignette.value = true
                    vignetteState.value = VignettePosition.Bottom
                },
                label = { Text("Bottom Vignette only") },
                colors = ChipDefaults.secondaryChipColors(),
            )
        }
        item {
            Chip(
                onClick = {
                    showVignette.value = true
                    vignetteState.value = VignettePosition.TopAndBottom
                },
                label = { Text("Top and Bottom Vignette") },
                colors = ChipDefaults.secondaryChipColors(),
            )
        }
        items(20) {
            Chip(
                onClick = {},
                label = { Text("List item $it") },
                colors = ChipDefaults.secondaryChipColors(),
            )
        }
    }
}
Parameters
modifier: Modifier = Modifier

optional Modifier for the root of the Scaffold
vignette: (@Composable () -> Unit)? = null

a full screen slot for applying a vignette over the contents of the scaffold. The vignette is used to blur the screen edges when the main content is scrollable content that extends beyond the screen edge.
positionIndicator: (@Composable () -> Unit)? = null

slot for optional position indicator used to display information about the position of the Scaffold's contents. Usually a PositionIndicator. Common use cases for the position indicator are scroll indication for a list or rsb/bezel indication such as volume.
pageIndicator: (@Composable () -> Unit)? = null

slot for optional page indicator used to display information about the selected page of the Scaffold's contents. Usually a HorizontalPageIndicator. Common use case for the page indicator is a pager with horizontally swipeable pages.
timeText: (@Composable () -> Unit)? = null

time and potential application status message to display at the top middle of the screen. Expected to be a TimeText component.
content: @Composable () -> Unit

Slot for composable screen content