Scaffold

Scaffold implements the basic Wear Material Design visual layout structure.

Scaffold

Composable Component

Scaffold implements the basic Wear Material Design visual layout structure.

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

Parameters

modifieroptional Modifier for the root of the Scaffold
vignettea 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.
positionIndicatorslot 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.
pageIndicatorslot 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.
timeTexttime and potential application status message to display at the top middle of the screen. Expected to be a TimeText component.
contentSlot for composable screen content

Code Examples

SimpleScaffoldWithScrollIndicator

@SuppressLint("UnrememberedMutableState")
@Composable
fun SimpleScaffoldWithScrollIndicator() {
    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(),
                )
            }
        }
    }
}