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 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.

Figura 1: Diseño de panel complementario

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 y Posture
• adaptive-layout: los diseños adaptables, como SupportingPaneScaffold
• adaptive-navigation: Elementos que admiten composición para navegar dentro y entre paneles

Nota: Los elementos adaptive, adaptive-layout y adaptive-navigation de Material3 las bibliotecas están en versión beta.

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()
}
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 la configuración predeterminada comportamiento, usa el elemento scaffoldDirective del navegador y scaffoldValue, respectivamente:

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

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