ScreenScaffold

Functions summary

Unit
@Composable
ScreenScaffold(
    modifier: Modifier,
    scrollInfoProvider: ScrollInfoProvider?,
    contentPadding: PaddingValues,
    timeText: (@Composable () -> Unit)?,
    scrollIndicator: (@Composable BoxScope.() -> Unit)?,
    overscrollEffect: OverscrollEffect?,
    content: @Composable BoxScope.(PaddingValues) -> Unit
)

ScreenScaffold is one of the Wear Material3 scaffold components.

Unit
@Composable
ScreenScaffold(
    scrollState: LazyListState,
    modifier: Modifier,
    contentPadding: PaddingValues,
    timeText: (@Composable () -> Unit)?,
    scrollIndicator: (@Composable BoxScope.() -> Unit)?,
    overscrollEffect: OverscrollEffect?,
    content: @Composable BoxScope.(PaddingValues) -> Unit
)

ScreenScaffold is one of the Wear Material3 scaffold components.

Unit
@Composable
ScreenScaffold(
    scrollState: ScalingLazyListState,
    modifier: Modifier,
    contentPadding: PaddingValues,
    timeText: (@Composable () -> Unit)?,
    scrollIndicator: (@Composable BoxScope.() -> Unit)?,
    overscrollEffect: OverscrollEffect?,
    content: @Composable BoxScope.(PaddingValues) -> Unit
)

ScreenScaffold is one of the Wear Material3 scaffold components.

Unit
@Composable
ScreenScaffold(
    scrollState: ScrollState,
    modifier: Modifier,
    contentPadding: PaddingValues,
    timeText: (@Composable () -> Unit)?,
    scrollIndicator: (@Composable BoxScope.() -> Unit)?,
    overscrollEffect: OverscrollEffect?,
    content: @Composable BoxScope.(PaddingValues) -> Unit
)

ScreenScaffold is one of the Wear Material3 scaffold components.

Unit
@Composable
ScreenScaffold(
    scrollState: TransformingLazyColumnState,
    modifier: Modifier,
    contentPadding: PaddingValues,
    timeText: (@Composable () -> Unit)?,
    scrollIndicator: (@Composable BoxScope.() -> Unit)?,
    overscrollEffect: OverscrollEffect?,
    content: @Composable BoxScope.(PaddingValues) -> Unit
)

ScreenScaffold is one of the Wear Material3 scaffold components.

Unit
@Composable
ScreenScaffold(
    scrollInfoProvider: ScrollInfoProvider,
    edgeButton: @Composable BoxScope.() -> Unit,
    modifier: Modifier,
    contentPadding: PaddingValues,
    timeText: (@Composable () -> Unit)?,
    scrollIndicator: (@Composable BoxScope.() -> Unit)?,
    edgeButtonSpacing: Dp,
    overscrollEffect: OverscrollEffect?,
    content: @Composable BoxScope.(PaddingValues) -> Unit
)

ScreenScaffold is one of the Wear Material3 scaffold components.

Unit
@Composable
ScreenScaffold(
    scrollState: LazyListState,
    edgeButton: @Composable BoxScope.() -> Unit,
    modifier: Modifier,
    contentPadding: PaddingValues,
    timeText: (@Composable () -> Unit)?,
    scrollIndicator: (@Composable BoxScope.() -> Unit)?,
    overscrollEffect: OverscrollEffect?,
    edgeButtonSpacing: Dp,
    content: @Composable BoxScope.(PaddingValues) -> Unit
)

ScreenScaffold is one of the Wear Material3 scaffold components.

Unit
@Composable
ScreenScaffold(
    scrollState: ScalingLazyListState,
    edgeButton: @Composable BoxScope.() -> Unit,
    modifier: Modifier,
    contentPadding: PaddingValues,
    timeText: (@Composable () -> Unit)?,
    scrollIndicator: (@Composable BoxScope.() -> Unit)?,
    edgeButtonSpacing: Dp,
    overscrollEffect: OverscrollEffect?,
    content: @Composable BoxScope.(PaddingValues) -> Unit
)

ScreenScaffold is one of the Wear Material3 scaffold components.

Unit
@Composable
ScreenScaffold(
    scrollState: TransformingLazyColumnState,
    edgeButton: @Composable BoxScope.() -> Unit,
    modifier: Modifier,
    contentPadding: PaddingValues,
    timeText: (@Composable () -> Unit)?,
    scrollIndicator: (@Composable BoxScope.() -> Unit)?,
    edgeButtonSpacing: Dp,
    overscrollEffect: OverscrollEffect?,
    content: @Composable BoxScope.(PaddingValues) -> Unit
)

ScreenScaffold is one of the Wear Material3 scaffold components.

Functions

ScreenScaffold

@Composable
fun ScreenScaffold(
    modifier: Modifier = Modifier,
    scrollInfoProvider: ScrollInfoProvider? = null,
    contentPadding: PaddingValues = ScreenScaffoldDefaults.contentPadding,
    timeText: (@Composable () -> Unit)? = null,
    scrollIndicator: (@Composable BoxScope.() -> Unit)? = null,
    overscrollEffect: OverscrollEffect? = rememberOverscrollEffect(),
    content: @Composable BoxScope.(PaddingValues) -> Unit
): Unit

