Kolumna nawigacji

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

Listy odbiorców zapewniają dostęp do miejsc docelowych w aplikacjach działających na urządzeniach z dużymi ekranami. Listwy nawigacyjne należy stosować 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 lub komputery;

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

Interfejs API

Aby zaimplementować w aplikacji pasek, użyj komponentu NavigationRail, który można łączyć z komponentem NavigationRailItem. NavigationRailItem to pojedynczy element szyny w kolumnie szyny.

NavigationRailItem zawiera te kluczowe parametry:

• selected: określa, czy bieżący element listy jest wizualnie wyróżniony.
• onClick(): wymagana funkcja lambda, która określa działanie wykonywane po kliknięciu przez użytkownika elementu w pasku. Tutaj zwykle obsługujesz zdarzenia nawigacyjne, aktualizujesz stan wybranego elementu szyny lub wczytujesz odpowiednie treści.
• label: wyświetla tekst w elemencie szyny. Opcjonalnie:
• icon: wyświetla ikonę w elemencie szyny. Opcjonalnie:

Przykład: nawigacja kolejowa

Ten fragment kodu wdraża suwak nawigacji, 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)
    }
}
Navigation.kt

Najważniejsze punkty

• NavigationRail wyświetla pionową kolumnę elementów szyny, z których każdy element 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) } określa stan aktualnie wybranego elementu szyny.
  • startDestination.ordinal zwraca indeks numeryczny (pozycję) elementu listy Destination.SONGS.
• Gdy użytkownik kliknie element na szynie, wywoływana jest funkcja navController.navigate(route = destination.route), aby przejść do odpowiedniego ekranu.
• Lambda onClick elementu NavigationRailItem aktualizuje stan selectedDestination, aby wizualnie wyróżnić kliknięty element na szynie.
• Wywołuje kompozyt AppNavHost, przekazując navController i startDestination, aby wyświetlić rzeczywistą zawartość wybranego ekranu.

Wynik

Ten obraz pokazuje wynik poprzedniego fragmentu kodu:

Dodatkowe materiały

• Material 3 – pasek nawigacji
• Nawigacja w Compose