Bei den meisten Apps gibt es einige Ziele der obersten Ebene, die über das die primäre Navigations-UI der App. In kompakten Fenstern, z. B. auf einem herkömmlichen Smartphone werden die Ziele üblicherweise in einer Navigationsleiste am unteren Rand des Fensters. In einem maximierten Fenster, etwa einer Vollbild-App auf einem ist normalerweise eine Navigationsschiene neben der App die bessere Wahl, da die Die Navigationsbedienelemente sind einfacher zu erreichen, wenn du die linke und rechte Seite gedrückt hältst des Geräts.
NavigationSuiteScaffold
vereinfacht den Wechsel
Navigations-UIs durch Anzeige der entsprechenden zusammensetzbaren Navigations-UI
basierend auf WindowSizeClass
. Dazu gehören dynamische
die Benutzeroberfläche während der
Größenänderung des Laufzeitfensters ändern. Das Standardverhalten ist
eine der folgenden UI-Komponenten anzeigen:
- Navigationsleiste, wenn die Breite oder Höhe kompakt ist oder sich das Gerät im Körperhaltung
- Navigationsstreifen für alles andere
![](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/adaptive/navigationsuitescaffold_with_nav_bar.png?authuser=9&hl=de)
NavigationSuiteScaffold
zeigt eine Navigationsleiste in kompakten Fenstern an.
![](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/adaptive/navigationsuitescaffold_with_nav_rail.png?authuser=9&hl=de)
NavigationSuiteScaffold
zeigt einen Navigationsstreifen in erweiterten Fenstern an.
Abhängigkeiten hinzufügen
NavigationSuiteScaffold
gehört zu
Material3 – adaptive Navigation – Suite
Bibliothek. Fügen Sie in der Datei build.gradle
Ihrer App eine Abhängigkeit für die Bibliothek hinzu
oder Modul:
Kotlin
implementation("androidx.compose.material3:material3-adaptive-navigation-suite")
Cool
implementation 'androidx.compose.material3:material3-adaptive-navigation-suite'
Gerüst erstellen
Die beiden Hauptbestandteile von NavigationSuiteScaffold
sind die Elemente der Navigationssuite.
und den Inhalt für das ausgewählte Ziel. Sie können den Parameter
Elemente der Navigationssuite in einer zusammensetzbaren Funktion zu erstellen.
an anderer Stelle, zum Beispiel in einer Aufzählung:
enum class AppDestinations( @StringRes val label: Int, val icon: ImageVector, @StringRes val contentDescription: Int ) { HOME(R.string.home, Icons.Default.Home, R.string.home), FAVORITES(R.string.favorites, Icons.Default.Favorite, R.string.favorites), SHOPPING(R.string.shopping, Icons.Default.ShoppingCart, R.string.shopping), PROFILE(R.string.profile, Icons.Default.AccountBox, R.string.profile), }
Wenn Sie NavigationSuiteScaffold
verwenden möchten, müssen Sie das aktuelle Ziel erfassen, das
können Sie rememberSaveable
verwenden:
var currentDestination by rememberSaveable { mutableStateOf(AppDestinations.HOME) }
Im folgenden Beispiel wird der Parameter navigationSuiteItems
(Typ
NavigationSuiteScope
verwendet die Funktion item
um die Navigations-UI für ein einzelnes Ziel zu definieren. Die Ziel-UI ist
für Navigationsleisten, Schienen und Schubladen. Zum Erstellen von Navigationselementen
Schleife über AppDestinations
(im vorherigen Snippet definiert):
NavigationSuiteScaffold( navigationSuiteItems = { AppDestinations.entries.forEach { item( icon = { Icon( it.icon, contentDescription = stringResource(it.contentDescription) ) }, label = { Text(stringResource(it.label)) }, selected = it == currentDestination, onClick = { currentDestination = it } ) } } ) { // TODO: Destination content. }
Verwende im Lambda des Zielinhalts den Wert currentDestination
, um
um zu entscheiden, welche
Benutzeroberfläche angezeigt werden soll. Wenn Sie in Ihrer App eine Navigationsbibliothek verwenden, nutzen Sie diese.
um das entsprechende Ziel anzuzeigen. Eine if-Anweisung kann ausreichen:
NavigationSuiteScaffold( navigationSuiteItems = { /*...*/ } ) { // Destination content. when (currentDestination) { AppDestinations.HOME -> HomeDestination() AppDestinations.FAVORITES -> FavoritesDestination() AppDestinations.SHOPPING -> ShoppingDestination() AppDestinations.PROFILE -> ProfileDestination() } }
Farben ändern
NavigationSuiteScaffold
erstellt ein Surface
für den gesamten Bereich
das Scaffold einnimmt, in der Regel das gesamte Fenster. Darüber hinaus muss das Gerüst
zeichnet die bestimmte Navigations-UI, z. B. NavigationBar
.
Sowohl für die Oberfläche als auch für die Navigations-UI werden die Werte verwendet, die im Feld
Design, aber Sie können die Werte
des Designs überschreiben.
Der Parameter containerColor
gibt die Farbe der Oberfläche an. Standardeinstellung
ist die Hintergrundfarbe Ihres Farbschemas. Der contentColor
-Parameter
gibt die Farbe des Inhalts auf dieser Oberfläche an. Die Standardeinstellung ist „An“. Farbe [color]
was für containerColor
angegeben ist. Beispiel: containerColor
verwendet die Farbe background
und contentColor
die Farbe onBackground
.
Siehe Material Design 3-Designs in Compose
finden Sie weitere Informationen zur Funktionsweise des Farbsystems. Wenn Sie diese Werte überschreiben,
Werte aus deinem Design verwenden, damit deine App dunkle und helle Displays unterstützt
Modi:
NavigationSuiteScaffold( navigationSuiteItems = { /* ... */ }, containerColor = MaterialTheme.colorScheme.primary, contentColor = MaterialTheme.colorScheme.onPrimary, ) { // Content... }
Die Navigations-UI wird vor der NavigationSuiteScaffold
-Oberfläche gezeichnet.
Die Standardwerte für die Farben der Benutzeroberfläche werden von
NavigationSuiteDefaults.colors()
, aber Sie
können diese Werte ebenfalls überschrieben werden. Wenn Sie z. B. möchten, dass der Hintergrund
in der Navigationsleiste transparent sein,
während die anderen Werte die Standardwerte sind.
navigationBarContainerColor
überschreiben:
NavigationSuiteScaffold( navigationSuiteItems = { /* ... */ }, navigationSuiteColors = NavigationSuiteDefaults.colors( navigationBarContainerColor = Color.Transparent, ) ) { // Content... }
Sie können jedes Element in der Navigations-UI individuell anpassen. Wenn Sie die Methode
item
können Sie eine Instanz von
NavigationSuiteItemColors
Die Klasse gibt an,
die Farben der Elemente in einer Navigationsleiste, in der Navigationsleiste und in
Leiste. Das bedeutet, dass Sie für jeden
Navigations-UI-Typ identische Farben haben können,
oder die Farben je nach Bedarf ändern. Definieren Sie die Farben im
NavigationSuiteScaffold
-Ebene, um dieselbe Objektinstanz für alle Elemente zu verwenden
und rufen Sie die Funktion NavigationSuiteDefaults.itemColors()
auf, um nur
die Sie ändern möchten:
val myNavigationSuiteItemColors = NavigationSuiteDefaults.itemColors( navigationBarItemColors = NavigationBarItemDefaults.colors( indicatorColor = MaterialTheme.colorScheme.primaryContainer, selectedIconColor = MaterialTheme.colorScheme.onPrimaryContainer ), ) NavigationSuiteScaffold( navigationSuiteItems = { AppDestinations.entries.forEach { item( icon = { Icon( it.icon, contentDescription = stringResource(it.contentDescription) ) }, label = { Text(stringResource(it.label)) }, selected = it == currentDestination, onClick = { currentDestination = it }, colors = myNavigationSuiteItemColors, ) } }, ) { // Content... }
Navigationstypen anpassen
Durch das Standardverhalten von NavigationSuiteScaffold
ändert sich die Navigations-UI
basierend auf der Fenstergröße
Klassen. Sie haben jedoch
dieses Verhalten überschreiben. Wenn in Ihrer App beispielsweise ein einzelnes
Content für einen Feed groß ist, könnte die App eine permanente Navigation
Leiste für maximierte Fenster ein, verwendet aber weiterhin das Standardverhalten für
Klassen für kompakte und mittlere Fenstergröße:
val adaptiveInfo = currentWindowAdaptiveInfo() val customNavSuiteType = with(adaptiveInfo) { if (windowSizeClass.windowWidthSizeClass == WindowWidthSizeClass.EXPANDED) { NavigationSuiteType.NavigationDrawer } else { NavigationSuiteScaffoldDefaults.calculateFromAdaptiveInfo(adaptiveInfo) } } NavigationSuiteScaffold( navigationSuiteItems = { /* ... */ }, layoutType = customNavSuiteType, ) { // Content... }
Weitere Informationen
Hier findest du die Material Design-Anleitung:
Sehen Sie sich die folgenden androidx.compose.material3
-Bibliothekskomponenten an: