Kolumna nawigacji

Paski nawigacyjne zapewniają dostęp do miejsc docelowych w aplikacjach działających na urządzeniach z dużymi ekranami. Pasków nawigacyjnych należy używać w tych przypadkach:

  • miejsca docelowe najwyższego poziomu, które muszą być dostępne w dowolnym miejscu aplikacji;
  • od 3 do 7 głównych miejsc docelowych;
  • układy na tablety i komputery.
Pionowy pasek nawigacyjny po lewej stronie ekranu z 4 miejscami docelowymi (Wszystkie pliki, Ostatnie, Zdjęcia i Biblioteka), z których każde ma powiązaną ikonę, oraz pływający przycisk polecenia (FAB).
Rysunek 1. Pasek nawigacyjny z 4 miejscami docelowymi i pływającym przyciskiem polecenia (FAB).

Z tej strony dowiesz się, jak wyświetlać paski nawigacyjne w aplikacji z powiązanymi ekranami i podstawową nawigacją.

Powierzchnia interfejsu API

Aby zaimplementować pasek nawigacyjny w aplikacji, użyj komponentu NavigationRail z komponentem NavigationRailItem. NavigationRailItem reprezentuje pojedynczy element paska nawigacyjnego w kolumnie paska.

NavigationRailItem zawiera te kluczowe parametry:

  • selected: określa, czy bieżący element paska nawigacyjnego jest wizualnie wyróżniony.
  • onClick(): wymagana funkcja lambda, która określa działanie, jakie ma zostać wykonane, gdy użytkownik kliknie element paska nawigacyjnego. Zazwyczaj obsługujesz tu zdarzenia nawigacji, aktualizujesz stan wybranego elementu paska nawigacyjnego lub wczytujesz odpowiednią treść.
  • label: wyświetla tekst w elemencie paska nawigacyjnego. Opcjonalnie.
  • icon: wyświetla ikonę w elemencie paska nawigacyjnego. Opcjonalnie.

Przykład: nawigacja oparta na pasku nawigacyjnym

Ten fragment kodu implementuje pasek nawigacyjny, dzięki czemu użytkownicy mogą przechodzić między różnymi ekranami w aplikacji:

@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

Najważniejsze punkty

  • NavigationRail wyświetla pionową kolumnę elementów paska nawigacyjnego, z których każdy odpowiada Destination.
  • val navController = rememberNavController() tworzy i zapamiętuje instancję NavHostController, która zarządza nawigacją w NavHost.
  • var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } zarządza stanem aktualnie wybranego elementu paska nawigacyjnego.
    • startDestination.ordinal pobiera indeks liczbowy (pozycję) wpisu wyliczenia Destination.SONGS.
  • Gdy klikniesz element paska nawigacyjnego, navController.navigate(route = destination.route) jest wywoływana, aby przejść do odpowiedniego ekranu.
  • Lambda onClick komponentu NavigationRailItem aktualizuje stan selectedDestination, aby wizualnie wyróżnić kliknięty element paska nawigacyjnego.
  • Wywołuje komponent AppNavHost, przekazując navController i startDestination, aby wyświetlić rzeczywistą treść wybranego ekranu.

Wynik

Ten obraz przedstawia wynik działania poprzedniego fragmentu kodu:

Pionowy pasek nawigacyjny z 3 miejscami docelowymi i powiązanymi ikonami: Utwory, Album i Lista odtwarzania. Ikony wizualnie wskazują przeznaczenie każdego przycisku nawigacyjnego na pasku. Każde miejsce docelowe ma powiązaną z nim odpowiednią ikonę (np. nutę w przypadku
Rysunek 2. Pasek nawigacyjny, który zawiera 3 miejsca docelowe z powiązanymi ikonami: Utwory, Album i Playlista.

Dodatkowe materiały