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:
Kotlin
implementation("androidx.compose.material3.adaptive:adaptive") implementation("androidx.compose.material3.adaptive:adaptive-layout") implementation("androidx.compose.material3.adaptive:adaptive-navigation")
Groovig
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
undPosture
- 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() }
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 = { /*...*/ }, )
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") } }, )
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") } }
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() }, )