Layout mit unterstützendem Bereich erstellen

Das kanonische Layout des unterstützenden Bereichs lenkt die Aufmerksamkeit der Nutzer auf den Hauptbereich Ihrer App. und relevante unterstützende Inhalte präsentieren. Zum Beispiel hat die Im Inhaltsbereich werden unter Umständen Informationen zu einem aktuellen Film angezeigt, während die unterstützenden zeigt eine Liste anderer Filme mit ähnlichen oder ähnlichen Themen an. Regisseure oder Schauspieler. Weitere Informationen zum Supportbereich kanonisches Layout, siehe Richtlinien für Material 3-Unterstützung.

Supportbereich implementieren

SupportingPaneScaffold besteht aus bis zu drei Bereiche: ein Hauptbereich, ein unterstützender Bereich und ein optionaler zusätzlicher Bereich. Das Gerüst alle Berechnungen für die Zuweisung von Fensterflächen zu den drei Fenstern. Auf großen Bildschirmen wird im Scaffolding der Hauptbereich mit dem unterstützenden Bereich daneben angezeigt. Auf kleinen Bildschirmen zeigt das Scaffold entweder die Haupt- oder Vollbild anzeigen.

Abbildung 1: Unterstützendes Bereichslayout.

Abhängigkeiten hinzufügen

SupportingPaneScaffold ist Teil der Material 3-Bibliothek für adaptive Layouts.

Fügen Sie die folgenden drei zusammengehörigen Abhängigkeiten in die Datei build.gradle Ihres App oder Modul:

Kotlin

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

Cool

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

• adaptive – Low-Level-Bausteine wie HingeInfo und Posture
• adaptive-layout – Die adaptiven Layouts wie SupportingPaneScaffold
• adaptive-navigation: Composeables für die Navigation innerhalb und zwischen Bereichen

Navigationsleiste und Scaffold erstellen

In kleinen Fenstern wird jeweils nur ein Bereich angezeigt. Verwenden Sie daher ThreePaneScaffoldNavigator zum Wechseln zwischen Bereiche. Navigator-Instanz erstellen mit rememberSupportingPaneScaffoldNavigator Zum Verarbeiten von „Zurück“-Touch-Gesten verwenden Sie einen BackHandler, der canNavigateBack() und Anrufe navigateBack():

val navigator = rememberSupportingPaneScaffoldNavigator()

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

Das Scaffold erfordert ein PaneScaffoldDirective, das legt fest, wie der Bildschirm geteilt wird und wie viel Abstand verwendet werden soll. ThreePaneScaffoldValue mit dem aktuellen der Bereiche angezeigt (z. B. maximiert oder ausgeblendet). Für den Standardwert Verhalten haben, verwenden Sie die Symbole scaffoldDirective und Entsprechend scaffoldValue:

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

Der Hauptbereich und der unterstützende Bereich sind Composeables, die Ihre Inhalte enthalten. Verwenden Sie AnimatedPane, um die Standardanimationen für Bereiche anzuwenden, Navigation. Verwenden Sie den Scaffold-Wert, um zu prüfen, ob der unterstützende Bereich ausgeblendet ist. Falls ja, zeigen Sie eine Schaltfläche an, die navigateTo(ThreePaneScaffoldRole.Secondary) aufruft, um den unterstützenden Bereich einzublenden.

Hier sehen Sie eine vollständige Implementierung des Scaffolds:

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

Zusammensetzbare Funktionen des Bereichs extrahieren

Einzelne Bereiche eines SupportingPaneScaffold-Objekts extrahieren zusammensetzbar, um sie wiederverwendbar und testbar zu machen. Verwenden Sie ThreePaneScaffoldScope, um auf AnimatedPane zuzugreifen, wenn Sie die Standardanimationen verwenden möchten:

@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

Wenn Sie die Bereiche in Composeables extrahieren, wird die Verwendung von SupportingPaneScaffold vereinfacht. Vergleichen Sie dazu die folgende Abbildung mit der vollständigen Implementierung des Scaffolds im vorherigen Abschnitt:

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