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.
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 typeCardColors
pour définir la couleur par défaut du conteneur et des enfants.enabled
: si ce paramètre indiquefalse
, la carte apparaît comme désactivée et ne répond pas aux entrées utilisateurs.onClick
: en général, uneCard
n'accepte pas les événements de clic. Ainsi, la première surcharge à noter est celle qui définit un paramètreonClick
. Vous devez utiliser cette surcharge si vous souhaitez que votre implémentation deCard
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, ) } }
Cette implémentation est la suivante :
![Une carte est remplie avec la couleur de la variante de la surface du thème Material.](https://developer.android.google.cn/static/develop/ui/compose/images/components/card-filled.png?authuser=8&hl=fr)
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, ) } }
Cette implémentation est la suivante :
![Une carte est surélevée par rapport à l'arrière-plan de l'application, avec une ombre.](https://developer.android.google.cn/static/develop/ui/compose/images/components/card-elevated.png?authuser=8&hl=fr)
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, ) } }
Cette implémentation est la suivante :
![Une carte est entourée d'une fine bordure noire.](https://developer.android.google.cn/static/develop/ui/compose/images/components/card-outlined.png?authuser=8&hl=fr)
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.