In Jetpack Compose Glimmer ist die Komponente TitleChip für die Bereitstellung kurzer, nicht interaktiver Labels für zugehörige Inhalte wie eine Karte konzipiert. Verwenden Sie Titel-Chips, um prägnante Informationen wie einen Kurztitel, 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.
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 einer 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-Element hat eine feste Höhe, um den korrekten vertikalen Abstand zwischen den beiden Komponenten zu gewährleisten, der durchTitleChipDefaults.AssociatedContentSpacingdefiniert wird.