Indicate the associated pane should be levitated when it's the current destination.

A levitated pane will be rendered above other panes in the pane scaffold like a pop-up or a sheet (for example, as a bottom sheet or a side sheet.) A scrim can be provided to block interaction with the underlying panes.

With the default calculateThreePaneScaffoldValue we provide, a pane with a levitate strategy will be adapted to either:

  1. PaneAdaptedValue.Levitated with specified alignment, when the levitated pane is the current destination; or

  2. PaneAdaptedValue.Hidden otherwise.

import androidx.compose.material3.Scaffold
import androidx.compose.material3.adaptive.currentWindowAdaptiveInfo
import androidx.compose.material3.adaptive.layout.AdaptStrategy
import androidx.compose.material3.adaptive.layout.ListDetailPaneScaffold
import androidx.compose.material3.adaptive.layout.ListDetailPaneScaffoldDefaults
import androidx.compose.material3.adaptive.layout.Scrim
import androidx.compose.material3.adaptive.layout.calculatePaneScaffoldDirective
import androidx.compose.material3.adaptive.navigation.ThreePaneScaffoldNavigator
import androidx.compose.material3.adaptive.navigation.rememberListDetailPaneScaffoldNavigator
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment

val coroutineScope = rememberCoroutineScope()
val scaffoldDirective = calculatePaneScaffoldDirective(currentWindowAdaptiveInfo())
var navigator: ThreePaneScaffoldNavigator<T>? = null
navigator =
    rememberListDetailPaneScaffoldNavigator<T>(
        scaffoldDirective = scaffoldDirective,
        adaptStrategies =
            ListDetailPaneScaffoldDefaults.adaptStrategies(
                extraPaneAdaptStrategy =
                    AdaptStrategy.Levitate(
                            alignment = Alignment.Center,
                            scrim =
                                Scrim(
                                    onClick = {
                                        coroutineScope.launch { navigator?.navigateBack() }
                                    }
                                ),
                        )
                        .onlyIfSinglePane(scaffoldDirective)
            ),
    )
return navigator
import androidx.compose.material3.Scaffold
import androidx.compose.material3.adaptive.currentWindowAdaptiveInfo
import androidx.compose.material3.adaptive.layout.AdaptStrategy
import androidx.compose.material3.adaptive.layout.AnimatedPane
import androidx.compose.material3.adaptive.layout.DockedEdge
import androidx.compose.material3.adaptive.layout.PaneExpansionAnchor
import androidx.compose.material3.adaptive.layout.PaneExpansionState
import androidx.compose.material3.adaptive.layout.SupportingPaneScaffold
import androidx.compose.material3.adaptive.layout.SupportingPaneScaffoldDefaults
import androidx.compose.material3.adaptive.layout.calculatePaneScaffoldDirective
import androidx.compose.material3.adaptive.layout.rememberDragToResizeState
import androidx.compose.material3.adaptive.layout.rememberPaneExpansionState
import androidx.compose.material3.adaptive.navigation.rememberSupportingPaneScaffoldNavigator
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

val coroutineScope = rememberCoroutineScope()
val scaffoldDirective = calculatePaneScaffoldDirective(currentWindowAdaptiveInfo())
val scaffoldNavigator =
    rememberSupportingPaneScaffoldNavigator<NavItemData>(
        scaffoldDirective = scaffoldDirective,
        adaptStrategies =
            SupportingPaneScaffoldDefaults.adaptStrategies(
                extraPaneAdaptStrategy =
                    AdaptStrategy.Levitate(alignment = Alignment.BottomCenter)
                        .onlyIfSinglePane(scaffoldDirective)
            ),
    )
val extraItems = listOf("Extra content")
val selectedItem = NavItemData(index = 0, showExtra = true)

SupportingPaneScaffold(
    directive = scaffoldNavigator.scaffoldDirective,
    scaffoldState = scaffoldNavigator.scaffoldState,
    mainPane = {
        AnimatedPane {
            MainPaneContent(
                scaffoldNavigator = scaffoldNavigator,
                hasExtraPane = true,
                coroutineScope = coroutineScope,
            )
        }
    },
    supportingPane = {
        AnimatedPane(modifier = Modifier.preferredWidth(200.dp)) { SupportingPaneContent() }
    },
    extraPane = {
        AnimatedPane(
            modifier =
                Modifier.preferredWidth(1f)
                    .preferredHeight(412.dp)
                    .dragToResize(rememberDragToResizeState(dockedEdge = DockedEdge.Bottom))
        ) {
            ExtraPaneContent(
                extraItems = extraItems,
                selectedItem = selectedItem,
                scaffoldNavigator = scaffoldNavigator,
                coroutineScope = coroutineScope,
            )
        }
    },
    paneExpansionState =
        rememberPaneExpansionState(
            keyProvider = scaffoldNavigator.scaffoldValue,
            anchors = PaneExpansionAnchors,
        ),
    paneExpansionDragHandle => { state - PaneExpansionDragHandleSample(state) },
)
See also
onlyIf

and onlyIfSinglePane for finer control over when the pane should be levitated.

Summary

Public constructors

Levitate(alignment: Alignment, scrim: Scrim?)
Cmn

Public functions

open operator Boolean
equals(other: Any?)
Cmn
open Int
Cmn
AdaptStrategy

This is a convenient function to only levitate the associated pane when the provided condition is met.

Cmn
AdaptStrategy

This is a convenient function to only levitate the associated pane when it's a single-pane layout.

Cmn
open String
Cmn

Inherited functions

From androidx.compose.material3.adaptive.layout.AdaptStrategy
open PaneAdaptedValue

This function is deprecated. This function is deprecated in favor of directly using the info carried by the strategy instances to make adaptation decisions.

Cmn

Public constructors

Levitate

Levitate(alignment: Alignment = Alignment.Center, scrim: Scrim? = null)
Parameters
alignment: Alignment = Alignment.Center

the alignment of the associated pane when it's levitated, relatively to the pane scaffold.

scrim: Scrim? = null

the scrim to show when the pane is levitated to block user interaction with the underlying layout and emphasize the levitated pane; by default it will be null and no scrim will show.

Public functions

equals

open operator fun equals(other: Any?): Boolean

hashCode

open fun hashCode(): Int

onlyIf

@Composable
fun onlyIf(condition: Boolean): AdaptStrategy

This is a convenient function to only levitate the associated pane when the provided condition is met. If the condition is not met, the pane will be expanded instead, if there's enough room; otherwise it will be hidden.

See also
onlyIfSinglePane

onlyIfSinglePane

@Composable
fun onlyIfSinglePane(scaffoldDirective: PaneScaffoldDirective): AdaptStrategy

This is a convenient function to only levitate the associated pane when it's a single-pane layout. On multi-pane layouts, the pane will be expanded instead, if it's one of the recent destinations.

toString

open fun toString(): String