Layout mit unterstützendem Bereich erstellen

Das kanonische Layout des unterstützenden Bereichs lenkt die Aufmerksamkeit der Nutzer auf den Hauptinhalt deiner App und zeigt gleichzeitig relevante unterstützende Inhalte an. Im Hauptinhaltsbereich können beispielsweise Informationen zu einem aktuellen Film angezeigt werden, während im zusätzlichen Bereich eine Liste anderer Filme zu einem ähnlichen Thema oder zum selben Regisseur oder mit denselben Schauspielern angezeigt wird. Weitere Informationen zum kanonischen Layout des unterstützenden Bereichs finden Sie in den Richtlinien für unterstützende Bereiche.

Unterstützungsbereich implementieren

SupportingPaneScaffold besteht aus bis zu drei Bereichen: einem Hauptbereich, einem unterstützenden Bereich und einem optionalen zusätzlichen Bereich. Das Gerüst übernimmt alle Berechnungen für die Zuweisung von Fensterfläche zu den drei Bereichen. Auf großen Bildschirmen wird auf dem Scaffold der Hauptbereich mit dem unterstützenden Bereich an der Seite angezeigt. Auf kleinen Bildschirmen wird entweder der Haupt- oder der unterstützende Bereich im Vollbildmodus angezeigt.

Abhängigkeiten hinzufügen

SupportingPaneScaffold ist Teil der Bibliothek für adaptives Layout von Material 3.

Fügen Sie der Datei build.gradle Ihrer Anwendung oder Ihres Moduls die folgenden drei zugehörigen Abhängigkeiten hinzu:

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'

• adaptiv – untergeordnete Bausteine wie HingeInfo und Posture
• adaptive-layout: die adaptiven Layouts, z. B. SupportingPaneScaffold
• adaptive-navigation: zusammensetzbare Funktionen zum Navigieren in und zwischen Bereichen

Navigator und Gerüst erstellen

In kleinen Fenstern wird immer nur ein Bereich angezeigt. Verwenden Sie also ThreePaneScaffoldNavigator, um zwischen den Fenstern zu wechseln und sie wieder zu verlassen. Erstellen Sie mit rememberSupportingPaneScaffoldNavigator eine Instanz des Navigators. Verwende zum Verarbeiten von Touch-Gesten zum Zurückgehen ein BackHandler, das canNavigateBack() prüft und navigateBack() aufruft:

val navigator = rememberSupportingPaneScaffoldNavigator()

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

Für das Gerüst ist ein PaneScaffoldDirective erforderlich, das festlegt, wie der Bildschirm aufgeteilt wird und wie viel Abstand verwendet werden soll. Ein ThreePaneScaffoldValue gibt den aktuellen Status der Bereiche an, z. B. ob sie maximiert oder ausgeblendet sind. Für das Standardverhalten verwenden Sie den scaffoldDirective bzw. scaffoldValue des Navigators:

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

Der Hauptbereich und der unterstützende Bereich sind zusammensetzbare Funktionen, die Ihren Inhalt enthalten. Verwenden Sie AnimatedPane, um die Animationen des Standardbereichs während der Navigation anzuwenden. Prüfen Sie anhand des Scaffold-Werts, ob der unterstützende Bereich ausgeblendet ist. Ist dies der Fall, rufen Sie eine Schaltfläche auf, mit der navigateTo(ThreePaneScaffoldRole.Secondary) aufgerufen wird, um den unterstützenden Bereich anzuzeigen.

Hier ist 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 extrahieren

Extrahieren Sie die einzelnen Bereiche einer SupportingPaneScaffold in eigene zusammensetzbare Funktionen, um sie wiederverwendbar und testbar zu machen. Mit ThreePaneScaffoldScope können Sie auf AnimatedPane zugreifen, 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

Das Extrahieren der Bereiche in zusammensetzbare Funktionen vereinfacht die Verwendung von SupportingPaneScaffold (vergleichen Sie Folgendes mit der vollständigen Implementierung des Gerüsts 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