Layout mit unterstützendem Bereich erstellen

Im kanonischen Layout des Bereichs mit ergänzenden Inhalten wird die Aufmerksamkeit der Nutzer auf die Hauptinhalte Ihrer App gelenkt und gleichzeitig relevante ergänzende Inhalte angezeigt. Im Hauptinhaltsbereich können beispielsweise Informationen zu einem aktuellen Film angezeigt werden, während im sekundären Bereich eine Liste anderer Filme mit einem ähnlichen Thema oder demselben Regisseur oder denselben Hauptdarstellern angezeigt wird. Weitere Informationen zum kanonischen Layout für Bereiche, die von Material 3 unterstützt werden, finden Sie in den Richtlinien für unterstützende Fenster.

Ein unterstützender Bereich

SupportingPaneScaffold besteht aus bis zu drei Bereichen: einem Hauptbereich, einem unterstützenden Bereich und einem optionalen zusätzlichen Bereich. Das Scaffolding übernimmt alle Berechnungen für die Zuweisung von Fensterbereich an die drei Bereiche. Auf großen Bildschirmen wird im Scaffolding der Hauptbereich mit dem unterstützenden Bereich daneben angezeigt. Auf kleinen Bildschirmen wird im Scaffolding entweder der Haupt- oder der sekundäre Bereich im Vollbildmodus angezeigt.

Abhängigkeiten hinzufügen

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

Fügen Sie der build.gradle-Datei Ihrer App 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'

• 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 immer nur ein Bereich angezeigt. Verwenden Sie die Taste ThreePaneScaffoldNavigator, um zwischen den Bereichen zu wechseln. Erstellen Sie mit rememberSupportingPaneScaffoldNavigator eine Instanz des Navigationsmenüs. Verwenden Sie zum Verarbeiten von Zurück-Gesten eine BackHandler, die canNavigateBack() prüft und navigateBack() aufruft:

val navigator = rememberSupportingPaneScaffoldNavigator()

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

Für das Scaffold ist ein PaneScaffoldDirective erforderlich, das steuert, wie der Bildschirm aufgeteilt wird und wie viel Abstand verwendet werden soll, sowie einen ThreePaneScaffoldValue, der den aktuellen Status der Bereiche liefert (z. B. ob sie maximiert oder ausgeblendet sind). Verwenden Sie für das Standardverhalten scaffoldDirective bzw. scaffoldValue des Navigators:

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 Standardfensteranimationen während der Navigation anzuwenden. Verwenden Sie den Scaffold-Wert, um zu prüfen, ob der Supportbereich ausgeblendet ist. Falls ja, zeigen Sie eine Schaltfläche an, die navigateTo(ThreePaneScaffoldRole.Secondary) aufruft, um den Supportbereich einzublenden.

Hier sehen Sie eine vollständige Implementierung des 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

Bereich „Kompositelemente“ extrahieren

Extrahieren Sie die einzelnen Bereiche einer SupportingPaneScaffold in eigene Kompositionen, damit sie wiederverwendbar und testbar sind. 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

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