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 →

Informationen zu XR-Gerätetypen →

In Jetpack Compose Glimmer ist die Komponente TitleChip so konzipiert, dass sie eine kurze, nicht interaktive Beschriftung für zugehörige Inhalte wie eine Karte bietet. Verwenden Sie Titel-Chips, um prägnante Informationen wie einen kurzen Titel, einen Namen oder einen Status anzuzeigen. Da Titel-Chips nicht fokussierbar oder interaktiv sind, haben sie in einer Jetpack Compose-Glimmer-Benutzeroberfläche eine rein informative Funktion. Sie könnten beispielsweise neben einer scrollbaren Liste mit Zutaten einen Titel-Chip mit dem Label „Zutaten“ einfügen.

Chip mit Standardtitel und Chip mit fixiertem Titel werden angezeigt. Fixierte Titel-Chips werden mit einer Umrisslinie angezeigt.

1. Label für Titel-Chips
2. Optionales vorangestelltes Symbol oder vorangestellte Entität

Einfaches Beispiel: Kurzen Titel-Chip anzeigen

Sie können mit sehr wenig Code einen Chip mit einem kurzen Titel erstellen:

TitleChip { Text("Messages") }

Ausführliches Beispiel: Titel-Chip mit Karte anzeigen

Wenn Sie einen Titel-Chip mit einer anderen Komponente verwenden möchten, platzieren Sie den Titel-Chip TitleChipDefaults.AssociatedContentSpacing über der anderen Komponente im Composable. Der folgende Code zeigt, wie ein Titel-Chip mit einer Karte verwendet wird:

@Composable
fun TitleChipExample() {
    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

• Das Spacer hat eine feste Höhe, um den richtigen vertikalen Abstand zwischen den beiden Komponenten zu gewährleisten, der durch TitleChipDefaults.AssociatedContentSpacing definiert wird.