El diseño canónico del panel complementario enfoca la atención del usuario en la parte principal de tu app contenido y, al mismo tiempo, mostrar contenido complementario relevante. Por ejemplo, el principal el panel de contenido podría mostrar información sobre una película reciente, mientras que el panel muestra una lista de otras películas que tienen un tema similar o igual director o protagonizado por actores. Para obtener más información sobre el panel complementario diseño canónico, consulta la Lineamientos sobre el panel complementario de Material 3.
Implementa un panel complementario
SupportingPaneScaffold
consta de hasta tres
paneles: un panel principal, un panel complementario y un panel adicional opcional. El andamiaje
controla todos los cálculos para asignar el espacio de ventana a los tres paneles. Activada
en pantallas grandes, el andamiaje muestra el panel principal con el panel complementario activado
desde un lado. En pantallas pequeñas, el andamiaje muestra la página principal o de apoyo
panel completo.
![Contenido principal que ocupa la mayor parte de la pantalla junto con contenido complementario.](https://developer.android.com/static/develop/ui/compose/images/layouts/adaptive/supporting-pane.png?authuser=19&hl=es)
Cómo agregar dependencias
SupportingPaneScaffold
es parte del
Biblioteca de diseño adaptable de Material 3.
Agrega las siguientes tres dependencias relacionadas al archivo build.gradle
de tu
app o módulo:
Kotlin
implementation("androidx.compose.material3.adaptive:adaptive") implementation("androidx.compose.material3.adaptive:adaptive-layout") implementation("androidx.compose.material3.adaptive:adaptive-navigation")
Groovy
implementation 'androidx.compose.material3.adaptive:adaptive' implementation 'androidx.compose.material3.adaptive:adaptive-layout' implementation 'androidx.compose.material3.adaptive:adaptive-navigation'
- adaptable: componentes básicos de bajo nivel, como
HingeInfo
yPosture
- adaptive-layout: los diseños adaptables, como
SupportingPaneScaffold
- adaptive-navigation: Elementos que admiten composición para navegar dentro y entre paneles
Crea un navegador y un andamiaje
En ventanas pequeñas, solo se muestra un panel a la vez, así que usa
ThreePaneScaffoldNavigator
para moverte hacia y desde
paneles. Crea una instancia del navegador con
rememberSupportingPaneScaffoldNavigator
Para controlar los gestos de retroceso, usa un BackHandler
que verifique.
canNavigateBack()
y llamadas
navigateBack()
:
val navigator = rememberSupportingPaneScaffoldNavigator() BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() }
El andamiaje requiere un elemento PaneScaffoldDirective
, que
controla cómo dividir la pantalla y el espaciado, y
ThreePaneScaffoldValue
, que proporciona la configuración
estado de los paneles (por ejemplo, si están ocultos o expandidos). Para la configuración predeterminada
comportamiento, usa el elemento scaffoldDirective
del navegador y
scaffoldValue
, respectivamente:
SupportingPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, mainPane = { /*...*/ }, supportingPane = { /*...*/ }, )
El panel principal y el panel complementario son elementos componibles que incluyen tu contenido. Usa
AnimatedPane
para aplicar las animaciones de panel predeterminadas durante
la navegación. Usa el valor de Scaffold para verificar si el panel complementario está
oculto; Si es así, muestra un botón que llame.
navigateTo(ThreePaneScaffoldRole.Secondary)
para mostrar la
panel complementario.
Esta es una implementación completa del andamiaje:
val navigator = rememberSupportingPaneScaffoldNavigator() BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() } SupportingPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, mainPane = { AnimatedPane(modifier = Modifier.safeContentPadding()) { // Main pane content if (navigator.scaffoldValue[SupportingPaneScaffoldRole.Supporting] == PaneAdaptedValue.Hidden) { Button( modifier = Modifier.wrapContentSize(), onClick = { navigator.navigateTo(SupportingPaneScaffoldRole.Supporting) } ) { Text("Show supporting pane") } } else { Text("Supporting pane is shown") } } }, supportingPane = { AnimatedPane(modifier = Modifier.safeContentPadding()) { // Supporting pane content Text("Supporting pane") } }, )
Extraer elementos componibles del panel
Extraer los paneles individuales de un SupportingPaneScaffold
en su propio panel
componibles para que sean reutilizables y comprobables. Usa
ThreePaneScaffoldScope
para acceder a AnimatedPane
si
deseas las animaciones predeterminadas:
@Composable fun ThreePaneScaffoldScope.MainPane( shouldShowSupportingPaneButton: Boolean, onNavigateToSupportingPane: () -> Unit, modifier: Modifier = Modifier, ) { AnimatedPane(modifier = modifier.safeContentPadding()) { // Main pane content if (shouldShowSupportingPaneButton) { Button(onClick = onNavigateToSupportingPane) { Text("Show supporting pane") } } else { Text("Supporting pane is shown") } } } @Composable fun ThreePaneScaffoldScope.SupportingPane( modifier: Modifier = Modifier, ) { AnimatedPane(modifier = modifier.safeContentPadding()) { // Supporting pane content Text("This is the supporting pane") } }
La extracción de los paneles en elementos componibles simplifica el uso del
SupportingPaneScaffold
(compara lo siguiente con la implementación completa
del andamiaje de la sección anterior):
val navigator = rememberSupportingPaneScaffoldNavigator() BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() } SupportingPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, mainPane = { MainPane( shouldShowSupportingPaneButton = navigator.scaffoldValue.secondary == PaneAdaptedValue.Hidden, onNavigateToSupportingPane = { navigator.navigateTo(ThreePaneScaffoldRole.Secondary) } ) }, supportingPane = { SupportingPane() }, )