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. 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.

</ph> <ph type="x-smartling-placeholder">

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:

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 – 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()
}
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 (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 = { /*...*/ },
)
SampleSupportingPaneScaffold.kt

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")
        }
    },
)
SampleSupportingPaneScaffold.kt

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")
    }
}
SampleSupportingPaneScaffold.kt

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() },
)
SampleSupportingPaneScaffold.kt