ScreenScaffold 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 should be at the top of the composition (because it provides ScaffoldState and layers TimeText on top of all other content) and ScreenScaffold should be part of AppScaffold's content. When used in conjunction with SwipeDismissableNavHost, AppScaffold remains at the top of the composition, whilst ScreenScaffold will be placed for each individual composable route.

ScreenScaffold displays the ScrollIndicator at the center-end of the screen by default and coordinates showing/hiding TimeText and ScrollIndicator according to scrollInfoProvider.

Example of using AppScaffold and ScreenScaffold:

import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxSize
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.material3.AppScaffold
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.EdgeButton
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.Text

// 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,
    // showing/hiding/scrolling away TimeText and optionally hosting the EdgeButton.
    ScreenScaffold(scrollState = listState, contentPadding = PaddingValues(10.dp)) {
        contentPadding ->
        ScalingLazyColumn(
            state = listState,
            contentPadding = contentPadding,
            modifier = Modifier.fillMaxSize(),
        ) {
            items(10) { Button(onClick = {}, label = { Text("Item ${it + 1}") }) }
        }
    }
}
Parameters
modifier: Modifier = Modifier

The modifier for the screen scaffold.

scrollInfoProvider: ScrollInfoProvider? = null

Provider for scroll information used to scroll away screen elements such as TimeText and coordinate showing/hiding the ScrollIndicator.

contentPadding: PaddingValues = ScreenScaffoldDefaults.contentPadding

The padding to apply around the entire content. This contentPadding is then received by the content and should be consumed by using androidx.compose.foundation.layout.padding or contentPadding parameter of the lazy lists.

timeText: (@Composable () -> Unit)? = null

Time text (both time and potentially status message) for this screen, if different to the time text at the AppScaffold level. When null, the time text from the AppScaffold is displayed for this screen.

scrollIndicator: (@Composable BoxScope.() -> Unit)? = null

The ScrollIndicator to display on this screen, which is expected to be aligned to Center-End. It is recommended to use the Material3 ScrollIndicator which is provided by default. No scroll indicator is displayed if null is passed.

overscrollEffect: OverscrollEffect? = rememberOverscrollEffect()

the OverscrollEffect that will be used to render overscroll for this layout. This overscroll effect will be shared with all components within this ScreenScaffold such as scrollIndicator through LocalOverscrollFactory. If necessary, this behaviour can be disabled by passing overscrollEffect = null.

content: @Composable BoxScope.(PaddingValues) -> Unit

The body content for this screen. The lambda receives a PaddingValues that should be applied to the content root via androidx.compose.foundation.layout.padding or contentPadding parameter when used with lists.

ScreenScaffold

@Composable
fun ScreenScaffold(
    scrollState: LazyListState,
    modifier: Modifier = Modifier,
    contentPadding: PaddingValues = ScreenScaffoldDefaults.contentPadding,
    timeText: (@Composable () -> Unit)? = null,
    scrollIndicator: (@Composable BoxScope.() -> Unit)? = { ScrollIndicator(scrollState) },
    overscrollEffect: OverscrollEffect? = rememberOverscrollEffect(),
    content: @Composable BoxScope.(PaddingValues) -> Unit
): Unit

ScreenScaffold 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 should be at the top of the composition (because it provides ScaffoldState and layers TimeText on top of all other content) and ScreenScaffold should be part of AppScaffold's content. When used in conjunction with SwipeDismissableNavHost, AppScaffold remains at the top of the composition, whilst ScreenScaffold will be placed for each individual composable route.

ScreenScaffold displays the ScrollIndicator at the center-end of the screen by default and coordinates showing/hiding TimeText and ScrollIndicator according to scrollState.

Example of using AppScaffold and ScreenScaffold:

import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxSize
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.material3.AppScaffold
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.EdgeButton
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.Text

// 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,
    // showing/hiding/scrolling away TimeText and optionally hosting the EdgeButton.
    ScreenScaffold(scrollState = listState, contentPadding = PaddingValues(10.dp)) {
        contentPadding ->
        ScalingLazyColumn(
            state = listState,
            contentPadding = contentPadding,
            modifier = Modifier.fillMaxSize(),
        ) {
            items(10) { Button(onClick = {}, label = { Text("Item ${it + 1}") }) }
        }
    }
}
Parameters
scrollState: LazyListState

The scroll state for androidx.compose.foundation.lazy.LazyColumn, used to drive screen transitions such as TimeText scroll away and showing/hiding ScrollIndicator.

modifier: Modifier = Modifier

The modifier for the screen scaffold.

contentPadding: PaddingValues = ScreenScaffoldDefaults.contentPadding

The padding to apply around the entire content. This contentPadding is then received by the content and should be consumed by using androidx.compose.foundation.layout.padding or contentPadding parameter of the lazy lists.

timeText: (@Composable () -> Unit)? = null

Time text (both time and potentially status message) for this screen, if different to the time text at the AppScaffold level. When null, the time text from the AppScaffold is displayed for this screen.

scrollIndicator: (@Composable BoxScope.() -> Unit)? = { ScrollIndicator(scrollState) }

The ScrollIndicator to display on this screen, which is expected to be aligned to Center-End. It is recommended to use the Material3 ScrollIndicator which is provided by default. No scroll indicator is displayed if null is passed.

overscrollEffect: OverscrollEffect? = rememberOverscrollEffect()

the OverscrollEffect that will be used to render overscroll for this layout. This overscroll effect will be shared with all components within this ScreenScaffold such as scrollIndicator through LocalOverscrollFactory. If necessary, this behaviour can be disabled by passing overscrollEffect = null.

