ExtendedPaneScaffoldPaneScope

Artifact: androidx.compose.material3.adaptive:adaptive-layout

View Source

Added in 1.1.0-alpha02

Common/All

• Cmn

  @ExperimentalMaterial3AdaptiveApi
  sealed interface ExtendedPaneScaffoldPaneScope<Role : Any?, ScaffoldValue : PaneScaffoldValue<Role>> : ExtendedPaneScaffoldScope, PaneScaffoldPaneScope

Known direct subclasses

ThreePaneScaffoldPaneScope

ThreePaneScaffoldPaneScope

Scope for the panes of ThreePaneScaffold.

---

Extended scope for the panes of pane scaffolds. All pane scaffolds will implement this interface to provide necessary info for panes to correctly render their content, motion, etc.

Parameters
<Role : Any?>	The type of roles that denotes panes in the associated pane scaffold.
<ScaffoldValue : PaneScaffoldValue<Role>>	The type of scaffold values that denotes the PaneAdaptedValues in the associated pane scaffold.

See also
ThreePaneScaffoldPaneScope
PaneScaffoldScope
PaneScaffoldMotionScope
PaneScaffoldTransitionScope
PaneScaffoldPaneScope
LookaheadScope

Summary

Extension functions
Unit	@ExperimentalMaterial3AdaptiveApi @Composable <S : Any?, T : PaneScaffoldValue<S>> ExtendedPaneScaffoldPaneScope<S, T>.AnimatedPane(     modifier: Modifier,     content: @Composable AnimatedPaneScope.() -> Unit ) The root composable of pane contents in a ThreePaneScaffold that supports default motions during pane switching.	Cmn

Inherited functions
From androidx.compose.ui.layout.LookaheadScope open Offset LayoutCoordinates.localLookaheadPositionOf(     sourceCoordinates: LayoutCoordinates,     relativeToSource: Offset,     includeMotionFrameOfReference: Boolean ) Converts relativeToSource in sourceCoordinates's lookahead coordinate space into local lookahead coordinates. Cmn LayoutCoordinates LayoutCoordinates.toLookaheadCoordinates() Converts a LayoutCoordinates into a LayoutCoordinates in the Lookahead coordinate space. Cmn
From androidx.compose.material3.adaptive.layout.PaneScaffoldScope Modifier Modifier.preferredWidth(width: Dp) This modifier specifies the preferred width for a pane, and the pane scaffold implementation will try its best to respect this width when the associated pane is rendered as a fixed pane, i.e., a pane that are not stretching to fill the remaining spaces. Cmn

Inherited properties
From androidx.compose.ui.layout.LookaheadScope LayoutCoordinates Placeable.PlacementScope.lookaheadScopeCoordinates Returns the LayoutCoordinates of the LookaheadScope. Cmn
From androidx.compose.material3.adaptive.layout.PaneScaffoldMotionScope FiniteAnimationSpec<IntOffset> delayedPositionAnimationSpec The delayed position animation spec of the associated pane to the scope. Cmn List<PaneMotionData> paneMotionDataList PaneMotionData of all panes in the scaffold corresponding to the scaffold's current state transition and motion settings, listed in panes' horizontal order. Cmn FiniteAnimationSpec<IntOffset> positionAnimationSpec The position animation spec of the associated pane to the scope. Cmn IntSize scaffoldSize The scaffold's current size. Cmn FiniteAnimationSpec<IntSize> sizeAnimationSpec The size animation spec of the associated pane to the scope. Cmn
From androidx.compose.material3.adaptive.layout.PaneScaffoldPaneScope PaneMotion paneMotion The specified pane motion of the current pane in the scope. Cmn Role paneRole The role of the current pane in the scope. Cmn
From androidx.compose.material3.adaptive.layout.PaneScaffoldTransitionScope Float motionProgress The current motion progress. Cmn Transition<ScaffoldValue> scaffoldStateTransition The current scaffold state transition between PaneScaffoldValues. Cmn

Extension functions

AnimatedPane

Cmn

Artifact: androidx.compose.material3.adaptive:adaptive-layout

View Source

