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'affichage
En savoir plus sur les types d'appareils XR →

Dans Jetpack Compose Glimmer, le TitleChip composant est un composant non interactif qui fournit un bref contexte ou un libellé pour le contenu associé, tel qu'une Card ou une VerticalList.

Utilisez des puces de titre pour des informations concises, comme un titre court, un nom de catégorie ou un indicateur d'état. En règle générale, vous devez placer les puces de titre au-dessus du contenu qu'elles décrivent pour établir une relation structurelle claire.

Figure 1. Exemple de puce de titre de style par défaut et de puce de titre fixe dans Jetpack Compose Glimmer. Chaque puce de titre comporte un libellé (1) et une icône ou une entité de début facultative (2).

Exemple de base : créer une puce de titre courte

Le code suivant crée une puce de titre de base :

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

Exemple de base : créer une puce de titre avec une icône

Le code suivant crée une puce de titre avec une icône :

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

Exemple : créer une puce de titre avec une carte

Pour utiliser une puce de titre avec un autre composant, placez la puce de titre TitleChipDefaults.associatedContentSpacing au-dessus de l'autre composant dans le composable. Le code suivant crée une puce de titre avec une carte :

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

Points clés concernant le code

  • La puce de titre est centrée horizontalement, ce qui correspond à l'alignement habituel d'une puce de titre placée au-dessus d'une carte.
  • Le Spacer a une hauteur fixe pour fournir la bonne quantité d'espacement vertical entre les deux composants. Cette valeur est définie à l'aide de TitleChipDefaults.associatedContentSpacing.
  • Utilise un leadingIcon facultatif pour ajouter un contexte visuel supplémentaire avant le contenu textuel.
  • La puce de titre utilise automatiquement le caption style pour son texte.
  • La puce de titre n'est pas interactive. Si vous avez besoin d'un libellé cliquable, utilisez un Button ou un autre composant interactif.