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 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 de respaldo y un panel adicional opcional. El andamiaje controla todos los cálculos para asignar 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 parte principal o panel completo.

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'

• Adaptable: 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 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 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, y ThreePaneScaffoldValue, que proporciona la configuración estado 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 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")
        }
    },
)
SampleSupportingPaneScaffold.kt

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 si quieres usar 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

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