Kolumna nawigacji

Panele boczne zapewniają dostęp do miejsc docelowych w aplikacjach działających na urządzeniach z dużymi ekranami. Panele nawigacyjne należy stosować 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 czynności.
Rysunek 1. Panel nawigacyjny z 4 miejscami docelowymi i pływającym przyciskiem polecenia.

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

Powierzchnia interfejsu API

Aby zaimplementować panel boczny w aplikacji, użyj komponentu NavigationRail z komponentem NavigationRailItem. Komponent NavigationRailItem reprezentuje pojedynczy element panelu bocznego w kolumnie panelu.

NavigationRailItem zawiera te kluczowe parametry:

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

Przykład: nawigacja oparta na panelu bocznym

Ten fragment kodu implementuje panel 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)
    }
}

Najważniejsze punkty

  • NavigationRail wyświetla pionową kolumnę elementów panelu bocznego, 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 wybranego elementu panelu bocznego.
    • startDestination.ordinal pobiera indeks liczbowy (pozycję) wpisu wyliczenia Destination.SONGS.
  • Gdy klikniesz element panelu bocznego, wywoływana jest funkcja navController.navigate(route = destination.route), aby przejść do odpowiedniego ekranu.
  • Lambda onClick komponentu NavigationRailItem aktualizuje stan selectedDestination, aby wizualnie wyróżnić kliknięty element kolumny bocznej.
  • 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 panel 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 „Utworów”).
Rysunek 2. Panel nawigacyjny, który zawiera 3 miejsca docelowe z powiązanymi ikonami: Utwory, Album i Playlista.

Dodatkowe materiały