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 →
Displaybrille
Informationen zu XR-Gerätetypen →

In Jetpack Compose Glimmer ist die Komponente TitleChip eine nicht interaktive Komponente, die kurzen Kontext oder Labels für zugehörige Inhalte wie Card oder 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 dem Inhalt platzieren, den sie beschreiben, um eine klare strukturelle Beziehung herzustellen.

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

Einfaches Beispiel: Chip für kurzen Titel erstellen

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

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

Example: Create a title chip with a card

To use a title chip with another component, place the title chip TitleChipDefaults.associatedContentSpacing above the other component in the composable. The following code creates a title chip with a card:

@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 Punkte zum Code

  • Der Titel-Chip ist horizontal zentriert, was die übliche Ausrichtung für einen Titel-Chip ist, der über einer Karte platziert wird.
  • Die 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 ein optionales leadingIcon, um vor dem Textinhalt zusätzlichen visuellen Kontext hinzuzufügen.
  • Für den Text des Titel-Chips wird automatisch der Stil caption verwendet.
  • Der Titel-Chip ist nicht interaktiv. Wenn Sie ein klickbares Label benötigen, verwenden Sie ein Button oder eine andere interaktive Komponente.