Il composable Card
funge da contenitore Material Design per l'interfaccia utente.
Le schede presentano un singolo contenuto coerente, ad esempio:
- Un prodotto in un'app di shopping.
- Una notizia in un'app di notizie.
- Un messaggio in un'app di comunicazione.
L'attenzione alla rappresentazione di un singolo contenuto distingueCard
da altri contenitori. Ad esempio, Scaffold
fornisce la struttura generale
a un'intera schermata. La scheda è un elemento dell'interfaccia utente più piccolo all'interno di un layout più grande, mentre un componente di layout come Column
o Row
fornisce un'API più semplice e generica.
Questo argomento spiega come implementare quattro tipi di schede:
Compatibilità delle versioni
Questa implementazione richiede che il valore minSDK del progetto sia impostato sul livello API 21 o superiore.
Dipendenze
Creare una scheda di base
Card
si comporta in modo molto simile agli altri contenitori in Compose. Dichiari i relativi contenuti richiamando altri composabili al suo interno. Ad esempio, considera come Card
contiene una chiamata a Text
nel seguente esempio minimo:
Creare una scheda compilata
L'elemento chiave è l'utilizzo della proprietà colors
per modificare il colore preenchimento:
Risultati

Creare una scheda in evidenza
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.
Risultati

Creare una scheda con riquadro
Di seguito è riportato un esempio di scheda con bordi. Utilizza il composable dedicato
OutlinedCard
.
Risultati

Punti chiave
Consulta il riferimento per la definizione dell'API di Card
. Definisce diversi parametri che puoi utilizzare per personalizzare l'aspetto e il comportamento del componente.
Alcuni parametri chiave includono:
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
. Utilizza questo sovraccarico quando vuoi che la tua implementazione diCard
risponda ai clic dell'utente.
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 documentazioneScroll
.
Raccolte che contengono questa guida
Questa guida fa parte di queste raccolte di guide rapide selezionate che coprono obiettivi di sviluppo Android più ampi:
