Tabs

Mit Tabs können Sie Gruppen verwandter Inhalte organisieren. Es gibt zwei Arten von Tabs:

  • Primäre Tabs: Sie werden oben im Inhaltsbereich unter einer oberen App-Leiste platziert. Sie zeigen die Hauptziele für Inhalte an und sollten verwendet werden, wenn nur ein Satz von Tabs erforderlich ist.
  • Sekundäre Tabs: Sie werden in einem Inhaltsbereich verwendet, um verwandte Inhalte weiter zu trennen und eine Hierarchie zu erstellen. Sie sind erforderlich, wenn ein Bildschirm mehr als eine Tab-Ebene benötigt.
Es werden drei primäre Tabs mit zugehörigen Symbolen angezeigt: „Flüge“, „Reisen“ und „Entdecken“. Es werden zwei untergeordnete Tabs („Übersicht“, „Spezifikationen“) ohne zugehörige Symbole angezeigt.
Abbildung 1. Primäre Tabs (1) und sekundäre Tabs (2).

Auf dieser Seite wird beschrieben, wie Sie primäre Tabs in Ihrer App mit zugehörigen Bildschirmen und grundlegender Navigation anzeigen.

API-Oberfläche

Verwenden Sie die Tab, PrimaryTabRow und SecondaryTabRow kombinierbaren Funktionen, um Tabs zu implementieren. Die kombinierbare Funktion Tab stellt einen einzelnen Tab in der Zeile dar und wird in der Regel in PrimaryTabRow (für primäre Indikator tabs) oder SecondaryTabRow (für sekundäre Indikatortabs) verwendet.

Tab enthält die folgenden wichtigen Parameter:

  • selected: Bestimmt, ob der aktuelle Tab visuell hervorgehoben wird.
  • onClick(): Eine erforderliche Lambda-Funktion, die die Aktion definiert, die ausgeführt werden soll, wenn der Nutzer auf den Tab klickt. Hier werden in der Regel Navigationsereignisse verarbeitet, der Status des ausgewählten Tabs aktualisiert oder entsprechende Inhalte geladen.
  • text: Zeigt Text auf dem Tab an. Optional.
  • icon: Zeigt ein Symbol auf dem Tab an. Optional.
  • enabled: Steuert, ob der Tab aktiviert ist und Interaktionen damit möglich sind. Wenn diese Option auf „false“ gesetzt ist, wird der Tab deaktiviert angezeigt und reagiert nicht auf Klicks.

Beispiel: Tab-basierte Navigation

Das folgende Snippet implementiert eine obere Navigationsleiste mit Tabs, um zwischen verschiedenen Bildschirmen in einer App zu wechseln:

@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

Wichtige Fakten

  • PrimaryTabRow zeigt eine horizontale Zeile mit Tabs an, wobei jeder Tab einem Destination-Objekt entspricht.
  • val navController = rememberNavController() erstellt und speichert eine Instanz von NavHostController, die die Navigation in einem NavHost verwaltet.
  • var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } verwaltet den Status des ausgewählten Tabs.
    • startDestination.ordinal ruft den numerischen Index (die Position) des Destination.SONGS-Enum-Eintrags ab.
  • Wenn Sie auf einen Tab klicken, ruft die Lambda-Funktion onClick die Funktion navController.navigate(route = destination.route) auf, um zum entsprechenden Bildschirm zu wechseln.
  • Die Lambda-Funktion onClick des Tab-Objekts aktualisiert den Status selectedDestination, um den angeklickten Tab visuell hervorzuheben.
  • Dazu wird die kombinierbare Funktion AppNavHost aufgerufen und navController und startDestination übergeben, um den tatsächlichen Inhalt des ausgewählten Bildschirms anzuzeigen.

Ergebnis

Die folgende Abbildung zeigt das Ergebnis des vorherigen Snippets:

Drei Tabs, die horizontal oben auf dem App-Bildschirm angeordnet sind. Die Tabs sind „Songs“, „Album“ und „Playlist“. Der Tab „Songs“ ist ausgewählt und unterstrichen.
Abbildung 2. Drei horizontal angeordnete Tabs: „Songs“, „Album“ und „Playlist“.

Zusätzliche Ressourcen