Karty

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

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

• Główne karty: znajdują się u góry panelu treści pod paskiem aplikacji. Zawierają one główne miejsca docelowe treści i powinny być używane, gdy potrzebny jest tylko jeden zestaw kart.
• Dodatkowe karty: służą w obszarze treści do dalszego rozdzielania powiązanych treści i ustalania hierarchii. Są one niezbędne, gdy ekran wymaga więcej niż 1 poziomu kart.

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

Interfejs API

Aby zaimplementować karty, użyj komponentów Tab, PrimaryTabRow i SecondaryTabRow. Składnik Tab reprezentuje pojedynczą kartę w wierszu i jest zwykle używany w ramach PrimaryTabRow (w przypadku kart wskaźnika głównego) lub SecondaryTabRow (w przypadku kart wskaźnika dodatkowego).

Tab zawiera te kluczowe parametry:

• selected: określa, czy bieżąca karta jest wizualnie wyróżniona.
• onClick(): wymagana funkcja lambda, która określa działanie wykonywane po kliknięciu karty przez użytkownika. Tutaj zwykle obsługujesz zdarzenia nawigacyjne, aktualizujesz stan wybranej karty lub wczytujesz odpowiednią treść.
• 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 interakcję. Jeśli ma wartość Fałsz, karta jest wyświetlana w wyłączonym stanie i nie reaguje na kliknięcia.

Przykład: nawigacja na kartach

Ten fragment kodu wdraża górny pasek nawigacyjny z kartami umożliwiającymi poruszanie się po różnych ekranach 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)
    }
}
Navigation.kt

Najważniejsze punkty

• PrimaryTabRow wyświetla poziomy rząd kart, z których każda 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 wybranej karty.
  • startDestination.ordinal zwraca indeks numeryczny (pozycję) elementu listy Destination.SONGS.
• Gdy klikniesz kartę, wywoływana jest funkcja navController.navigate(route = destination.route), aby przejść do odpowiedniego ekranu.
• Lambda onClick w komponencie Tab aktualizuje stan selectedDestination, aby wizualnie wyróżnić klikniętą kartę.
• 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

• Materiał 3 – karty
• Nawigacja w Compose