Navigationsleiste

Über die 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, der
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

Verwende die Composables 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(): Eine erforderliche Lambda-Funktion, die die Aktion definiert, die ausgeführt werden soll, wenn der Nutzer auf das Element klickt. Hier werden in der Regel Navigationsereignisse verarbeitet, der Status des ausgewählten Elements aktualisiert oder entsprechende Inhalte geladen.
  • label: Zeigt Text innerhalb des Elements an. Optional:
  • icon: Zeigt ein Symbol im Element an. Optional:

Beispiel: Navigationsleiste am unteren Rand

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 aktuell ausgewählten Elements.
  • var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } verwaltet den Status des aktuell 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.
  • Dazu wird die AppNavHost-Composable-Funktion aufgerufen und navController und startDestination übergeben, 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: „Titel“, „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