Carte - Jetpack Compose - Android Developers

08/12/2023 20:16 Carte | Jetpack Compose | Android Developers
Carte
Le composable Card
(https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary?
hl=fr#Card(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ma
terial3.CardColors,androidx.compose.material3.CardElevation,androidx.compose.foundation.BorderStr
oke,kotlin.Function1))
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.
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 :
https://developer.android.com/jetpack/compose/components/card?hl=fr 1/7
@Composable
fun CardMinimalExample() {
Card() {
Text(text = "Hello, world!")
}
}
Remarque : Par défaut, une Card encapsule son contenu dans un composable Column, en plaçant
chaque élément à l'intérieur de la carte les uns en dessous des autres.
Implémentations avancées
Consultez la documentation de référence
hl=fr#Card(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ma
terial3.CardColors,androidx.compose.material3.CardElevation,androidx.compose.foundation.BorderStr
oke,kotlin.Function1))
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 .
Bêta : la surcharge Card qui définit le paramètre onClick est expérimentale.
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,
)
}
}
de/compose/snippets/src/main/java/com/example/compose/snippets/components/Card.kt#L108-L124)
Cette implémentation est la suivante :
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
hl=fr#ElevatedCard(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.com
pose.material3.CardColors,androidx.compose.material3.CardElevation,kotlin.Function1))
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
) {
Text(
text = "Elevated",
modifier = Modifier
.padding(16.dp),
)
}
}
7de/compose/snippets/src/main/java/com/example/compose/snippets/components/Card.kt#L87-L103)
Figure 3 : Exemple d'une carte surélevée.
Carte avec contours

Voici un exemple d'une carte avec contours. Utilisez le composable OutlinedCard
hl=fr#OutlinedCard(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.com
pose.material3.CardColors,androidx.compose.material3.CardElevation,androidx.compose.foundation.B
orderStroke,kotlin.Function1))
prévu à cet effet.
@Composable
fun OutlinedCardExample() {
OutlinedCard(
colors = CardDefaults.cardColors(
containerColor = MaterialTheme.colorScheme.surface,
),
border = BorderStroke(1.dp, Color.Black),
modifier = Modifier
) {
Text(
text = "Outlined",
modifier = Modifier
.padding(16.dp),
)
}
}
de/compose/snippets/src/main/java/com/example/compose/snippets/components/Card.kt#L129-L146)
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
hl=fr#SwipeToDismiss(androidx.compose.material3.DismissState,kotlin.Function1,kotlin.Function1,andr
oidx.compose.ui.Modifier,kotlin.collections.Set))
. Pour l'intégrer avec le défilement, utilisez des modificateurs de défilement comme
verticalScroll
(https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary?
hl=fr#
(androidx.compose.ui.Modifier).verticalScroll(androidx.compose.foundation.ScrollState,kotlin.Boolean,
androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean))
. Pour plus d'informations, consultez la documentation relative au défilement
(https://developer.android.com/jetpack/compose/touch-input/pointer-input/scroll?hl=fr).
Ressources supplémentaires
Documentation sur les interfaces utilisateur Material
(https://m3.material.io/components/cards/overview)
Le contenu et les exemples de code de cette page sont soumis aux licences décrites dans la Licence de
contenu (https://developer.android.com/license?hl=fr). Java et OpenJDK sont des marques ou des
marques déposées d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2023/09/21 (UTC).

Carte - Jetpack Compose - Android Developers

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Carte - Jetpack Compose - Android Developers

Transféré par

Droits d'auteur :

Formats disponibles

08/12/2023 20:16 Carte | Jetpack Compose | Android Developers

Un produit dans une application d'achat

Un reportage dans une application d'actualités

Un message dans une application de communication

Figure 1 : Un exemple de carte contenant du texte et des icônes.

Voici certains paramètres clés :

elevation : ajoute une ombre au composant, le faisant apparaître comme surélevé

enabled : si ce paramètre indique false , la carte apparaît comme désactivée et ne

Bêta : la surcharge Card qui définit le paramètre onClick est expérimentale.

Cette implémentation est la suivante :

Figure 2 : Exemple d'une carte pleine.

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

Cette implémentation est la suivante :

Figure 3 : Exemple d'une carte surélevée.

Carte avec contours

Cette implémentation est la suivante :

Figure 4 : Exemple d'une carte avec contours.

Dernière mise à jour le 2023/09/21 (UTC).

Vous aimerez peut-être aussi