content: @Composable BoxScope.(PaddingValues) -> Unit

The body content for this screen. The lambda receives a PaddingValues that should be applied to the content root via androidx.compose.foundation.layout.padding or contentPadding parameter when used with lists.

ScreenScaffold

@Composable
fun ScreenScaffold(
    scrollState: ScalingLazyListState,
    modifier: Modifier = Modifier,
    contentPadding: PaddingValues = ScreenScaffoldDefaults.contentPadding,
    timeText: (@Composable () -> Unit)? = null,
    scrollIndicator: (@Composable BoxScope.() -> Unit)? = { ScrollIndicator(scrollState) },
    overscrollEffect: OverscrollEffect? = rememberOverscrollEffect(),
    content: @Composable BoxScope.(PaddingValues) -> Unit
): Unit

ScreenScaffold 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 should be at the top of the composition (because it provides ScaffoldState and layers TimeText on top of all other content) and ScreenScaffold should be part of AppScaffold's content. When used in conjunction with SwipeDismissableNavHost, AppScaffold remains at the top of the composition, whilst ScreenScaffold will be placed for each individual composable route.

ScreenScaffold displays the ScrollIndicator at the center-end of the screen by default and coordinates showing/hiding TimeText and ScrollIndicator according to scrollState.

Example of using AppScaffold and ScreenScaffold:

import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxSize
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.material3.AppScaffold
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.EdgeButton
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.Text

// 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,
    // showing/hiding/scrolling away TimeText and optionally hosting the EdgeButton.
    ScreenScaffold(scrollState = listState, contentPadding = PaddingValues(10.dp)) {
        contentPadding ->
        ScalingLazyColumn(
            state = listState,
            contentPadding = contentPadding,
            modifier = Modifier.fillMaxSize(),
        ) {
            items(10) { Button(onClick = {}, label = { Text("Item ${it + 1}") }) }
        }
    }
}
Parameters
scrollState: ScalingLazyListState

The scroll state for ScalingLazyColumn, used to drive screen transitions such as TimeText scroll away and showing/hiding ScrollIndicator.

modifier: Modifier = Modifier

The modifier for the screen scaffold.

contentPadding: PaddingValues = ScreenScaffoldDefaults.contentPadding

The padding to apply around the entire content. This contentPadding is then received by the content and should be consumed by using androidx.compose.foundation.layout.padding or contentPadding parameter of the lazy lists.

timeText: (@Composable () -> Unit)? = null

Time text (both time and potentially status message) for this screen, if different to the time text at the AppScaffold level. When null, the time text from the AppScaffold is displayed for this screen.

scrollIndicator: (@Composable BoxScope.() -> Unit)? = { ScrollIndicator(scrollState) }

The ScrollIndicator to display on this screen, which is expected to be aligned to Center-End. It is recommended to use the Material3 ScrollIndicator which is provided by default. No scroll indicator is displayed if null is passed.

overscrollEffect: OverscrollEffect? = rememberOverscrollEffect()

the OverscrollEffect that will be used to render overscroll for this layout. This overscroll effect will be shared with all components within this ScreenScaffold such as scrollIndicator through LocalOverscrollFactory. If necessary, this behaviour can be disabled by passing overscrollEffect = null.

content: @Composable BoxScope.(PaddingValues) -> Unit

The body content for this screen. The lambda receives a PaddingValues that should be applied to the content root via androidx.compose.foundation.layout.padding or contentPadding parameter when used with lists to properly offset the EdgeButton.

ScreenScaffold

@Composable
fun ScreenScaffold(
    scrollState: ScrollState,
    modifier: Modifier = Modifier,
    contentPadding: PaddingValues = ScreenScaffoldDefaults.contentPadding,
    timeText: (@Composable () -> Unit)? = null,
    scrollIndicator: (@Composable BoxScope.() -> Unit)? = { ScrollIndicator(scrollState) },
    overscrollEffect: OverscrollEffect? = rememberOverscrollEffect(),
    content: @Composable BoxScope.(PaddingValues) -> Unit
): Unit

ScreenScaffold 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 should be at the top of the composition (because it provides ScaffoldState and layers TimeText on top of all other content) and ScreenScaffold should be part of AppScaffold's content. When used in conjunction with SwipeDismissableNavHost, AppScaffold remains at the top of the composition, whilst ScreenScaffold will be placed for each individual composable route.

ScreenScaffold displays the ScrollIndicator at the center-end of the screen by default and coordinates showing/hiding TimeText and ScrollIndicator according to scrollState. Note that this version doesn't support a bottom button slot, for that use the overload that takes LazyListState or the one that takes a ScalingLazyListState.

Example of using AppScaffold and ScreenScaffold:

import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxSize
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.material3.AppScaffold
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.EdgeButton
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.Text

// 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,
    // showing/hiding/scrolling away TimeText and optionally hosting the EdgeButton.
    ScreenScaffold(scrollState = listState, contentPadding = PaddingValues(10.dp)) {
        contentPadding ->
        ScalingLazyColumn(
            state = listState,
            contentPadding = contentPadding,
            modifier = Modifier.fillMaxSize(),
        ) {
            items(10) { Button(onClick = {}, label = { Text("Item ${it + 1}") }) }
        }
    }
}
Parameters
scrollState: ScrollState

