Il componibile Card
funge da container Material Design per la tua UI.
In genere le schede presentano un singolo contenuto coerente. Ecco alcuni esempi di dove potresti utilizzare una scheda:
- 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 distingua Card
dagli altri contenitori. Ad esempio, Scaffold
fornisce una struttura
generale a un intero schermo. Scheda di solito è 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 contenuti richiamando
altri componibili al loro interno. Considera ad esempio 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 apparire in alto sullo sfondo.colors
: utilizza il tipoCardColors
per impostare il colore predefinito sia del contenitore che 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, il sovraccarico principale che vuoi notare è quello che definisce un parametroonClick
. Dovresti usare questo sovraccarico se vuoi che la tua implementazione diCard
risponda alle pressioni dell'utente.
L'esempio seguente illustra come utilizzare questi parametri, oltre ad 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
di 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:
Scheda elevata
Il seguente snippet mostra come implementare una scheda con privilegi elevati. Utilizza
l'apposito componibile ElevatedCard
.
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 si presenta nel seguente modo:
Scheda con contorni
Di seguito è riportato un esempio di scheda con contorni. Utilizza l'elemento componibile
OutlinedCard
dedicato.
@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 includono azioni di scorrimento o chiusura intrinseche, ma possono integrarsi nei
componibili che offrono queste funzionalità. Ad esempio, per implementare lo scorrimento per chiudere
in una scheda, integrala con il componibile SwipeToDismiss
. Per l'integrazione
con lo scorrimento, utilizza i modificatori di scorrimento, come verticalScroll
. Per ulteriori informazioni, consulta la documentazione relativa allo scorrimento.