Cómo compilar el diseño de un panel complementario

El diseño canónico del panel complementario enfoca la atención del usuario en el contenido principal de la app y, al mismo tiempo, muestra contenido complementario relevante. Por ejemplo, el panel de contenido principal podría mostrar información sobre una película reciente, mientras que el panel complementario muestra una lista de otras películas que tienen un tema similar o el mismo director o actores principales. Para obtener más información sobre el diseño canónico del panel lateral, consulta los lineamientos del panel lateral de Material 3.

Implementa un panel complementario

SupportingPaneScaffold consta de hasta tres paneles: un panel principal, un panel de respaldo y un panel adicional opcional. El andamiaje controla todos los cálculos para asignar espacio de ventana a los tres paneles. En pantallas grandes, el andamiaje muestra el panel principal con el panel complementario al costado. En pantallas pequeñas, el andamiaje muestra la pantalla completa del panel principal o complementario.

Cómo agregar dependencias

SupportingPaneScaffold forma parte de la biblioteca de diseño adaptable de Material 3.

Agrega las siguientes tres dependencias relacionadas al archivo build.gradle de tu app o módulo:

implementation("androidx.compose.material3.adaptive:adaptive")
implementation("androidx.compose.material3.adaptive:adaptive-layout")
implementation("androidx.compose.material3.adaptive:adaptive-navigation")

implementation 'androidx.compose.material3.adaptive:adaptive'
implementation 'androidx.compose.material3.adaptive:adaptive-layout'
implementation 'androidx.compose.material3.adaptive:adaptive-navigation'

• adaptativos: Componentes básicos de bajo nivel, como HingeInfo y Posture
• adaptive-layout: los diseños adaptables, como SupportingPaneScaffold
• adaptive-navigation: Elementos que admiten composición para navegar dentro de paneles y entre paneles

Crea un navegador y un andamiaje

En ventanas pequeñas, solo se muestra un panel a la vez, por lo que debes usar un ThreePaneScaffoldNavigator para moverte entre los paneles. Crea una instancia del navegador con rememberSupportingPaneScaffoldNavigator. Para controlar los gestos atrás, usa un BackHandler que verifique canNavigateBack() y llame a navigateBack():

val navigator = rememberSupportingPaneScaffoldNavigator()

BackHandler(navigator.canNavigateBack()) {
    navigator.navigateBack()
}
SampleSupportingPaneScaffold.kt

El andamiaje requiere un elemento PaneScaffoldDirective, que controla cómo dividir la pantalla y el espaciado que se debe usar, y un ThreePaneScaffoldValue, que proporciona el estado actual de los paneles (por ejemplo, si están ocultos o expandidos). Para el comportamiento predeterminado, usa scaffoldDirective y scaffoldValue del navegador, respectivamente:

SupportingPaneScaffold(
    directive = navigator.scaffoldDirective,
    value = navigator.scaffoldValue,
    mainPane = { /*...*/ },
    supportingPane = { /*...*/ },
)
SampleSupportingPaneScaffold.kt

El panel principal y el panel complementario son elementos componibles que contienen tu contenido. Usa AnimatedPane para aplicar las animaciones de panel predeterminadas durante la navegación. Usa el valor del andamiaje para verificar si el panel de ayuda está oculto. Si es así, muestra un botón que llame a navigateTo(ThreePaneScaffoldRole.Secondary) para mostrar el panel de ayuda.

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")
        }
    },
)
SampleSupportingPaneScaffold.kt

Extraer elementos componibles del panel

Extrae los paneles individuales de una SupportingPaneScaffold en sus propios elementos componibles para que se puedan reutilizar y probar. Usa ThreePaneScaffoldScope para acceder a AnimatedPane si quieres 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")
    }
}
SampleSupportingPaneScaffold.kt

Extraer los paneles en elementos componibles simplifica el uso de SupportingPaneScaffold (compara lo siguiente con la implementación completa del andamiaje en 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() },
)
SampleSupportingPaneScaffold.kt