The scroll state for a Column, used to drive screen transitions such as TimeText scroll away and showing/hiding ScrollIndicator.

modifier: Modifier = Modifier

The modifier for the screen scaffold.

contentPadding: PaddingValues = ScreenScaffoldDefaults.contentPadding

The padding to apply around the entire content. This contentPadding is then received by the content and should be consumed by using androidx.compose.foundation.layout.padding or contentPadding parameter of the lazy lists.

timeText: (@Composable () -> Unit)? = null

Time text (both time and potentially status message) for this screen, if different to the time text at the AppScaffold level. When null, the time text from the AppScaffold is displayed for this screen.

scrollIndicator: (@Composable BoxScope.() -> Unit)? = { ScrollIndicator(scrollState) }

The ScrollIndicator to display on this screen, which is expected to be aligned to Center-End. It is recommended to use the Material3 ScrollIndicator which is provided by default. No scroll indicator is displayed if null is passed.

overscrollEffect: OverscrollEffect? = rememberOverscrollEffect()

the OverscrollEffect that will be used to render overscroll for this layout. This overscroll effect will be shared with all components within this ScreenScaffold such as scrollIndicator through LocalOverscrollFactory. If necessary, this behaviour can be disabled by passing overscrollEffect = null.

content: @Composable BoxScope.(PaddingValues) -> Unit

The body content for this screen. The lambda receives a PaddingValues that should be applied to the content root via androidx.compose.foundation.layout.padding or contentPadding parameter when used with lists.

ScreenScaffold

@Composable
fun ScreenScaffold(
    scrollState: TransformingLazyColumnState,
    modifier: Modifier = Modifier,
    contentPadding: PaddingValues = ScreenScaffoldDefaults.contentPadding,
    timeText: (@Composable () -> Unit)? = null,
    scrollIndicator: (@Composable BoxScope.() -> Unit)? = { ScrollIndicator(scrollState) },
    overscrollEffect: OverscrollEffect? = rememberOverscrollEffect(),
    content: @Composable BoxScope.(PaddingValues) -> Unit
): Unit

ScreenScaffold 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 should be at the top of the composition (because it provides ScaffoldState and layers TimeText on top of all other content) and ScreenScaffold should be part of AppScaffold's content. When used in conjunction with SwipeDismissableNavHost, AppScaffold remains at the top of the composition, whilst ScreenScaffold will be placed for each individual composable route.

ScreenScaffold displays the ScrollIndicator at the center-end of the screen by default and coordinates showing/hiding TimeText and ScrollIndicator according to scrollState.

Example of using AppScaffold and ScreenScaffold:

import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxSize
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.material3.AppScaffold
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.EdgeButton
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.Text

// 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,
    // showing/hiding/scrolling away TimeText and optionally hosting the EdgeButton.
    ScreenScaffold(scrollState = listState, contentPadding = PaddingValues(10.dp)) {
        contentPadding ->
        ScalingLazyColumn(
            state = listState,
            contentPadding = contentPadding,
            modifier = Modifier.fillMaxSize(),
        ) {
            items(10) { Button(onClick = {}, label = { Text("Item ${it + 1}") }) }
        }
    }
}
Parameters
scrollState: TransformingLazyColumnState

The scroll state for TransformingLazyColumn, used to drive screen transitions such as TimeText scroll away and showing/hiding ScrollIndicator.

modifier: Modifier = Modifier

The modifier for the screen scaffold.

contentPadding: PaddingValues = ScreenScaffoldDefaults.contentPadding

The padding to apply around the entire content. This contentPadding is then received by the content and should be consumed by using androidx.compose.foundation.layout.padding or contentPadding parameter of the lazy lists.

timeText: (@Composable () -> Unit)? = null

Time text (both time and potentially status message) for this screen, if different to the time text at the AppScaffold level. When null, the time text from the AppScaffold is displayed for this screen.

scrollIndicator: (@Composable BoxScope.() -> Unit)? = { ScrollIndicator(scrollState) }

The ScrollIndicator to display on this screen, which is expected to be aligned to Center-End. It is recommended to use the Material3 ScrollIndicator which is provided by default. No scroll indicator is displayed if null is passed.

overscrollEffect: OverscrollEffect? = rememberOverscrollEffect()

the OverscrollEffect that will be used to render overscroll for this layout. This overscroll effect will be shared with all components within this ScreenScaffold such as scrollIndicator through LocalOverscrollFactory. If necessary, this behaviour can be disabled by passing overscrollEffect = null.

content: @Composable BoxScope.(PaddingValues) -> Unit

The body content for this screen. The lambda receives a PaddingValues that should be applied to the content root via androidx.compose.foundation.layout.padding or contentPadding parameter when used with lists.

@Composable
fun ScreenScaffold(
    scrollInfoProvider: ScrollInfoProvider,
    edgeButton: @Composable BoxScope.() -> Unit,
    modifier: Modifier = Modifier,
    contentPadding: PaddingValues = ScreenScaffoldDefaults.contentPadding,
    timeText: (@Composable () -> Unit)? = null,
    scrollIndicator: (@Composable BoxScope.() -> Unit)? = null,
    edgeButtonSpacing: Dp = ScreenScaffoldDefaults.EdgeButtonSpacing,
    overscrollEffect: OverscrollEffect? = rememberOverscrollEffect(),
    content: @Composable BoxScope.(PaddingValues) -> Unit
): Unit

