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

Dans Jetpack Compose Glimmer, le composant Card sert de conteneur principal pour le contenu associé, créant une limite visuelle claire pour les unités d'informations digestes. Les fiches sont très adaptables et peuvent combiner du contenu principal, des titres et sous-titres facultatifs, ainsi que des icônes de début ou de fin. Par défaut, les fiches occupent toute la largeur disponible, sont sélectionnables et peuvent également être cliquables. Les cartes sont compatibles avec une disposition verticale où l'image d'en-tête se trouve en haut, suivie du titre, du sous-titre et du contenu du corps.

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 clipping et les bordures cohérentes.

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

Anatomie et emplacements

Une fiche Jetpack Compose Glimmer est constitué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 de début

Icône facultative (généralement Icon) qui s'affiche au début de la zone de contenu de la carte.

Icône de fin

Icône facultative qui s'affiche à la fin de la zone de contenu de la fiche.

Action

Emplacement pour un élément interactif principal, tel qu'un Button.

Contenu principal

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

Valeurs par défaut des cartes

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

  • Largeur : les cartes occupent la largeur maximale disponible de l'écran pour optimiser la lisibilité sur les lunettes.
  • Hauteur minimale : 80.dp
  • Espacement vertical du texte : 3.dp
  • Forme de l'en-tête : utilise RoundedCornerShape avec des angles 24.dp
  • Marge intérieure du contenu : la valeur par défaut est 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 : la valeur par défaut est 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 crée une fiche de base :

@Composable
fun CardSample() {
    Card { Text("This is a card") }
}

Exemple : Carte complexe avec plusieurs emplacements

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

@Composable
fun CardWithTitleAndLeadingIconAndHeaderAndAction() {
    Card(
        action = {
            Button(onClick = {}, trailingIcon = { Icon(FavoriteIcon, "Localized description") }) {
                Text("Send")
            }
        },
        title = { Text("Title") },
        leadingIcon = { Icon(FavoriteIcon, "Localized description") },
        header = {
            Image(MyHeaderImage, "Localized description", contentScale = ContentScale.FillWidth)
        },
    ) {
        Text("This is a card with a title, leading icon, header image, and action")
    }
}

Points clés concernant le code

  • Montre comment utiliser différents éléments de carte, tels que header, title, leadingIcon et action, pour personnaliser le contenu et la structure de la carte.
  • Utilise la surcharge Card standard avec une action, car seule la carte (ou son action interne) doit être focusable. Si vous devez rendre toute la surface de la fiche interactive, utilisez plutôt la surcharge Card avec onClick.
  • Cette carte utilise un emplacement d'action. La surface de la carte n'est donc pas sélectionnable et la sélection est dirigée vers le bouton d'action.