Navigationsleiste

Mit der Navigationsleiste können Nutzer zwischen Zielen in einer App wechseln. Sie sollten Navigationsleisten für Folgendes verwenden:

  • Drei bis fünf Ziele von gleicher Wichtigkeit
  • Kompakte Fenstergrößen
  • Einheitliche Ziele auf allen App-Bildschirmen
Eine Navigationsleiste mit vier Zielen. Jedes Ziel hat einen Platzhalternamen namens „Label“. Das ausgewählte Ziel wird mit einem Kreissymbol und die restlichen Ziele mit Dreiecken dargestellt.
Abbildung 1: Eine Navigationsleiste mit vier Zielen.

Auf dieser Seite erfahren Sie, wie Sie in Ihrer App eine Navigationsleiste mit zugehörigen Bildschirmen und grundlegender Navigation anzeigen.

API-Oberfläche

Verwenden Sie die kombinierbaren Funktionen NavigationBar und NavigationBarItem, um die Logik für das Wechseln des Ziels zu implementieren. Jedes NavigationBarItem steht für ein einzelnes Ziel.

NavigationBarItem umfasst die folgenden wichtigen Parameter:

  • selected gibt an, ob das aktuelle Element visuell hervorgehoben wird.
  • onClick(): Definiert die Aktion, die ausgeführt werden soll, wenn der Nutzer auf das Element klickt. Hier gehört die Logik zum Verarbeiten von Navigationsereignissen, zum Aktualisieren des Status des ausgewählten Elements oder zum Laden entsprechender Inhalte hin.
  • label zeigt Text innerhalb des Elements an. Optional.
  • icon zeigt ein Symbol im Element an. Optional.

Beispiel: Untere Navigationsleiste

Im folgenden Snippet wird eine Navigationsleiste am unteren Bildschirmrand mit Elementen implementiert, damit Nutzer zwischen verschiedenen Bildschirmen in einer App wechseln können:

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

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

Wichtige Fakten

  • NavigationBar zeigt eine Sammlung von Elementen an, wobei jedes Element einem Destination entspricht.
  • val navController = rememberNavController() erstellt und speichert eine Instanz von NavHostController, die die Navigation in einem NavHost verwaltet.
  • var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } verwaltet den Status des ausgewählten Elements.
    • startDestination.ordinal ruft den numerischen Index (die Position) des Destination.SONGS-Enum-Eintrags ab.
  • Wenn auf ein Element geklickt wird, wird navController.navigate(route = destination.route) aufgerufen, um zum entsprechenden Bildschirm zu wechseln.
  • Die onClick-Lambda-Funktion von NavigationBarItem aktualisiert den selectedDestination-Status, um das angeklickte Element visuell hervorzuheben.
  • Die Navigationslogik ruft die kombinierbare Funktion AppNavHost auf und übergibt navController und startDestination, um den tatsächlichen Inhalt des ausgewählten Bildschirms anzuzeigen.

Ergebnis

Die folgende Abbildung zeigt die Navigationsleiste, die sich aus dem vorherigen Snippet ergibt:

Ein App-Bildschirm mit drei horizontal in einer Navigationsleiste am unteren Bildschirmrand aufgeführten Zielen: „Songs“, „Album“ und „Playlist“. Jedes Ziel hat ein entsprechendes Symbol (z.B. eine Musiknote für „Songs“).
Abbildung 2. Eine Navigationsleiste mit drei Zielen und den zugehörigen Symbolen: „Songs“, „Album“ und „Playlist“.

Zusätzliche Ressourcen