ScreenScaffold 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 should be at the top of the composition (because it provides ScaffoldState and layers TimeText on top of all other content) and ScreenScaffold should be part of AppScaffold's content. When used in conjunction with SwipeDismissableNavHost, AppScaffold remains at the top of the composition, whilst ScreenScaffold will be placed for each individual composable route.

ScreenScaffold displays the ScrollIndicator at the center-end of the screen by default and coordinates showing/hiding TimeText, ScrollIndicator and the bottom button according to a scrollInfoProvider.

This version of ScreenScaffold has a special slot for a button at the bottom, that grows and shrinks to take the available space after the scrollable content. In this overload, both edgeButton and scrollInfoProvider must be specified.

Parameters
scrollInfoProvider: ScrollInfoProvider

Provider for scroll information used to scroll away screen elements such as TimeText and coordinate showing/hiding the ScrollIndicator, this needs to be a ScrollInfoProvider.

edgeButton: @Composable BoxScope.() -> Unit

slot for a EdgeButton that takes the available space below a scrolling list. It will scale up and fade in when the user scrolls to the end of the list, and scale down and fade out as the user scrolls up.

modifier: Modifier = Modifier

The modifier for the screen scaffold.

contentPadding: PaddingValues = ScreenScaffoldDefaults.contentPadding

The padding to apply around the entire content. This contentPadding is then received by the content and should be consumed by using androidx.compose.foundation.layout.padding or contentPadding parameter of the lazy lists. The bottom padding value is always ignored because we instead use edgeButtonSpacing to specify the gap between edge button and content - and the EdgeButton hugs the bottom of the screen.

timeText: (@Composable () -> Unit)? = null

Time text (both time and potentially status message) for this screen, if different to the time text at the AppScaffold level. When null, the time text from the AppScaffold is displayed for this screen.

scrollIndicator: (@Composable BoxScope.() -> Unit)? = null

The ScrollIndicator to display on this screen, which is expected to be aligned to Center-End. It is recommended to use the Material3 ScrollIndicator which is provided by default. No scroll indicator is displayed if null is passed.

edgeButtonSpacing: Dp = ScreenScaffoldDefaults.EdgeButtonSpacing

The space between EdgeButton and the list content. This gap size could not be smaller then ScreenScaffoldDefaults.EdgeButtonMinSpacing.

overscrollEffect: OverscrollEffect? = rememberOverscrollEffect()

the OverscrollEffect that will be used to render overscroll for this layout. This overscroll effect will be shared with all components within this ScreenScaffold such as edgeButton and scrollIndicator through LocalOverscrollFactory. If necessary, this behaviour can be disabled by passing overscrollEffect = null.

content: @Composable BoxScope.(PaddingValues) -> Unit

The body content for this screen. The lambda receives a PaddingValues that should be applied to the content root via androidx.compose.foundation.layout.padding or contentPadding parameter when used with lists to properly offset the EdgeButton.

@Composable
fun ScreenScaffold(
    scrollState: LazyListState,
    edgeButton: @Composable BoxScope.() -> Unit,
    modifier: Modifier = Modifier,
    contentPadding: PaddingValues = ScreenScaffoldDefaults.contentPadding,
    timeText: (@Composable () -> Unit)? = null,
    scrollIndicator: (@Composable BoxScope.() -> Unit)? = { ScrollIndicator(scrollState) },
    overscrollEffect: OverscrollEffect? = rememberOverscrollEffect(),
    edgeButtonSpacing: Dp = ScreenScaffoldDefaults.EdgeButtonSpacing,
    content: @Composable BoxScope.(PaddingValues) -> Unit
): Unit

ScreenScaffold 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 should be at the top of the composition (because it provides ScaffoldState and layers TimeText on top of all other content) and ScreenScaffold should be part of AppScaffold's content. When used in conjunction with SwipeDismissableNavHost, AppScaffold remains at the top of the composition, whilst ScreenScaffold will be placed for each individual composable route.

ScreenScaffold displays the ScrollIndicator at the center-end of the screen by default and coordinates showing/hiding TimeText and ScrollIndicator according to scrollState.

This version of ScreenScaffold has a special slot for a button at the bottom, that grows and shrinks to take the available space after the scrollable content.

Example of using AppScaffold and ScreenScaffold with ScalingLazyColumn:

import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.gestures.scrollable
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.rememberOverscrollEffect
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.lazy.ScalingLazyColumn
import androidx.wear.compose.foundation.lazy.rememberScalingLazyListState
import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.EdgeButton
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.Text

// 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(modifier = Modifier.background(Color.Black)) {
    // 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,
    // showing/hiding/scrolling away TimeText and optionally hosting the EdgeButton.
    ScreenScaffold(
        scrollState = listState,
        // Define custom spacing between [EdgeButton] and [ScalingLazyColumn].
        edgeButtonSpacing = 15.dp,
        edgeButton = {
            EdgeButton(
                onClick = {},
                modifier =
                    // In case user starts scrolling from the EdgeButton.
                    Modifier.scrollable(
                        listState,
                        orientation = Orientation.Vertical,
                        reverseDirection = true,
                        // An overscroll effect should be applied to the EdgeButton for proper
                        // scrolling behavior.
                        overscrollEffect = rememberOverscrollEffect(),
                    ),
            ) {
                Text("Clear All")
            }
        },
    ) { contentPadding ->
        ScalingLazyColumn(
            state = listState,
            modifier = Modifier.fillMaxSize(),
            // Bottom spacing is derived from [ScreenScaffold.edgeButtonSpacing].
            contentPadding = contentPadding,
            autoCentering = null,
        ) {
            items(10) { Button(onClick = {}, label = { Text("Item ${it + 1}") }) }
        }
    }
}
Parameters
scrollState: LazyListState

