Titel-Chips in Jetpack Compose Glimmer

XR‑Geräte, für die der Leitfaden gilt
Dieser Leitfaden hilft Ihnen dabei, Erlebnisse für die folgenden Arten von XR-Geräten zu entwickeln.
Informationen zu XR‑Gerätetypen →
Displaybrillen
Informationen zu XR‑Gerätetypen →

In Jetpack Compose Glimmer ist die TitleChip Komponente eine nicht interaktive Komponente, die kurzen Kontext oder eine Beschriftung für zugehörige Inhalte wie eine Card oder eine VerticalList bietet.

Verwenden Sie Titel-Chips für prägnante Informationen wie einen kurzen Titel, einen Kategorienamen oder eine Statusanzeige. Normalerweise sollten Sie Titel-Chips über den Inhalten platzieren, die sie beschreiben, um eine klare strukturelle Beziehung herzustellen.

Abbildung 1. Ein Beispiel für einen Titel-Chip im Standardstil und einen fixierten Titel-Chip in Jetpack Compose Glimmer. Jeder Titel-Chip hat ein Label (1) und optional ein führendes Symbol oder eine Entität (2).

Einfaches Beispiel: Kurzen Titel-Chip erstellen

Mit dem folgenden Code wird ein einfacher Titel-Chip erstellt:

@Composable
fun BasicTitleChipSample() {
    TitleChip { Text("Messages") }
}

Einfaches Beispiel: Titel-Chip mit Symbol erstellen

Mit dem folgenden Code wird ein Titel-Chip mit einem Symbol erstellt:

@Composable
fun TitleChipWithIconSample() {
    TitleChip {
        Icon(FavoriteIcon, contentDescription = "Favorite")
        Text("Favorites")
    }
}

Beispiel: Titel-Chip mit Karte erstellen

Wenn Sie einen Titel-Chip mit einer anderen Komponente verwenden möchten, platzieren Sie den Titel-Chip TitleChipDefaults.associatedContentSpacing in der zusammensetzbaren Funktion über der anderen Komponente. Mit dem folgenden Code wird ein Titel-Chip mit einer Karte erstellt:

@Composable
fun TitleChipWithCardSample() {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        TitleChip { Text("Title Chip") }

        Spacer(Modifier.height(TitleChipDefaults.associatedContentSpacing))

        Card(
            title = { Text("Title") },
            subtitle = { Text("Subtitle") },
            leadingIcon = { Icon(FavoriteIcon, "Localized description") },
        ) {
            Text("Card Content")
        }
    }
}

Wichtige Informationen zum Code

  • Der Titel-Chip ist horizontal zentriert. Das ist die übliche Ausrichtung für einen Titel-Chip, der über einer Karte platziert wird.
  • Der Spacer hat eine feste Höhe, um den richtigen vertikalen Abstand zwischen den beiden Komponenten zu gewährleisten. Dies wird mit TitleChipDefaults.associatedContentSpacing definiert.
  • Verwendet optional ein leadingIcon, um vor dem Textinhalt zusätzlichen visuellen Kontext hinzuzufügen.
  • Der Titel-Chip verwendet automatisch den Stil caption für seinen Text.
  • Der Titel-Chip ist nicht interaktiv. Wenn Sie ein anklickbares Label benötigen, verwenden Sie eine Button oder eine andere interaktive Komponente.