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

Dans Jetpack Compose Glimmer, le composant Card est conçu pour regrouper et afficher des informations associées dans une même unité. 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 remplissent la largeur maximale de l'écran des lunettes d'IA, sont sélectionnables et peuvent également être cliquables.

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

Anatomie et emplacements des cartes

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

  • 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 fiche.

  • Icône de début : icône facultative qui s'affiche au début de la zone de contenu de la fiche.

  • Icône de fin : icône facultative qui s'affiche à la fin de la zone de contenu de la carte.

  • Action : emplacement pour un élément interactif principal, tel qu'un bouton. Cela permet aux utilisateurs d'effectuer une action directement depuis la fiche. L'emplacement est disponible sur une surcharge distincte du composable Card.

  • Contenu principal : corps principal de la carte, où vous placez le texte principal ou d'autres contenus.

Exemple de base : créer une carte de base

Vous pouvez créer une carte très simple avec très peu de code :

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

Exemple détaillé : afficher une fiche complexe

Le code suivant montre comment utiliser plusieurs emplacements ensemble pour créer une carte. Il montre également comment associer un Card à un TitleChip.

@Composable
fun SampleGlimmerCard() {
    val myHeaderImage = painterResource(id = R.drawable.header_image)
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        TitleChip { Text("Title Chip") }
        Spacer(Modifier.height(TitleChipDefaults.AssociatedContentSpacing))
        Card(
            action = {
                Button(onClick = {}) {
                    Text("Action Button")
                }
            },
            header = {
                Image(
                    painter = myHeaderImage,
                    contentDescription = "Header image for the card",
                    contentScale = ContentScale.FillWidth
                )
            },
            title = { Text("Card Title") },
            subtitle = { Text("Card Subtitle") },
            leadingIcon = { FavoriteIcon, "Localized description" },
            trailingIcon = { FavoriteIcon, "Localized description" }
        ) {
            Text("A Jetpack Compose Glimmer Card using all available slots")
        }
    }
}

Points clés concernant le code