Il composable Card
funge da contenitore Material Design per l'interfaccia utente.
In genere, le schede presentano un singolo contenuto coerente. Di seguito sono riportati alcuni esempi di casi in cui potresti utilizzare una scheda:
- Un prodotto in un'app di shopping.
- Una notizia in un'app di notizie.
- Un messaggio in un'app di comunicazione.
Lo scopo principale è presentare un singolo contenuto che distingua Card
dagli altri contenitori. Ad esempio, Scaffold
fornisce una struttura
generale a un intero schermo. La scheda è generalmente un elemento UI più piccolo all'interno di un layout più grande, mentre un componente di layout come Column
o Row
fornisce un'API più semplice e più generica.
Implementazione di base
Card
si comporta in modo molto simile agli altri container in Compose. Dichiari i relativi contenuti richiamando altri composable al suo interno. Ad esempio, considera come Card
contiene una
chiamata a Text
nell'esempio minimo che segue:
@Composable
fun CardMinimalExample() {
Card() {
Text(text = "Hello, world!")
}
}
Implementazioni avanzate
Consulta il riferimento per la definizione dell'API Card
. Definisce diversi parametri che consentono di personalizzare l'aspetto e il comportamento del componente.
Ecco alcuni parametri chiave da tenere in considerazione:
elevation
: aggiunge un'ombra al componente che lo fa risaltare sullo sfondo.colors
: utilizza il tipoCardColors
per impostare il colore predefinito sia del contenitore sia di eventuali elementi secondari.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, la sovraccarica principale da tenere presente è quella che definisce un parametroonClick
. Devi utilizzare questo sovraccarico se vuoi che l'implementazione diCard
risponda alle pressioni dell'utente.
L'esempio seguente mostra come utilizzare questi parametri, nonché altri parametri comuni come shape
e modifier
.
Scheda riempita
Di seguito è riportato un esempio di come implementare una scheda compilata.
L'elemento chiave è l'utilizzo della proprietà colors
per modificare il colore preenchimento.
@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 è visualizzata come segue:
Scheda in rilievo
Il seguente snippet mostra come implementare una scheda in primo piano. Utilizza il composable ElevatedCard
dedicato.
Puoi utilizzare la proprietà elevation
per controllare l'aspetto dell'elevazione e
l'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 è visualizzata come segue:
Scheda con contorni
Di seguito è riportato un esempio di scheda con bordi. Utilizza il composable dedicato
OutlinedCard
.
@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:
Limitazioni
Le schede non dispongono di azioni di scorrimento o chiusura intrinseche, ma possono essere integrate nei composabili che offrono queste funzionalità. Ad esempio, per implementare lo scorrimento per ignorare su una scheda, integrala con il composable SwipeToDismiss
. Per eseguire l'integrazione con lo scorrimento, utilizza i modificatori di scorrimento come verticalScroll
. Per ulteriori informazioni, consulta la documentazione su scorrimento.