Crea un layout per i riquadri di supporto

Il layout canonico del riquadro di supporto concentra l'attenzione degli utenti sugli elementi principali della tua app contenuti pertinenti, mostrando al contempo contenuti di supporto pertinenti. Ad esempio, l'elemento principale potrebbe mostrare informazioni su un film recente mentre il riquadro dei contenuti visualizza un elenco di altri film che hanno un tema simile o uguale registi o protagonisti attori. Per ulteriori informazioni sul riquadro di supporto layout canonico, consulta Linee guida per il riquadro di supporto del materiale 3.

Implementare un riquadro di supporto

SupportingPaneScaffold è composto da un massimo di tre riquadri: un riquadro principale, un riquadro di supporto e un riquadro aggiuntivo facoltativo. L'impalcatura gestisce tutti i calcoli per l'allocazione dello spazio delle finestre ai tre riquadri. Attivato schermi di grandi dimensioni, sullo scaffold è visualizzato il riquadro principale con il riquadro di supporto di lato. Su schermi di piccole dimensioni, lo scaffold mostra la parte principale o quella di supporto riquadro a schermo intero.

Aggiungi dipendenze

SupportingPaneScaffold fa parte di Libreria di layout adattivi di Material 3.

Aggiungi le seguenti tre dipendenze correlate al file build.gradle del tuo app o modulo:

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'

• Adattiva: componenti di base di basso livello come HingeInfo e Posture
• adaptive-layout: i layout adattivi, come SupportingPaneScaffold
• navigazione adattiva: elementi componibili per la navigazione all'interno di tra i riquadri

Crea un navigatore e uno scaffold

Nelle finestre piccole viene visualizzato un solo riquadro alla volta, quindi usa una ThreePaneScaffoldNavigator per spostarsi da e verso riquadri. Crea un'istanza del navigatore con rememberSupportingPaneScaffoldNavigator Per gestire i gesti Indietro, usa l'icona BackHandler che controlla canNavigateBack() e chiamate navigateBack():

val navigator = rememberSupportingPaneScaffoldNavigator()

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

Lo scaffold richiede una classe PaneScaffoldDirective, che controlla come dividere lo schermo, la distanza da utilizzare e un ThreePaneScaffoldValue, che fornisce lo stato attuale lo stato dei riquadri (ad esempio, se sono espansi o nascosti). Per impostazione predefinita comportamento, usa i tasti di navigazione scaffoldDirective e scaffoldValue rispettivamente:

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

Il riquadro principale e il riquadro di supporto sono componibili che contengono i tuoi contenuti. Utilizza le funzionalità di AnimatedPane per applicare le animazioni predefinite dei riquadri durante per la navigazione. Utilizza il valore dello scaffold per verificare se il riquadro di supporto è nascosto; In questo caso, mostra un pulsante che richiama navigateTo(ThreePaneScaffoldRole.Secondary) per visualizzare riquadro di supporto.

Di seguito è riportata un'implementazione completa dello scaffold:

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

Estrai riquadri componibili

Estrai i singoli riquadri di un SupportingPaneScaffold all'interno dei propri componibili per renderli riutilizzabili e testabili. Utilizza le funzionalità di ThreePaneScaffoldScope per accedere a AnimatedPane se vuoi le animazioni predefinite:

@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

L'estrazione dei riquadri in elementi componibili semplifica l'utilizzo del SupportingPaneScaffold (confronta quanto segue con l'implementazione completa) dello scaffold nella sezione precedente):

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