Navigationsleiste

Über Rails können Nutzer auf Ziele in Apps zugreifen, die auf Geräten mit großen Bildschirmen ausgeführt werden. Navigationsleisten sollten für Folgendes verwendet werden:

  • 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“, „Zuletzt“, „Fotos“ und „Galerie“), jeweils mit einem zugehörigen Symbol, und einer schwebenden Aktionsschaltfläche.
Abbildung 1: Eine Navigationsleiste mit vier Zielen und einer unverankerten Aktionsschaltfläche.

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

API-Oberfläche

Verwenden Sie die NavigationRail-Composable mit NavigationRailItem, um einen Rail in Ihrer Anwendung zu implementieren. Der NavigationRailItem steht für ein einzelnes Rail-Element in der Rail-Spalte.

NavigationRailItem umfasst die folgenden wichtigen Parameter:

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

Beispiel: Schienenbasierte Navigation

Im folgenden Snippet wird ein Navigationsstreifen implementiert, damit 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 Rail-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 Schienenelements.
    • startDestination.ordinal ruft den numerischen Index (die Position) des Destination.SONGS-Enum-Eintrags ab.
  • Wenn auf ein Rail-Element geklickt wird, wird navController.navigate(route = destination.route) aufgerufen, um zum entsprechenden Bildschirm zu navigieren.
  • Die onClick-Lambda-Funktion des NavigationRailItem aktualisiert den selectedDestination-Status, um das angeklickte Rail-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

Das folgende Bild zeigt das Ergebnis des vorherigen Snippets:

Eine vertikale Navigationsleiste mit drei Zielen und den zugehörigen Symbolen: „Titel“, „Album“ und „Playlist“. Symbole geben visuell den Zweck jeder Navigationsschaltfläche im Bereich an. Jedes Ziel hat ein entsprechendes Symbol (z.B. eine Musiknote für
Abbildung 2. Eine Navigationsleiste mit drei Zielen und den zugehörigen Symbolen: „Songs“, „Album“ und „Playlist“.

Zusätzliche Ressourcen