Chips de titre dans Jetpack Compose Glimmer

Appareils XR concernés
Ces conseils vous aident à créer des expériences pour ces types d'appareils XR.
En savoir plus sur les types d'appareils XR →
Lunettes d'IA
En savoir plus sur les types d'appareils XR →

Dans Jetpack Compose Glimmer, le TitleChip composant est conçu pour fournir un libellé bref et non interactif pour le contenu associé, tel qu'une fiche. Utilisez des chips de titre pour afficher des informations concises, comme un titre court, un nom ou un état. Comme les chips de titre ne sont ni interactifs ni sélectionnables, ils jouent un rôle purement informatif dans l'interface utilisateur Jetpack Compose Glimmer. Par exemple, vous pouvez fournir un chip de titre intitulé "Ingrédients" à côté d'une liste déroulante d'ingrédients.

Figure 1. Exemple de différents styles de chips de titre dans Jetpack Compose Glimmer.

Chip de titre par défaut et chip de titre fixe affichés. Les chips de titre fixes sont affichés avec un contour.

  1. Libellé des chips de titre
  2. Icône ou entité de début facultative

Exemple de base : afficher un chip de titre court

Vous pouvez créer un chip de titre court avec très peu de code :

TitleChip { Text("Messages") }

Exemple détaillé : afficher un chip de titre avec une fiche

Pour utiliser un chip de titre avec un autre composant, placez le chip de titre TitleChipDefaults.AssociatedContentSpacing au-dessus de l'autre composant dans le composable. Le code suivant montre comment utiliser un chip de titre avec une fiche :

@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")
        }
    }
}

Points essentiels concernant le code