Registerkarten

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

  • Primäre Tabs: 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 Tabs benötigt wird.
  • Sekundäre Tabs: Werden in einem Inhaltsbereich verwendet, um ähnliche Inhalte weiter zu trennen und eine Hierarchie zu erstellen. Sie sind erforderlich, wenn ein Bildschirm mehr als eine Ebene von Tabs erfordert.
Es werden drei Haupttabs mit den zugehörigen Symbolen angezeigt („Flüge“, „Reisen“ und „Entdecken“). Es werden zwei sekundäre Tabs (Übersicht, Spezifikationen) ohne zugehörige Symbole angezeigt.
Abbildung 1. Primäre Tabs (1) und sekundäre Tabs (2).

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

API-Oberfläche

Verwenden Sie die Composables Tab, PrimaryTabRow und SecondaryTabRow, um Tabs zu implementieren. Das Tab-Composable stellt einen einzelnen Tab innerhalb der Zeile dar und wird normalerweise innerhalb eines PrimaryTabRow (für primäre Indikator-Tabs) oder SecondaryTabRow (für sekundäre Indikator-Tabs) verwendet.

Tab enthält die folgenden Schlüsselparameter:

  • selected gibt an, ob der aktuelle Tab visuell hervorgehoben wird.
  • onClick() repräsentiert 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 innerhalb des Tabs an. Optional.
  • icon: Zeigt ein Symbol im Tab an. Optional.
  • enabled: Steuert, ob der Tab aktiviert ist und mit ihm interagiert werden kann. Wenn die Richtlinie auf „false“ gesetzt ist, wird der Tab deaktiviert 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)
    }
}

Wichtige Fakten

  • PrimaryTabRow zeigt eine horizontale Reihe von Tabs an, wobei jeder Tab einem Destination entspricht.
  • val navController = rememberNavController() erstellt eine Instanz von NavHostController und speichert sie. Diese Instanz verwaltet die Navigation innerhalb eines NavHost.
  • var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } verwaltet den Status des ausgewählten Tabs.
    • startDestination.ordinal ruft den numerischen Index (Position) des Enum-Eintrags Destination.SONGS ab.
  • Wenn Sie auf einen Tab klicken, ruft der Lambda-Ausdruck onClick die Funktion navController.navigate(route = destination.route) auf, um zum entsprechenden Bildschirm zu wechseln.
  • Der onClick-Lambda-Ausdruck von Tab aktualisiert den selectedDestination-Status, 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