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
| modifier | optional Modifier for the root of the Scaffold |
| vignette | 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 | 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 | 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 | time and potential application status message to display at the top middle of the screen. Expected to be a TimeText component. |
| content | Slot 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(),
)
}
}
}
}
