Pasek nawigacyjny

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Pasek nawigacyjny umożliwia użytkownikom przełączanie się między miejscami docelowymi w aplikacji. Paski nawigacyjne należy stosować 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świetlić w aplikacji pasek nawigacji z powiązanymi ekranami i podstawową nawigacją.

Interfejs API

Aby zaimplementować logikę przełączania miejsc docelowych, użyj kompozytów NavigationBar i NavigationBarItem. Każdy element NavigationBarItem reprezentuje pojedyncze miejsce docelowe.

NavigationBarItem zawiera te kluczowe parametry:

• selected: określa, czy bieżący element jest wizualnie wyróżniony.
• onClick(): wymagana funkcja lambda, która określa działanie wykonywane po kliknięciu elementu przez użytkownika. Tutaj zwykle obsługujesz zdarzenia nawigacyjne, 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

Ten fragment kodu wdraża pasek dolnej nawigacji z elementami, dzięki którym użytkownicy mogą się poruszać 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 wystąpienie NavHostController, które zarządza nawigacją w NavHost.
• var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } zarządza stanem aktualnie wybranego elementu.
• var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } określa stan aktualnie wybranego elementu.
  • startDestination.ordinal zwraca indeks numeryczny (pozycję) elementu listy Destination.SONGS.
• Gdy użytkownik kliknie element, funkcja navController.navigate(route = destination.route) zostanie wywołana, aby przejść do odpowiedniego ekranu.
• Lambda onClick elementu NavigationBarItem aktualizuje stan selectedDestination, aby wizualnie wyróżnić kliknięty element.
• Wywołuje kompozyt AppNavHost, przekazując navController i startDestination, aby wyświetlić rzeczywistą zawartość wybranego ekranu.

Wynik

Na tym obrazie widać pasek nawigacji utworzony na podstawie poprzedniego fragmentu kodu:

Dodatkowe materiały

• Materiał 3. Pasek nawigacyjny
• Nawigacja w Compose