Pasek nawigacyjny

Pasek nawigacyjny umożliwia użytkownikom przełączanie się między miejscami docelowymi w aplikacji. Pasków nawigacyjnych należy używać w przypadku:

  • 3–5 miejsc docelowych o równym znaczeniu
  • Kompaktowe rozmiary okien
  • Spójne miejsca docelowe na różnych ekranach aplikacji
Pasek nawigacyjny z 4 miejscami docelowymi. Każde miejsce docelowe ma nazwę zastępczą o nazwie
Rysunek 1. Pasek nawigacyjny z 4 miejscami docelowymi.

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

Powierzchnia interfejsu API

Użyj komponentów NavigationBar i NavigationBarItem, aby wdrożyć logikę przełączania miejsc docelowych. Każdy symbol NavigationBarItem reprezentuje jedno miejsce docelowe.

NavigationBarItem obejmuje te kluczowe parametry:

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

Przykład: dolny pasek nawigacyjny

Poniższy fragment kodu implementuje pasek dolnej nawigacji z elementami, dzięki którym użytkownicy mogą przechodzić między różnymi ekranami w aplikacji:

@Composable
fun NavigationBarExample(modifier: Modifier = Modifier) {
    val navController = rememberNavController()
    val startDestination = Destination.SONGS
    var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) }

    Scaffold(
        modifier = modifier,
        bottomBar = {
            NavigationBar(windowInsets = NavigationBarDefaults.windowInsets) {
                Destination.entries.forEachIndexed { index, destination ->
                    NavigationBarItem(
                        selected = selectedDestination == index,
                        onClick = {
                            navController.navigate(route = destination.route)
                            selectedDestination = index
                        },
                        icon = {
                            Icon(
                                destination.icon,
                                contentDescription = destination.contentDescription
                            )
                        },
                        label = { Text(destination.label) }
                    )
                }
            }
        }
    ) { contentPadding ->
        AppNavHost(navController, startDestination, modifier = Modifier.padding(contentPadding))
    }
}
Navigation.kt

Najważniejsze punkty

  • NavigationBar wyświetla kolekcję elementów, z których każdy 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 obecnie wybranego elementu.
  • 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, wywoływana jest funkcja navController.navigate(route = destination.route), która powoduje przejście do odpowiedniego ekranu.
  • Funkcja onClick lambda funkcji NavigationBarItem aktualizuje stan selectedDestination, aby wizualnie wyróżnić kliknięty element.
  • Wywołuje funkcję kompozycyjną AppNavHost, przekazując do niej funkcje navController i startDestination, aby wyświetlić rzeczywistą zawartość wybranego ekranu.

Wynik

Obraz poniżej przedstawia pasek nawigacyjny, który powstał na podstawie poprzedniego fragmentu kodu:

Ekran aplikacji z 3 miejscami docelowymi wyświetlanymi poziomo na pasku dolnej nawigacji: Utwory, Album i Playlista. Każde miejsce docelowe ma przypisaną odpowiednią ikonę (np. nutę w przypadku „Utworów”).
Rysunek 2. Pasek nawigacyjny z 3 miejscami docelowymi i powiązanymi ikonami: Utwory, Album i Playlista.

Dodatkowe materiały