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

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

Utilisez des chips de titre pour afficher 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 chips de titre au-dessus du contenu qu'ils décrivent pour établir une relation structurelle claire.

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

Exemple de base : créer un chip de titre court

Le code suivant crée un chip de titre de base :

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

Points clés concernant le code

  • La puce de titre est centrée horizontalement, ce qui est l'alignement habituel pour 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 du contexte visuel avant le contenu textuel.
  • Le chip de titre utilise automatiquement le style caption pour son texte.
  • Le chip de titre n'est pas interactif. Si vous avez besoin d'un libellé cliquable, utilisez un Button ou un autre composant interactif.