Navigationsleiste

Rails bieten Zugriff auf Ziele in Apps, die auf Geräten mit großen Bildschirmen ausgeführt werden. Navigationsleisten sollten Sie in folgenden Fällen verwenden:

  • Ziele auf oberster Ebene, auf die überall in einer App zugegriffen werden muss
  • Drei bis sieben Hauptziele
  • Tablet- oder Desktop-Layouts
Eine vertikale Navigationsleiste auf der linken Seite eines Bildschirms mit vier Zielen (Alle Dateien, Kürzlich, Fotos und Bibliothek), jeweils mit einem zugehörigen Symbol, und einer schwebenden Aktionsschaltfläche.
Abbildung 1: Eine Navigationsleiste mit vier Zielen und einer schwebenden Aktionsschaltfläche.

Auf dieser Seite erfahren Sie, wie Sie in Ihrer App Navigationsleisten mit zugehörigen Bildschirmen und einfacher Navigation anzeigen.

API-Oberfläche

Verwenden Sie NavigationRail, das mit NavigationRailItem kombinierbar ist, um eine Schiene in Ihrer Anwendung zu implementieren. Das NavigationRailItem steht für ein einzelnes Bahnelement in der Bahnspalte.

NavigationRailItem umfasst die folgenden wichtigen Parameter:

  • selected: Bestimmt, ob das aktuelle Bahnelement visuell hervorgehoben wird.
  • onClick(): Eine erforderliche Lambda-Funktion, die die Aktion definiert, die ausgeführt werden soll, wenn der Nutzer auf das Element in der Leiste klickt. Hier werden in der Regel Navigationsereignisse verarbeitet, der Status des ausgewählten Navigationselements aktualisiert oder entsprechende Inhalte geladen.
  • label: Hier wird Text im Anzeigen-Element angezeigt. Optional:
  • icon: Im Bereich „Rail-Elemente“ wird ein Symbol angezeigt. Optional:

Beispiel: Bahnbasierte Navigation

Im folgenden Snippet wird ein Navigationsstreifen implementiert, über den Nutzer zwischen verschiedenen Bildschirmen in einer App wechseln können:

@Composable
fun NavigationRailExample(modifier: Modifier = Modifier) {
    val navController = rememberNavController()
    val startDestination = Destination.SONGS
    var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) }

    Scaffold(modifier = modifier) { contentPadding ->
        NavigationRail(modifier = Modifier.padding(contentPadding)) {
            Destination.entries.forEachIndexed { index, destination ->
                NavigationRailItem(
                    selected = selectedDestination == index,
                    onClick = {
                        navController.navigate(route = destination.route)
                        selectedDestination = index
                    },
                    icon = {
                        Icon(
                            destination.icon,
                            contentDescription = destination.contentDescription
                        )
                    },
                    label = { Text(destination.label) }
                )
            }
        }
        AppNavHost(navController, startDestination)
    }
}
Navigation.kt

Wichtige Fakten

  • NavigationRail zeigt eine vertikale Spalte mit Schienenelementen an, wobei jedes Element einem Destination entspricht.
  • val navController = rememberNavController() erstellt und speichert eine Instanz von NavHostController, die die Navigation innerhalb einer NavHost verwaltet.
  • var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } verwaltet den Status des aktuell ausgewählten Bahnelementes.
    • startDestination.ordinal ruft den numerischen Index (die Position) des Destination.SONGS-Eintrags ab.
  • Wenn auf ein Element in der Leiste geklickt wird, wird navController.navigate(route = destination.route) aufgerufen, um zum entsprechenden Bildschirm zu wechseln.
  • Das onClick-Lambda des NavigationRailItem aktualisiert den selectedDestination-Status, um das angeklickte Element im Navigationsstreifen visuell hervorzuheben.
  • Es ruft das AppNavHost-Komposit auf und übergibt navController und startDestination, um den tatsächlichen Inhalt des ausgewählten Bildschirms anzuzeigen.

Ergebnis

Das folgende Bild zeigt das Ergebnis des vorherigen Snippets:

Eine vertikale Navigationsleiste mit drei Zielen mit zugehörigen Symbolen: „Songs“, „Album“ und „Playlist“. Symbole geben visuell Aufschluss über die Funktion der einzelnen Navigationsschaltflächen in der Leiste. Jedem Ziel ist ein entsprechendes Symbol zugeordnet (z.B. eine Musiknote für
Abbildung 2. Eine Navigationsleiste mit drei Zielen mit zugehörigen Symbolen: „Songs“, „Album“ und „Playlist“.

Zusätzliche Ressourcen