Karty

Karty umożliwiają porządkowanie grup powiązanych treści. Istnieją 2 rodzaje kart:

  • Karty główne: umieszczone u góry panelu treści pod górnym paskiem aplikacji. Wyświetlają główne miejsca docelowe treści i powinny być używane, gdy potrzebny jest tylko jeden zestaw kart.
  • Karty dodatkowe: używane w obszarze treści do dalszego rozdzielania powiązanych treści i ustanawiania hierarchii. Są one niezbędne, gdy ekran wymaga więcej niż 1 poziomu kart.
Wyświetlane są 3 główne karty z powiązanymi ikonami (Loty, Podróże i Odkrywaj). Wyświetlane są 2 karty dodatkowe (Przegląd, Dane techniczne) bez powiązanych ikon.
Rysunek 1. Karty główne (1) i karty dodatkowe (2).

Na tej stronie dowiesz się, jak wyświetlać w aplikacji karty główne z powiązanymi ekranami i podstawową nawigacją.

Interfejs API

Aby zaimplementować karty, użyj komponentów Tab, PrimaryTabRow i SecondaryTabRow. Komponent Tab reprezentuje pojedynczą kartę w wierszu i jest zwykle używany w komponencie PrimaryTabRow (w przypadku kart ze wskaźnikiem głównym) lub SecondaryTabRow (w przypadku kart ze wskaźnikiem dodatkowym).

Tab zawiera te kluczowe parametry:

  • selected: określa, czy bieżąca karta jest wizualnie wyróżniona.
  • onClick(): wymagana funkcja lambda, która definiuje działanie do wykonania, gdy użytkownik kliknie kartę. W tym miejscu zwykle obsługujesz zdarzenia nawigacji, aktualizujesz stan wybranej karty lub wczytujesz odpowiednie treści.
  • text: wyświetla tekst na karcie. Opcjonalnie:
  • icon: wyświetla ikonę na karcie. Opcjonalnie:
  • enabled: określa, czy karta jest włączona i czy można z nią wchodzić w interakcje. Jeśli ma wartość Fałsz, karta jest wyłączona i nie reaguje na kliknięcia.

Przykład: nawigacja oparta na kartach

Poniższy fragment kodu implementuje górny pasek nawigacyjny z kartami do przechodzenia między różnymi ekranami w aplikacji:

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

    Scaffold(modifier = modifier) { contentPadding ->
        PrimaryTabRow(selectedTabIndex = selectedDestination, modifier = Modifier.padding(contentPadding)) {
            Destination.entries.forEachIndexed { index, destination ->
                Tab(
                    selected = selectedDestination == index,
                    onClick = {
                        navController.navigate(route = destination.route)
                        selectedDestination = index
                    },
                    text = {
                        Text(
                            text = destination.label,
                            maxLines = 2,
                            overflow = TextOverflow.Ellipsis
                        )
                    }
                )
            }
        }
        AppNavHost(navController, startDestination)
    }
}

Najważniejsze punkty

  • PrimaryTabRow wyświetla poziomy wiersz kart, z których każda 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 wybranej karty.
    • startDestination.ordinal pobiera indeks liczbowy (pozycję) wpisu typu wyliczeniowego Destination.SONGS.
  • Gdy klikniesz kartę, funkcja lambda onClick wywołuje funkcję navController.navigate(route = destination.route), aby przejść do odpowiedniego ekranu.
  • Funkcja lambda onClick elementu Tab aktualizuje stan selectedDestination, aby wizualnie wyróżnić klikniętą kartę.
  • 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:

3 karty ułożone poziomo u góry ekranu aplikacji. Karty to Utwory, Album i Playlista. Karta Utwory jest wybrana i podkreślona.
Rysunek 2. 3 karty – Utwory, Album i Playlista – ułożone poziomo.

Dodatkowe materiały