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

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

Powierzchnia interfejsu API

Użyj funkcji kompozycyjnych NavigationBar i NavigationBarItem, aby zaimplementować 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 elemencie. 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 utworzony na podstawie poprzedniego fragmentu kodu:

Dodatkowe materiały

• Material 3 – pasek nawigacyjny
• Nawigacja w Compose