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. als Regisseur oder Hauptdarsteller. 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. An
großen Bildschirmen zeigt das Gerüst den Hauptbereich mit dem unterstützenden Bereich
auf der Seite. Auf kleinen Bildschirmen zeigt das Gerüst entweder die Haupt- oder
Vollbild anzeigen.
![Die Hauptinhalte nehmen den größten Teil des Displays ein und ergänzende Inhalte.](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/adaptive/supporting-pane.png?authuser=9&hl=de)
Abhängigkeiten hinzufügen
SupportingPaneScaffold
gehört zu
Material 3-Bibliothek für adaptives Layout.
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
undPosture
- adaptive-layout – Die adaptiven Layouts wie
SupportingPaneScaffold
- adaptive-navigation – Composables zur Navigation innerhalb und zwischen Bereichen
Navigator und Gerüst 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() }
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 (wie etwa 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 = { /*...*/ }, )
Der Haupt- und der unterstützende Bereich sind zusammensetzbare Funktionen, 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 das unterstützende Fenster
ausgeblendet; Falls ja, zeigen Sie eine Schaltfläche an,
navigateTo(ThreePaneScaffoldRole.Secondary)
, um die
Supportbereich.
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") } }, )
Zusammensetzbare Funktionen des Bereichs extrahieren
Einzelne Bereiche eines SupportingPaneScaffold
-Objekts extrahieren
zusammensetzbar, um sie
wiederverwendbar und testbar zu machen. Verwenden Sie
ThreePaneScaffoldScope
für den Zugriff auf AnimatedPane
, wenn
Standardanimationen:
@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 der Funktion
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() }, )