AnimatedPane

Functions summary

Unit
@ExperimentalMaterial3AdaptiveApi
@Composable
<RoleT : PaneScaffoldRole, ScaffoldValueT : PaneScaffoldValue<RoleT>> ExtendedPaneScaffoldPaneScope<RoleT, ScaffoldValueT>.AnimatedPane(
    modifier: Modifier,
    enterTransition: EnterTransition,
    exitTransition: ExitTransition,
    boundsAnimationSpec: FiniteAnimationSpec<IntRect>,
    dragToResizeHandle: (@Composable (DragToResizeState) -> Unit)?,
    content: @Composable AnimatedPaneScope.() -> Unit
)

The root composable of pane contents in a ThreePaneScaffold that supports default motions during pane switching.
Cmn

Functions

ExtendedPaneScaffoldPaneScope.AnimatedPane

Cmn 
@ExperimentalMaterial3AdaptiveApi
@Composable
fun <RoleT : PaneScaffoldRole, ScaffoldValueT : PaneScaffoldValue<RoleT>> ExtendedPaneScaffoldPaneScope<RoleT, ScaffoldValueT>.AnimatedPane(
    modifier: Modifier = Modifier,
    enterTransition: EnterTransition = motionDataProvider.calculateDefaultEnterTransition(paneRole),
    exitTransition: ExitTransition = motionDataProvider.calculateDefaultExitTransition(paneRole),
    boundsAnimationSpec: FiniteAnimationSpec<IntRect> = PaneMotionDefaults.AnimationSpec,
    dragToResizeHandle: (@Composable (DragToResizeState) -> Unit)? = null,
    content: @Composable AnimatedPaneScope.() -> Unit
): Unit

The root composable of pane contents in a ThreePaneScaffold that supports default motions during pane switching. It's recommended to use this composable to wrap your own contents when passing them into pane parameters of the scaffold functions, therefore your panes can have a nice default animation for free.

import androidx.compose.material3.Scaffold
import androidx.compose.material3.adaptive.layout.AnimatedPane
import androidx.compose.material3.adaptive.layout.ListDetailPaneScaffold
import androidx.compose.material3.adaptive.navigation.rememberListDetailPaneScaffoldNavigator
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

val coroutineScope = rememberCoroutineScope()
val scaffoldNavigator = rememberListDetailPaneScaffoldNavigator<NavItemData>()
val items = listOf("Item 1", "Item 2", "Item 3")
val selectedItem = scaffoldNavigator.currentDestination?.contentKey

ListDetailPaneScaffold(
    directive = scaffoldNavigator.scaffoldDirective,
    scaffoldState = scaffoldNavigator.scaffoldState,
    listPane = {
        AnimatedPane(modifier = Modifier.preferredWidth(200.dp)) {
            ListPaneContent(
                items = items,
                selectedItem = selectedItem,
                scaffoldNavigator = scaffoldNavigator,
                coroutineScope = coroutineScope,
            )
        }
    },
    detailPane = {
        AnimatedPane {
            DetailPaneContent(
                items = items,
                selectedItem = selectedItem,
                scaffoldNavigator = scaffoldNavigator,
                coroutineScope = coroutineScope,
            )
        }
    },
)
 
import androidx.compose.material3.Scaffold
import androidx.compose.material3.adaptive.layout.AnimatedPane
import androidx.compose.material3.adaptive.layout.ListDetailPaneScaffold
import androidx.compose.material3.adaptive.layout.PaneExpansionAnchor
import androidx.compose.material3.adaptive.layout.PaneExpansionState
import androidx.compose.material3.adaptive.layout.rememberPaneExpansionState
import androidx.compose.material3.adaptive.navigation.rememberListDetailPaneScaffoldNavigator
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

val coroutineScope = rememberCoroutineScope()
val scaffoldNavigator = rememberListDetailPaneScaffoldNavigator<NavItemData>()
val items = listOf("Item 1", "Item 2", "Item 3")
val extraItems = listOf("Extra 1", "Extra 2", "Extra 3")
val selectedItem = scaffoldNavigator.currentDestination?.contentKey

ListDetailPaneScaffold(
    directive = scaffoldNavigator.scaffoldDirective,
    scaffoldState = scaffoldNavigator.scaffoldState,
    listPane = {
        AnimatedPane(modifier = Modifier.preferredWidth(200.dp)) {
            ListPaneContent(
                items = items,
                selectedItem = selectedItem,
                scaffoldNavigator = scaffoldNavigator,
                coroutineScope = coroutineScope,
            )
        }
    },
    detailPane = {
        AnimatedPane {
            DetailPaneContent(
                items = items,
                selectedItem = selectedItem,
                scaffoldNavigator = scaffoldNavigator,
                hasExtraPane = true,
                coroutineScope = coroutineScope,
            )
        }
    },
    extraPane = {
        AnimatedPane {
            ExtraPaneContent(
                extraItems = extraItems,
                selectedItem = selectedItem,
                scaffoldNavigator = scaffoldNavigator,
                coroutineScope = coroutineScope,
            )
        }
    },
    paneExpansionState =
        rememberPaneExpansionState(
            keyProvider = scaffoldNavigator.scaffoldValue,
            anchors = PaneExpansionAnchors,
            initialAnchoredIndex = 1,
        ),
    paneExpansionDragHandle = { state -> PaneExpansionDragHandleSample(state) },
)
 