The scroll state for androidx.compose.foundation.lazy.LazyColumn, used to drive screen transitions such as TimeText scroll away and showing/hiding ScrollIndicator.

edgeButton: @Composable BoxScope.() -> Unit

Slot for an EdgeButton that takes the available space below a scrolling list. It will scale up and fade in when the user scrolls to the end of the list, and scale down and fade out as the user scrolls up.

modifier: Modifier = Modifier

The modifier for the screen scaffold.

contentPadding: PaddingValues = ScreenScaffoldDefaults.contentPadding

The padding to apply around the entire content. This contentPadding is then received by the content and should be consumed by using androidx.compose.foundation.layout.padding or contentPadding parameter of the lazy lists. The bottom padding value is always ignored because we instead use edgeButtonSpacing to specify the gap between edge button and content - and the EdgeButton hugs the bottom of the screen.

timeText: (@Composable () -> Unit)? = null

Time text (both time and potentially status message) for this screen, if different to the time text at the AppScaffold level. When null, the time text from the AppScaffold is displayed for this screen.

scrollIndicator: (@Composable BoxScope.() -> Unit)? = { ScrollIndicator(scrollState) }

The ScrollIndicator to display on this screen, which is expected to be aligned to Center-End. It is recommended to use the Material3 ScrollIndicator which is provided by default. No scroll indicator is displayed if null is passed.

overscrollEffect: OverscrollEffect? = rememberOverscrollEffect()

the OverscrollEffect that will be used to render overscroll for this layout. This overscroll effect will be shared with all components within this ScreenScaffold such as edgeButton and scrollIndicator through LocalOverscrollFactory. If necessary, this behaviour can be disabled by passing overscrollEffect = null.

edgeButtonSpacing: Dp = ScreenScaffoldDefaults.EdgeButtonSpacing

The space between EdgeButton and the list content

content: @Composable BoxScope.(PaddingValues) -> Unit

The body content for this screen. The lambda receives a PaddingValues that should be applied to the content root via androidx.compose.foundation.layout.padding or contentPadding parameter when used with lists to properly offset the EdgeButton.

@Composable
fun ScreenScaffold(
    scrollState: ScalingLazyListState,
    edgeButton: @Composable BoxScope.() -> Unit,
    modifier: Modifier = Modifier,
    contentPadding: PaddingValues = ScreenScaffoldDefaults.contentPadding,
    timeText: (@Composable () -> Unit)? = null,
    scrollIndicator: (@Composable BoxScope.() -> Unit)? = { ScrollIndicator(scrollState) },
    edgeButtonSpacing: Dp = ScreenScaffoldDefaults.EdgeButtonSpacing,
    overscrollEffect: OverscrollEffect? = rememberOverscrollEffect(),
    content: @Composable BoxScope.(PaddingValues) -> Unit
): Unit

ScreenScaffold 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 should be at the top of the composition (because it provides ScaffoldState and layers TimeText on top of all other content) and ScreenScaffold should be part of AppScaffold's content. When used in conjunction with SwipeDismissableNavHost, AppScaffold remains at the top of the composition, whilst ScreenScaffold will be placed for each individual composable route.

ScreenScaffold displays the ScrollIndicator at the center-end of the screen by default and coordinates showing/hiding TimeText and ScrollIndicator according to scrollState.

This version of ScreenScaffold has a special slot for a button at the bottom, that grows and shrinks to take the available space after the scrollable content.

When using ScreenScaffold with EdgeButton and ScalingLazyColumn, you should pass autoCentering = null for the ScalingLazyColumn in order to achieve the correct spacing above the EdgeButton.

Example of using AppScaffold and ScreenScaffold with ScalingLazyColumn:

import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.gestures.scrollable
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.rememberOverscrollEffect
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.lazy.ScalingLazyColumn
import androidx.wear.compose.foundation.lazy.rememberScalingLazyListState
import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.EdgeButton
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.Text

// 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(modifier = Modifier.background(Color.Black)) {
    // 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,
    // showing/hiding/scrolling away TimeText and optionally hosting the EdgeButton.
    ScreenScaffold(
        scrollState = listState,
        // Define custom spacing between [EdgeButton] and [ScalingLazyColumn].
        edgeButtonSpacing = 15.dp,
        edgeButton = {
            EdgeButton(
                onClick = {},
                modifier =
                    // In case user starts scrolling from the EdgeButton.
                    Modifier.scrollable(
                        listState,
                        orientation = Orientation.Vertical,
                        reverseDirection = true,
                        // An overscroll effect should be applied to the EdgeButton for proper
                        // scrolling behavior.
                        overscrollEffect = rememberOverscrollEffect(),
                    ),
            ) {
                Text("Clear All")
            }
        },
    ) { contentPadding ->
        ScalingLazyColumn(
            state = listState,
            modifier = Modifier.fillMaxSize(),
            // Bottom spacing is derived from [ScreenScaffold.edgeButtonSpacing].
            contentPadding = contentPadding,
            autoCentering = null,
        ) {
            items(10) { Button(onClick = {}, label = { Text("Item ${it + 1}") }) }
        }
    }
}
Parameters
scrollState: ScalingLazyListState