@ExperimentalMaterial3AdaptiveApi
@Composable
fun <S : Any?, T : PaneScaffoldValue<S>> ExtendedPaneScaffoldPaneScope<S, T>.AnimatedPane(
    modifier: Modifier = Modifier,
    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.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.adaptive.layout.AnimatedPane
import androidx.compose.material3.adaptive.layout.ListDetailPaneScaffold
import androidx.compose.material3.adaptive.layout.ListDetailPaneScaffoldRole
import androidx.compose.material3.adaptive.navigation.rememberListDetailPaneScaffoldNavigator
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

val scaffoldNavigator = rememberListDetailPaneScaffoldNavigator()
ListDetailPaneScaffold(
    directive = scaffoldNavigator.scaffoldDirective,
    value = scaffoldNavigator.scaffoldValue,
    listPane = {
        AnimatedPane(
            modifier = Modifier.preferredWidth(200.dp),
        ) {
            Surface(
                color = MaterialTheme.colorScheme.secondary,
                onClick = { scaffoldNavigator.navigateTo(ListDetailPaneScaffoldRole.Detail) }
            ) {
                Text("List")
            }
        }
    },
    detailPane = {
        AnimatedPane(modifier = Modifier) {
            Surface(
                color = MaterialTheme.colorScheme.primary,
                onClick = { scaffoldNavigator.navigateBack() }
            ) {
                Text("Details")
            }
        }
    }
)

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.VerticalDivider
import androidx.compose.material3.adaptive.layout.AnimatedPane
import androidx.compose.material3.adaptive.layout.ListDetailPaneScaffold
import androidx.compose.material3.adaptive.layout.ListDetailPaneScaffoldRole
import androidx.compose.material3.adaptive.layout.PaneExpansionAnchor
import androidx.compose.material3.adaptive.layout.PaneExpansionDragHandle
import androidx.compose.material3.adaptive.layout.rememberPaneExpansionState
import androidx.compose.material3.adaptive.navigation.rememberListDetailPaneScaffoldNavigator
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

val scaffoldNavigator = rememberListDetailPaneScaffoldNavigator()
ListDetailPaneScaffold(
    directive = scaffoldNavigator.scaffoldDirective,
    value = scaffoldNavigator.scaffoldValue,
    listPane = {
        AnimatedPane(
            modifier = Modifier.preferredWidth(200.dp),
        ) {
            Surface(
                color = MaterialTheme.colorScheme.secondary,
                onClick = { scaffoldNavigator.navigateTo(ListDetailPaneScaffoldRole.Detail) }
            ) {
                Text("List")
            }
        }
    },
    detailPane = {
        AnimatedPane(modifier = Modifier) {
            Surface(
                color = MaterialTheme.colorScheme.primary,
            ) {
                Column(verticalArrangement = Arrangement.spacedBy(16.dp)) {
                    Text("Detail")
                    Row(
                        modifier = Modifier.fillMaxWidth().padding(horizontal = 4.dp),
                        horizontalArrangement = Arrangement.spacedBy(8.dp)
                    ) {
                        Surface(
                            onClick = { scaffoldNavigator.navigateBack() },
                            modifier = Modifier.weight(0.5f).fillMaxHeight(),
                            color = MaterialTheme.colorScheme.primary.copy(alpha = 0.8f)
                        ) {
                            Box(
                                modifier = Modifier.fillMaxSize(),
                                contentAlignment = Alignment.Center
                            ) {
                                Text("Previous")
                            }
                        }
                        VerticalDivider()
                        Surface(
                            onClick = {
                                scaffoldNavigator.navigateTo(ListDetailPaneScaffoldRole.Extra)
                            },
                            modifier = Modifier.weight(0.5f).fillMaxHeight(),
                            color = MaterialTheme.colorScheme.primary.copy(alpha = 0.6f)
                        ) {
                            Box(
                                modifier = Modifier.fillMaxSize(),
                                contentAlignment = Alignment.Center
                            ) {
                                Text("Next")
                            }
                        }
                    }
                }
            }
        }
    },
    extraPane = {
        AnimatedPane(modifier = Modifier.fillMaxSize()) {
            Surface(
                modifier = Modifier.fillMaxSize(),
                color = MaterialTheme.colorScheme.tertiary,
                onClick = { scaffoldNavigator.navigateBack() }
            ) {
                Text("Extra")
            }
        }
    },
    paneExpansionState =
        rememberPaneExpansionState(
            keyProvider = scaffoldNavigator.scaffoldValue,
            anchors = PaneExpansionAnchors
        ),
    paneExpansionDragHandle = { state ->
        PaneExpansionDragHandle(state = state, color = MaterialTheme.colorScheme.outline)
    }
)

Parameters
modifier: Modifier = Modifier	The modifier applied to the AnimatedPane.
content: @Composable AnimatedPaneScope.() -> Unit	The content of the AnimatedPane. Also see AnimatedPaneScope. See usage samples at: