Fiches
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Le composant Fiche contient du contenu et des actions concernant un seul sujet.
Anatomie
Un composant Fiche ne comporte qu'un seul emplacement. Les fiches peuvent contenir des icônes, des images ou des étiquettes. Elles sont personnalisables.
Par défaut, les fiches sont rectangulaires avec des coins arrondis et un arrière-plan en dégradé. Définissez la hauteur maximale de votre fiche sur 60 % pour vous assurer qu'elle s'affiche entièrement sur l'écran, car les écrans circulaires peuvent rogner jusqu'à 20 % du haut et du bas de l'écran.
Image statique de démarrage
Utilisez les images statiques de démarrage pour afficher des informations dans une application, comme un message. Les images statiques de démarrage se composent de trois emplacements qui incluent un titre, un champ de date facultatif et le contenu correspondant (image ou texte).
Fiche d'application
Utilisez les fiches d'application pour afficher des éléments interactifs provenant de plusieurs applications. Les fiches d'application comportent une mise en page à cinq emplacements qui incluent une icône d'application, le nom de l'application, l'heure à laquelle l'activité s'est produite, un titre et le contenu pertinent (une image ou du texte).
Dégradé de cartes
Dégradé de carte
Haut/Gauche + Marge intérieure de 68 dp à partir de la gauche = 100% de la surface
Bas/Droite = 0% de la surface
Superposition de fiche image
Haut/Gauche + Marge intérieure de 56 dp à partir de T/L = 100% de la surface
Bas/Droite + Marge intérieure de 24 dp à partir de B/R = 0% de surface
(superpositions en dégradé sur un arrière-plan d'image)
Tailles
Largeur de la fiche
La largeur maximale des fiche est définie par défaut sur le conteneur.
Hauteur de la vignette
La hauteur de la fiche est flexible. Il est déterminé par le contenu des composants.
Sur les cadrans ronds, les fiches qui dépassent 60% de la hauteur de l'écran sont tronquées.
Utilisation
Mises en page adaptatives
TitleCard
Sur les écrans plus grands, une ligne de texte supplémentaire est autorisée pour le corps du texte. Pour afficher une plus grande partie de l'image, ajoutez une marge intérieure de 24 dp en bas.
TitleCard avec une image intégrée (remplace l'emplacement du corps)
Sur les grands écrans, l'image ne change pas de format et dispose d'une marge intérieure à droite afin que la hauteur de la carte ne soit pas trop grande.
Cartes avec une personnalisation supplémentaire
Carte avec une image en arrière-plan
Pour obtenir cette mise en page, vous devez la personnaliser.
Les fiches d'image affichent du contenu sur un seul sujet avec une image de fond. Elles peuvent également afficher des images autonomes.
Nous vous recommandons d'augmenter la marge intérieure inférieure à 24 dp afin d'afficher une plus grande partie de l'image de fond sans texte au-dessus.
Le contenu et les exemples de code de cette page sont soumis aux licences décrites dans la Licence de contenu. 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 2025/07/27 (UTC).
[[["Facile à comprendre","easyToUnderstand","thumb-up"],["J'ai pu résoudre mon problème","solvedMyProblem","thumb-up"],["Autre","otherUp","thumb-up"]],[["Il n'y a pas l'information dont j'ai besoin","missingTheInformationINeed","thumb-down"],["Trop compliqué/Trop d'étapes","tooComplicatedTooManySteps","thumb-down"],["Obsolète","outOfDate","thumb-down"],["Problème de traduction","translationIssue","thumb-down"],["Mauvais exemple/Erreur de code","samplesCodeIssue","thumb-down"],["Autre","otherDown","thumb-down"]],["Dernière mise à jour le 2025/07/27 (UTC)."],[],[],null,["# Cards\n\nThe [Card](/reference/kotlin/androidx/wear/compose/material/package-summary#Card(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.graphics.Color,kotlin.Boolean,androidx.compose.foundation.layout.PaddingValues,androidx.compose.ui.graphics.Shape,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.semantics.Role,kotlin.Function1)) component contains content and actions about a single subject.\n\nAnatomy\n-------\n\nA card component only has a single slot. Cards can contain icons, images or labels, are customizable.\n\nBy default, cards are rectangular with rounded corners and a gradient background. Set the maximum height of your card to 60% to ensure that it's fully displayed on the screen because circular displays can clip up to 20% of the top and bottom of the screen.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Title Card**\n\nUse [Title cards](/reference/kotlin/androidx/wear/compose/material/package-summary#TitleCard(kotlin.Function0,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function1,androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1)) to show information within an application, such as a message. Title cards have a three-slot layout which includes a title, an optional time field, and the relevant content, which is either an image or text. \n**App Card**\n\nUse [App cards](/reference/kotlin/androidx/wear/compose/material/package-summary#AppCard(kotlin.Function0,kotlin.Function1,kotlin.Function1,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function1,androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1)) to show interactive elements from multiple applications. App cards have a five-slot layout that includes an application icon, the application name, the time that the activity occurred, a title of some sort and the relevant content, which is either an image or text.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nCards gradient\n--------------\n\n**Card Gradient**\n\nTop/Left + 68dp padding from Left = 100% Surface \n\nBottom/Right = 0% Surface\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Image Card Overlay**\n\nTop/Left + 56 dp padding from T/L = 100% Surface \n\nBottom/Right + 24 dp padding from B/R = 0% Surface \n\n(Gradient overlays on a image background)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nSizes\n-----\n\n**Card width**\n\nCards default to the maximum width of the container.\n\n\u003cbr /\u003e\n\n**Card height**\n\n\u003cbr /\u003e\n\nCard height is flexible. It is determined by the components' content.\n\nOn round watch faces, cards that are taller than 60% of the height of the screens are clipped.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nUsage\n-----\n\nAdaptive layouts\n----------------\n\n**TitleCard**\n\nOn larger screens we allow an extra line of text for body copy. And in order to display more of the image, add an enlarged 24 dp padding at the bottom.\n\n**TitleCard with in-line image (replacing the body copy slot)**\n\nOn larger screens, the image doesn't change its aspect ratio and has the padding on the right in order to not make the height of the card too big.\n\n### Cards with additional customization\n\n**Card with an image background** \nIn order to achieve this layout you will need customization. \n\n\nImage cards display content relating to a single topic with a background image. Image cards can also display standalone images. \n\n\nIt is recommended that the bottom padding is increased to 24 dp in order to display more of the background image without text over it.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e"]]