The scroll state for ScalingLazyColumn, used to drive screen transitions such as TimeText scroll away and showing/hiding ScrollIndicator.

edgeButton: @Composable BoxScope.() -> Unit

Slot for an EdgeButton that takes the available space below a scrolling list. It will scale up and fade in when the user scrolls to the end of the list, and scale down and fade out as the user scrolls up.

modifier: Modifier = Modifier

The modifier for the screen scaffold.

contentPadding: PaddingValues = ScreenScaffoldDefaults.contentPadding

The padding to apply around the entire content. This contentPadding is then received by the content and should be consumed by using androidx.compose.foundation.layout.padding or contentPadding parameter of the lazy lists. The bottom padding value is always ignored because we instead use edgeButtonSpacing to specify the gap between edge button and content - and the EdgeButton hugs the bottom of the screen.

timeText: (@Composable () -> Unit)? = null

Time text (both time and potentially status message) for this screen, if different to the time text at the AppScaffold level. When null, the time text from the AppScaffold is displayed for this screen.

scrollIndicator: (@Composable BoxScope.() -> Unit)? = { ScrollIndicator(scrollState) }

The ScrollIndicator to display on this screen, which is expected to be aligned to Center-End. It is recommended to use the Material3 ScrollIndicator which is provided by default. No scroll indicator is displayed if null is passed.

edgeButtonSpacing: Dp = ScreenScaffoldDefaults.EdgeButtonSpacing

The space between EdgeButton and the list content

overscrollEffect: OverscrollEffect? = rememberOverscrollEffect()

the OverscrollEffect that will be used to render overscroll for this layout. This overscroll effect will be shared with all components within this ScreenScaffold such as edgeButton and scrollIndicator through LocalOverscrollFactory. If necessary, this behaviour can be disabled by passing overscrollEffect = null.

content: @Composable BoxScope.(PaddingValues) -> Unit

The body content for this screen. The lambda receives a PaddingValues that should be applied to the content root via androidx.compose.foundation.layout.padding or contentPadding parameter when used with lists to properly offset the EdgeButton.

@Composable
fun ScreenScaffold(
    scrollState: TransformingLazyColumnState,
    edgeButton: @Composable BoxScope.() -> Unit,
    modifier: Modifier = Modifier,
    contentPadding: PaddingValues = ScreenScaffoldDefaults.contentPadding,
    timeText: (@Composable () -> Unit)? = null,
    scrollIndicator: (@Composable BoxScope.() -> Unit)? = { ScrollIndicator(scrollState) },
    edgeButtonSpacing: Dp = ScreenScaffoldDefaults.EdgeButtonSpacing,
    overscrollEffect: OverscrollEffect? = rememberOverscrollEffect(),
    content: @Composable BoxScope.(PaddingValues) -> Unit
): Unit

ScreenScaffold 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 should be at the top of the composition (because it provides ScaffoldState and layers TimeText on top of all other content) and ScreenScaffold should be part of AppScaffold's content. When used in conjunction with SwipeDismissableNavHost, AppScaffold remains at the top of the composition, whilst ScreenScaffold will be placed for each individual composable route.

ScreenScaffold displays the ScrollIndicator at the center-end of the screen by default and coordinates showing/hiding TimeText and ScrollIndicator according to scrollState.

This version of ScreenScaffold has a special slot for a button at the bottom, that grows and shrinks to take the available space after the scrollable content.

Example of using AppScaffold and ScreenScaffold with TransformingLazyColumn:

import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.gestures.scrollable
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.rememberOverscrollEffect
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.lazy.ScalingLazyColumn
import androidx.wear.compose.foundation.lazy.TransformingLazyColumn
import androidx.wear.compose.foundation.lazy.rememberTransformingLazyColumnState
import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.EdgeButton
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.Text

// 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(modifier = Modifier.background(Color.Black)) {
    // Define the navigation hierarchy within the AppScaffold,
    // such as using SwipeDismissableNavHost.
    // For this sample, we will define a single screen inline.
    val listState = rememberTransformingLazyColumnState()
    // By default, ScreenScaffold will handle transitions showing/hiding ScrollIndicator,
    // showing/hiding/scrolling away TimeText and optionally hosting the EdgeButton.
    ScreenScaffold(
        scrollState = listState,
        // Define custom spacing between [EdgeButton] and [ScalingLazyColumn].
        edgeButtonSpacing = 15.dp,
        edgeButton = {
            EdgeButton(
                onClick = {},
                modifier =
                    // In case user starts scrolling from the EdgeButton.
                    Modifier.scrollable(
                        listState,
                        orientation = Orientation.Vertical,
                        reverseDirection = true,
                        // An overscroll effect should be applied to the EdgeButton for proper
                        // scrolling behavior.
                        overscrollEffect = rememberOverscrollEffect(),
                    ),
            ) {
                Text("Clear All")
            }
        },
    ) { contentPadding ->
        TransformingLazyColumn(
            state = listState,
            modifier = Modifier.fillMaxSize(),
            // Bottom spacing is derived from [ScreenScaffold.edgeButtonSpacing].
            contentPadding = contentPadding,
        ) {
            items(10) { Button(onClick = {}, label = { Text("Item ${it + 1}") }) }
        }
    }
}

