Jeux de cartes

Le composable Card se comporte comme un conteneur Material Design pour votre interface utilisateur. Les cartes présentent un seul élément de contenu cohérent. Voici quelques exemples d'utilisation d'une carte :

  • Un produit dans une application d'achat
  • Un reportage dans une application d'actualités
  • Un message dans une application de communication

Ce qui différencie Card des autres conteneurs est le fait qu'il ne présente qu'un seul élément de contenu. Par exemple, Scaffold fournit une structure générale pour un écran entier. Une carte est généralement un élément d'interface utilisateur plus petit à l'intérieur d'une mise en page conséquente, tandis qu'un composant de mise en page comme Column ou Row offre une API plus simple et plus générique.

Une carte surélevée contenant du texte et des icônes.
Figure 1 : Un exemple de carte contenant du texte et des icônes.

Implémentation de base

Card se comporte comme les autres conteneurs dans Compose. Vous déclarez son contenu en appelant d'autres composables dans ce conteneur. Par exemple, observez comment Card contient un appel à Text dans le court exemple suivant :

@Composable
fun CardMinimalExample() {
    Card() {
        Text(text = "Hello, world!")
    }
}

Implémentations avancées

Consultez la documentation de référence pour la définition de l'API de Card. Elle définit plusieurs paramètres afin de vous permettre de personnaliser l'apparence et le comportement du composant.

Voici certains paramètres clés :

  • elevation : ajoute une ombre au composant, le faisant apparaître comme surélevé par rapport à l'arrière-plan.
  • colors : utilise le type CardColors pour définir la couleur par défaut du conteneur et des enfants.
  • enabled : si ce paramètre indique false, la carte apparaît comme désactivée et ne répond pas aux entrées utilisateurs.
  • onClick : en général, une Card n'accepte pas les événements de clic. Ainsi, la première surcharge à noter est celle qui définit un paramètre onClick. Vous devez utiliser cette surcharge si vous souhaitez que votre implémentation de Card réponde aux interactions de l'utilisateur avec son écran.

L'exemple suivant montre comment utiliser ces paramètres, ainsi que d'autres paramètres communs tels que shape et modifier.

Carte pleine

Voici un exemple d'implémentation d'une carte pleine.

La clé ici est d'utiliser la propriété colors afin de changer la couleur de remplissage.

@Composable
fun FilledCardExample() {
    Card(
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surfaceVariant,
        ),
        modifier = Modifier
            .size(width = 240.dp, height = 100.dp)
    ) {
        Text(
            text = "Filled",
            modifier = Modifier
                .padding(16.dp),
            textAlign = TextAlign.Center,
        )
    }
}
Card.kt

Cette implémentation est la suivante :

Une carte est remplie avec la couleur de la variante de la surface du thème Material.
Figure 2 : Exemple d'une carte pleine.

Carte surélevée

L'extrait de code suivant montre comment implémenter une carte surélevée. Utilisez le composable ElevatedCard prévu à cet effet.

Vous pouvez utiliser la propriété elevation afin de contrôler l'apparence de l'élévation et de l'ombre correspondante.

@Composable
fun ElevatedCardExample() {
    ElevatedCard(
        elevation = CardDefaults.cardElevation(
            defaultElevation = 6.dp
        ),
        modifier = Modifier
            .size(width = 240.dp, height = 100.dp)
    ) {
        Text(
            text = "Elevated",
            modifier = Modifier
                .padding(16.dp),
            textAlign = TextAlign.Center,
        )
    }
}
Card.kt

Cette implémentation est la suivante :

Une carte est surélevée par rapport à l'arrière-plan de l'application, avec une ombre.
Figure 3 : Exemple d'une carte surélevée.

Carte avec contours

Voici un exemple d'une carte avec contours. Utilisez le composable OutlinedCard prévu à cet effet.

@Composable
fun OutlinedCardExample() {
    OutlinedCard(
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surface,
        ),
        border = BorderStroke(1.dp, Color.Black),
        modifier = Modifier
            .size(width = 240.dp, height = 100.dp)
    ) {
        Text(
            text = "Outlined",
            modifier = Modifier
                .padding(16.dp),
            textAlign = TextAlign.Center,
        )
    }
}
Card.kt

Cette implémentation est la suivante :

Une carte est entourée d'une fine bordure noire.
Figure 4 : Exemple d'une carte avec contours.

Limites

Les cartes ne sont pas dotées d'actions "faire défiler" et "ignorer" inhérentes, mais elles peuvent être intégrées à des composables offrant ces fonctionnalités. Par exemple, pour implémenter la fonctionnalité "balayer pour ignorer" sur une carte, intégrez-la avec le composable SwipeToDismiss. Pour l'intégrer avec le défilement, utilisez des modificateurs de défilement comme verticalScroll. Pour plus d'informations, consultez la documentation relative au défilement.

Ressources supplémentaires