import androidx.compose.material3.Scaffold
import androidx.compose.material3.adaptive.layout.AnimatedPane
import androidx.compose.material3.adaptive.layout.ListDetailPaneScaffold
import androidx.compose.material3.adaptive.layout.PaneExpansionAnchor
import androidx.compose.material3.adaptive.layout.PaneExpansionState
import androidx.compose.material3.adaptive.layout.rememberPaneExpansionState
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

val coroutineScope = rememberCoroutineScope()
val scaffoldNavigator = levitateAsDialogSample<NavItemData>()
val items = listOf("Item 1", "Item 2", "Item 3")
val extraItems = listOf("Extra 1", "Extra 2", "Extra 3")
val selectedItem = scaffoldNavigator.currentDestination?.contentKey

ListDetailPaneScaffold(
    directive = scaffoldNavigator.scaffoldDirective,
    scaffoldState = scaffoldNavigator.scaffoldState,
    listPane = {
        AnimatedPane(modifier = Modifier.preferredWidth(200.dp)) {
            ListPaneContent(
                items = items,
                selectedItem = selectedItem,
                scaffoldNavigator = scaffoldNavigator,
                coroutineScope = coroutineScope,
            )
        }
    },
    detailPane = {
        AnimatedPane {
            DetailPaneContent(
                items = items,
                selectedItem = selectedItem,
                scaffoldNavigator = scaffoldNavigator,
                hasExtraPane = true,
                coroutineScope = coroutineScope,
            )
        }
    },
    extraPane = {
        AnimatedPane {
            ExtraPaneContent(
                extraItems = extraItems,
                selectedItem = selectedItem,
                scaffoldNavigator = scaffoldNavigator,
                coroutineScope = coroutineScope,
            )
        }
    },
    paneExpansionState =
        rememberPaneExpansionState(
            keyProvider = scaffoldNavigator.scaffoldValue,
            anchors = PaneExpansionAnchors,
            initialAnchoredIndex = 1,
        ),
    paneExpansionDragHandle = { state -> PaneExpansionDragHandleSample(state) },
)
 
import androidx.compose.material3.Scaffold
import androidx.compose.material3.adaptive.layout.AnimatedPane
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.rememberPaneExpansionState
import androidx.compose.material3.adaptive.navigation.rememberSupportingPaneScaffoldNavigator
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

val coroutineScope = rememberCoroutineScope()
val scaffoldNavigator = rememberSupportingPaneScaffoldNavigator<NavItemData>()
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 {
            ExtraPaneContent(
                extraItems = extraItems,
                selectedItem = selectedItem,
                scaffoldNavigator = scaffoldNavigator,
                coroutineScope = coroutineScope,
            )
        }
    },
    paneExpansionState =
        rememberPaneExpansionState(
            keyProvider = scaffoldNavigator.scaffoldValue,
            anchors = PaneExpansionAnchors,
        ),
    paneExpansionDragHandle = { state -> PaneExpansionDragHandleSample(state) },
)
 
import androidx.compose.foundation.background
import androidx.compose.material3.BottomSheetDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.adaptive.layout.AnimatedPane
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.rememberPaneExpansionState
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

val coroutineScope = rememberCoroutineScope()
val scaffoldNavigator = levitateAsBottomSheetSample<NavItemData>()
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(0.5f)
                    .background(MaterialTheme.colorScheme.surface),
            dragToResizeHandle = { BottomSheetDefaults.DragHandle() },
        ) {
            ExtraPaneContent(
                extraItems = extraItems,
                selectedItem = selectedItem,
                scaffoldNavigator = scaffoldNavigator,
                coroutineScope = coroutineScope,
            )
        }
    },
    paneExpansionState =
        rememberPaneExpansionState(
            keyProvider = scaffoldNavigator.scaffoldValue,
            anchors = PaneExpansionAnchors,
        ),
    paneExpansionDragHandle = { state -> PaneExpansionDragHandleSample(state) },
)
Parameters
modifier: Modifier = Modifier

The modifier applied to the AnimatedPane.
enterTransition: EnterTransition = motionDataProvider.calculateDefaultEnterTransition(paneRole)

The EnterTransition used to animate the pane in.
exitTransition: ExitTransition = motionDataProvider.calculateDefaultExitTransition(paneRole)

The ExitTransition used to animate the pane out.
boundsAnimationSpec: FiniteAnimationSpec<IntRect> = PaneMotionDefaults.AnimationSpec

The FiniteAnimationSpec used to animate the bounds of the pane when the pane is keeping showing but changing its size and/or position.
dragToResizeHandle: (@Composable (DragToResizeState) -> Unit)? = null

The optional handle which will shown when the pane is levitated and drag-to-resizable; the handle will be draggable and clickable to resize the pane freely or among collapsed, partially expanded, and expanded states. See rememberDragToResizeState for more details about how to implement the drag-to-resize behavior.
content: @Composable AnimatedPaneScope.() -> Unit

The content of the AnimatedPane. Also see AnimatedPaneScope.

See usage samples at: