Il componibile Card
funge da container Material Design per la tua UI.
In genere le schede presentano un singolo contenuto coerente. Di seguito sono riportate le
alcuni esempi di dove potresti utilizzare una carta:
- Un prodotto in un'app per gli acquisti.
- Una notizia in un'app di notizie.
- Un messaggio in un'app di comunicazione.
Lo scopo principale è presentare un singolo contenuto che distingue
Card
da altri container. Ad esempio, Scaffold
fornisce una struttura generale
su uno schermo intero. La scheda è generalmente un elemento UI più piccolo all'interno di un
layout, mentre un componente di layout come Column
o Row
offre una
e API più generiche.
Implementazione di base
Card
si comporta in modo molto simile agli altri container in Compose. Dichiari i relativi contenuti
e chiamare altri componibili al suo interno. Ad esempio, considera il modo in cui Card
contiene un
chiamata a Text
nel seguente esempio minimo:
@Composable
fun CardMinimalExample() {
Card() {
Text(text = "Hello, world!")
}
}
Implementazioni avanzate
Consulta il riferimento per la definizione dell'API Card
. definisce diversi
che consentono di personalizzare l'aspetto e il comportamento dei
di strumento di authoring.
Ecco alcuni parametri chiave da tenere in considerazione:
elevation
: aggiunge un'ombra al componente che lo rende visibile rispetto allo sfondo.colors
: utilizza il tipoCardColors
per impostare il colore predefinito di entrambi il container e gli eventuali elementi figlio.enabled
: se passifalse
per questo parametro, la scheda viene visualizzata come è disattivata e non risponde all'input dell'utente.onClick
: in genere, unCard
non accetta eventi di clic. Di conseguenza, il sovraccarico principale è quello che definisce ParametroonClick
. Dovresti usare questo sovraccarico se vuoi che implementazione diCard
per rispondere alle pressioni dell'utente.
L'esempio seguente mostra come utilizzare questi parametri e
come altri parametri comuni come shape
e modifier
.
Scheda riempita
Di seguito è riportato un esempio di come puoi implementare una carta riempita.
La chiave in questo caso è l'utilizzo della proprietà colors
per modificare il
colore.
@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, ) } }
Questa implementazione si presenta nel seguente modo:
![Una scheda viene riempita con il colore della variante della superficie del tema Materiale.](https://developer.android.com/static/develop/ui/compose/images/components/card-filled.png?authuser=9&hl=it)
Scheda elevata
Il seguente snippet mostra come implementare una scheda con privilegi elevati. Utilizza la
componibile ElevatedCard
dedicato.
Puoi utilizzare la proprietà elevation
per controllare l'aspetto dell'elevazione e
all'ombra risultante.
@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, ) } }
Questa implementazione si presenta nel seguente modo:
![Una scheda è visualizzata in alto sopra lo sfondo dell'app, con un'ombra.](https://developer.android.com/static/develop/ui/compose/images/components/card-elevated.png?authuser=9&hl=it)
Scheda con contorni
Di seguito è riportato un esempio di scheda con contorni. Utilizza l'interfaccia
OutlinedCard
componibile.
@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, ) } }
Questa implementazione si presenta nel seguente modo:
![Una scheda è contornata da un sottile bordo nero.](https://developer.android.com/static/develop/ui/compose/images/components/card-outlined.png?authuser=9&hl=it)
Limitazioni
Le schede non includono azioni di scorrimento o ignora intrinseche, ma possono essere integrate in
componibili che offrono queste funzionalità. Ad esempio, per implementare lo scorrimento per ignorare
su una scheda, integrala nel componibile SwipeToDismiss
. Per l'integrazione
con lo scorrimento, usa i modificatori di scorrimento, come verticalScroll
. Guarda la scorrimento
documentazione per ulteriori informazioni.