Kolumna nawigacji

Paski 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 przypadku:

  • Miejsca docelowe najwyższego poziomu, które muszą być dostępne w dowolnym miejscu w aplikacji
  • 3–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 działania.
Rysunek 1. Panel nawigacyjny z 4 miejscami docelowymi i pływającym przyciskiem polecenia.

Z tej strony dowiesz się, jak wyświetlać w aplikacji półki z powiązanymi ekranami i podstawową nawigacją.

Powierzchnia interfejsu API

Użyj komponentu NavigationRail z komponentem NavigationRailItem, aby zaimplementować pasek w aplikacji. NavigationRailItem to pojedynczy element w kolumnie sekcji.

NavigationRailItem obejmuje te kluczowe parametry:

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

Przykład: nawigacja oparta na kolei

Poniższy fragment kodu implementuje kolumnę nawigacji, 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 na szynie, przy czym każdy element odpowiada Destination.
  • val navController = rememberNavController() tworzy i zapamiętuje instancję NavHostController, która zarządza nawigacją w ramach NavHost.
  • var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } zarządza stanem aktualnie wybranego elementu.
    • startDestination.ordinal pobiera indeks liczbowy (pozycję) wpisu wyliczeniowego Destination.SONGS.
  • Gdy klikniesz element paska, wywoływana jest funkcja navController.navigate(route = destination.route), aby przejść do odpowiedniego ekranu.
  • Funkcja onClick lambda funkcji NavigationRailItem aktualizuje stanselectedDestination, aby wizualnie wyróżnić kliknięty element szyny.
  • Wywołuje funkcję kompozycyjną AppNavHost, przekazując do niej funkcje navController i startDestination, aby wyświetlić rzeczywistą zawartość wybranego ekranu.

Wynik

Na ilustracji poniżej widać 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
Rysunek 2. Pasek nawigacyjny zawierający 3 miejsca docelowe z powiązanymi ikonami: Utwory, Album i Lista odtwarzania.

Dodatkowe materiały