Cartes 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 Card composant sert de conteneur principal pour le contenu associé, créant une limite visuelle claire pour les unités d'informations digestes. Les cartes sont très adaptables et prennent en charge des combinaisons de contenu principal, de titres facultatifs, de sous-titres et d'icônes de début ou de fin. Les cartes remplissent par défaut la largeur maximale disponible, sont ciblables et vous pouvez également les rendre cliquables. Les cartes sont disposées verticalement, l'image d'en-tête étant en haut, suivie du titre, du sous-titre et du corps du contenu.

Les cartes sont basées sur le système de surface Jetpack Compose Glimmer. Elles héritent donc de propriétés physiques telles que les effets de profondeur, le découpage et les mises en évidence cohérentes des bordures .

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

Anatomie et emplacements

Une carte Jetpack Compose Glimmer est composée de plusieurs éléments spécialisés qui vous permettent de personnaliser son contenu et sa mise en page.

Encoche Description

En-tête

Section supérieure de la carte, conçue pour contenir une image.

Titre et sous-titre

Ces champs de texte fournissent les libellés principal et secondaire de la carte. Le titre est placé au-dessus du sous-titre.

Icône précédant le texte

Icône facultative (généralement une Icon) qui apparaît au début de la zone de contenu de la carte.

Icône suivant le texte

Icône facultative qui apparaît à la fin de la zone de contenu de la carte.

Contenu principal

Corps principal de la carte pour le Text ou le contenu principal.

Valeurs par défaut des cartes

Les valeurs par défaut suivantes s'appliquent aux cartes :

  • Largeur : les cartes remplissent la largeur maximale disponible de l'écran pour optimiser la lisibilité sur les lunettes d'affichage.
  • Hauteur minimale : 80.dp
  • Espacement vertical du texte : 3.dp
  • Forme de l'en-tête : utilise RoundedCornerShape avec des angles de 24.dp
  • Marge intérieure du contenu : par défaut GlimmerTheme.componentSpacingValues.medium. Cela affecte la marge intérieure la plus externe autour des images d'en-tête et du conteneur de contenu.
  • Forme : par défaut, GlimmerTheme.shapes.medium.

  • Rendu du texte : utilise les valeurs par défaut de GlimmerTheme.typography pour les emplacements suivants :

Exemple : Carte de base

Le code suivant montre le code minimal nécessaire pour créer une carte :

Card { Text("This is a card") }

Exemple : Carte avec plusieurs emplacements

Le code suivant montre comment utiliser plusieurs emplacements ensemble pour créer une carte :

Card(
    title = { Text("Card Title", style = GlimmerTheme.typography.titleMedium) },
    subtitle = { Text("Sub-heading text", style = GlimmerTheme.typography.titleSmall) },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = "Favorite") },
    trailingIcon = { Icon(BookmarkIcon, contentDescription = "Bookmark") },
    header = {
        Image(
            painter = myHeaderImage,
            contentDescription = "Header image",
            contentScale = ContentScale.FillWidth
        )
    },
) {
    Text("This is a complete card")
}

Points clés concernant le code

  • Montre comment utiliser différents éléments de carte, tels que title, subtitle et leadingIcon, pour personnaliser le contenu et la structure de la carte.
  • Utilise la surcharge Card avec onClick pour rendre l'ensemble de la surface de la carte interactive.

Fiches d'action

Si vous souhaitez inclure un bouton d'action avec une carte, utilisez un ActionCard. Les fiches d'action comportent les mêmes éléments que les cartes standards et incluent également un paramètre action supplémentaire qui définit le bouton inférieur.

Figure 2. Exemple d'une ActionCard dans Jetpack Compose Glimmer.

Exemple : Fiche d'action de base

Ce code montre comment créer une ActionCard :

ActionCard(
    action = {
        Button(onClick = {}, trailingIcon = { Icon(FavoriteIcon, "Localized description") }) {
            Text("Send")
        }
    }
) {
    Text("This is a card with a title, leading icon, header image, and action")
}

Exemple : Fiche d'action avec une icône

Ce code montre comment créer une ActionCard plus complexe avec des icônes :

ActionCard(
    title = { Text("Card Title", style = GlimmerTheme.typography.titleMedium) },
    subtitle = { Text("Sub-heading text", style = GlimmerTheme.typography.titleSmall) },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = "Favorite") },
    header = {
        Image(
            painter = myHeaderImage,
            contentDescription = "Header image",
            contentScale = ContentScale.FillWidth
        )
    },
    action = {
        Button(onClick = { /* Handle action */ }) {
            Text("Action")
        }
    }
) {
    Text(
        "This is the main body content of the card, utilizing theme-tokens for consistent styling.",
        style = GlimmerTheme.typography.bodyMedium
    )
}