Carte
Mantieni tutto organizzato con le raccolte
Salva e classifica i contenuti in base alle tue preferenze.
Il componente Scheda include contenuti e azioni relativi a un singolo argomento.
Anatomia
Un componente della scheda ha un solo slot. Le schede possono contenere icone, immagini o etichette e sono personalizzabili.
Per impostazione predefinita, le schede sono rettangolari con angoli arrotondati e uno sfondo sfumato. Imposta l'altezza massima della scheda al 60% per assicurarti che venga visualizzata completamente sullo schermo, poiché i display circolari possono ritagliare fino al 20% della parte superiore e inferiore dello schermo.
Intertitolo
Utilizza gli intertitoli per mostrare le informazioni all'interno di un'applicazione, ad esempio un messaggio. Gli intertitoli hanno un layout a tre spazi che include un titolo, un campo temporale facoltativo e i contenuti pertinenti, cioè un'immagine o un testo.
Scheda dell'app
Utilizza le schede delle app per mostrare elementi interattivi di più applicazioni. Le schede delle app hanno un layout a cinque slot che include un'icona dell'applicazione, il nome dell'applicazione, l'ora in cui si è verificata l'attività, un titolo di qualche tipo e i contenuti pertinenti, ovvero un'immagine o del testo.
Gradiente schede
Sfumatura scheda
In alto/a sinistra + 68 dp di spaziatura interna da sinistra = 100% superficie
Basso/destra = 0% superficie
Overlay scheda immagine
In alto/a sinistra + 56 dp di spaziatura interna da T/L = 100% di superficie
In basso/a destra + 24 dp di spaziatura interna da B/R = 0% di superficie
(Overlay di sfumatura su uno sfondo dell'immagine)
Dimensioni
Larghezza della scheda
Per impostazione predefinita, le schede utilizzano la larghezza massima del contenitore.
Altezza della scheda
L'altezza della scheda è flessibile. Viene determinato dai contenuti dei componenti.
Sui quadranti rotondi, le schede più alte del 60% dell'altezza degli schermi vengono tagliate.
Utilizzo
Layout adattivi
Titolo
Sugli schermi più grandi è consentita una riga di testo aggiuntiva per il corpo del testo. Per mostrare più aree dell'immagine, aggiungi una spaziatura interna ingrandita di 24 dp nella parte inferiore.
Titolo con immagine in linea (sostituisce l'area del testo del corpo)
Su schermi più grandi, l'immagine non cambia le proporzioni e ha la spaziatura interna a destra per non rendere troppo grande l'altezza della scheda.
Schede con personalizzazione aggiuntiva
Scheda con un'immagine di sfondo
Per ottenere questo layout, avrai bisogno della personalizzazione.
Le schede immagine mostrano contenuti relativi a un singolo argomento con un'immagine di sfondo. Le schede immagine possono anche mostrare immagini autonome.
Ti consigliamo di aumentare la spaziatura interna inferiore a 24 dp per visualizzare una porzione maggiore dell'immagine di sfondo senza testo.
I campioni di contenuti e codice in questa pagina sono soggetti alle licenze descritte nella Licenza per i contenuti. Java e OpenJDK sono marchi o marchi registrati di Oracle e/o delle sue società consociate.
Ultimo aggiornamento 2025-07-27 UTC.
[[["Facile da capire","easyToUnderstand","thumb-up"],["Il problema è stato risolto","solvedMyProblem","thumb-up"],["Altra","otherUp","thumb-up"]],[["Mancano le informazioni di cui ho bisogno","missingTheInformationINeed","thumb-down"],["Troppo complicato/troppi passaggi","tooComplicatedTooManySteps","thumb-down"],["Obsoleti","outOfDate","thumb-down"],["Problema di traduzione","translationIssue","thumb-down"],["Problema relativo a esempi/codice","samplesCodeIssue","thumb-down"],["Altra","otherDown","thumb-down"]],["Ultimo aggiornamento 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"]]
