Kolumna nawigacji

Panele boczne zapewniają dostęp do miejsc docelowych w aplikacjach działających na urządzeniach z dużymi ekranami. Szyny nawigacyjne powinny być używane do:

  • miejsca docelowe najwyższego poziomu, które muszą być dostępne w dowolnym miejscu w 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.
Rysunek 1. Szyna nawigacyjna z 4 miejscami docelowymi i pływającym przyciskiem polecenia.

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

Interfejs API

Aby zaimplementować w aplikacji panel, użyj komponentu NavigationRail z NavigationRailItem. NavigationRailItem reprezentuje pojedynczy element w kolumnie szyny.

NavigationRailItem zawiera te kluczowe parametry:

  • selected: określa, czy bieżący element na półce jest wizualnie wyróżniony.
  • onClick(): wymagana funkcja lambda, która definiuje działanie do wykonania, gdy użytkownik kliknie element na pasku. W tym miejscu zwykle obsługujesz zdarzenia nawigacji, aktualizujesz stan wybranego elementu na panelu lub wczytujesz odpowiednie treści.
  • label: wyświetla tekst w elemencie na szynie. Opcjonalnie:
  • icon: wyświetla ikonę w elemencie na pasku. Opcjonalnie:

Przykład: nawigacja oparta na panelu bocznym

Ten fragment kodu implementuje panel nawigacyjny, dzięki któremu 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, 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 na szynie.
    • startDestination.ordinal pobiera indeks liczbowy (pozycję) wpisu typu wyliczeniowego Destination.SONGS.
  • Gdy klikniesz element na pasku, wywoływana jest funkcja navController.navigate(route = destination.route), która umożliwia przejście do odpowiedniego ekranu.
  • Funkcja lambda onClick elementu NavigationRailItem aktualizuje stan selectedDestination, aby wizualnie wyróżnić kliknięty element na półce.
  • Wywołuje funkcję kompozycyjną AppNavHost, przekazując navController i startDestination, aby wyświetlić rzeczywistą zawartość wybranego ekranu.

Wynik

Poniższy obraz przedstawia wynik poprzedniego fragmentu kodu:

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

Dodatkowe materiały