Example of using ScreenScaffold with a EdgeButton:

import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.gestures.scrollable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.rememberOverscrollEffect
import androidx.compose.foundation.selection.selectableGroup
import androidx.compose.material.icons.filled.Check
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.lazy.ScalingLazyColumn
import androidx.wear.compose.foundation.lazy.rememberScalingLazyListState
import androidx.wear.compose.material3.ButtonDefaults
import androidx.wear.compose.material3.EdgeButton
import androidx.wear.compose.material3.EdgeButtonSize
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.RadioButton
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.samples.icons.CheckIcon

val state = rememberScalingLazyListState()
val horizontalPadding = LocalConfiguration.current.screenWidthDp.dp * 0.052f
val verticalPadding = LocalConfiguration.current.screenHeightDp.dp * 0.16f
val colors =
    listOf(
        "Filled" to ButtonDefaults.buttonColors(),
        "Filled Variant" to ButtonDefaults.filledVariantButtonColors(),
        "Filled Tonal" to ButtonDefaults.filledTonalButtonColors(),
        "Outlined" to ButtonDefaults.outlinedButtonColors(),
        "Disabled" to ButtonDefaults.buttonColors(),
    )
var selectedColor by remember { mutableIntStateOf(0) }
val types = listOf("Icon only" to 0, "Text only" to 1)
var selectedType by remember { mutableIntStateOf(0) }

ScreenScaffold(
    scrollState = state,
    contentPadding = PaddingValues(horizontal = horizontalPadding, vertical = verticalPadding),
    edgeButton = {
        EdgeButton(
            modifier =
                Modifier.scrollable(
                    state,
                    orientation = Orientation.Vertical,
                    reverseDirection = true,
                    // An overscroll effect should be applied to the EdgeButton for proper
                    // scrolling behavior.
                    overscrollEffect = rememberOverscrollEffect(),
                ),
            onClick = {},
            buttonSize = EdgeButtonSize.Medium,
            colors = colors[selectedColor].second,
            border =
                if (colors[selectedColor].first == "Outlined")
                    ButtonDefaults.outlinedButtonBorder(true)
                else null,
            enabled = colors[selectedColor].first != "Disabled",
        ) {
            if (selectedType == 0) {
                // Remove extra spacing around the icon so it integrates better into the scroll.
                CheckIcon(Modifier.size(21.dp).wrapContentSize(unbounded = true).size(32.dp))
            } else {
                Text("Ok")
            }
        }
    },
) { contentPadding ->
    ScalingLazyColumn(
        state = state,
        modifier = Modifier.fillMaxSize().selectableGroup(),
        autoCentering = null,
        contentPadding = contentPadding,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        item { Text("Color") }
        items(colors.size) { ix ->
            RadioButton(
                label = { Text(colors[ix].first) },
                selected = selectedColor == ix,
                onSelect = { selectedColor = ix },
                modifier = Modifier.fillMaxWidth(),
            )
        }
        item { Text("Type") }
        items(types.size) { ix ->
            RadioButton(
                label = { Text(types[ix].first) },
                selected = selectedType == ix,
                onSelect = { selectedType = ix },
                modifier = Modifier.fillMaxWidth(),
            )
        }
    }
}
Parameters
scrollState: TransformingLazyColumnState

The scroll state for TransformingLazyColumn, used to drive screen transitions such as TimeText scroll away and showing/hiding ScrollIndicator.

edgeButton: @Composable BoxScope.() -> Unit

Slot for an EdgeButton that takes the available space below a scrolling list. It will scale up and fade in when the user scrolls to the end of the list, and scale down and fade out as the user scrolls up.

modifier: Modifier = Modifier

The modifier for the screen scaffold.

contentPadding: PaddingValues = ScreenScaffoldDefaults.contentPadding

The padding to apply around the entire content. This contentPadding is then received by the content and should be consumed by using androidx.compose.foundation.layout.padding or contentPadding parameter of the lazy lists. The bottom padding value is always ignored because we instead use edgeButtonSpacing to specify the gap between edge button and content - and the EdgeButton hugs the bottom of the screen.

timeText: (@Composable () -> Unit)? = null

Time text (both time and potentially status message) for this screen, if different to the time text at the AppScaffold level. When null, the time text from the AppScaffold is displayed for this screen.

scrollIndicator: (@Composable BoxScope.() -> Unit)? = { ScrollIndicator(scrollState) }

The ScrollIndicator to display on this screen, which is expected to be aligned to Center-End. It is recommended to use the Material3 ScrollIndicator which is provided by default. No scroll indicator is displayed if null is passed.

edgeButtonSpacing: Dp = ScreenScaffoldDefaults.EdgeButtonSpacing

The space between EdgeButton and the list content

overscrollEffect: OverscrollEffect? = rememberOverscrollEffect()

the OverscrollEffect that will be used to render overscroll for this layout. This overscroll effect will be shared with all components within this ScreenScaffold such as edgeButton and scrollIndicator through LocalOverscrollFactory. If necessary, this behaviour can be disabled by passing overscrollEffect = null.

content: @Composable BoxScope.(PaddingValues) -> Unit

The body content for this screen. The lambda receives a PaddingValues that should be applied to the content root via androidx.compose.foundation.layout.padding or contentPadding parameter when used with lists to properly offset the EdgeButton.