Creare una scheda come contenitore

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

Una scheda è riempita con il colore della variante della superficie del tema Material.
Figura 1. Esempio di scheda compilata.

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

Una scheda è sopra lo sfondo dell'app, con un'ombra.
Figura 2. Esempio di una scheda in evidenza.

Creare una scheda con riquadro

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

Risultati

Una scheda è delineata da un bordo nero sottile.
Figura 3. Esempio di scheda con bordi.

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 tipo CardColors per impostare il colore predefinito sia del contenitore sia di eventuali elementi secondari.
  • enabled: se passi false per questo parametro, la scheda viene visualizzata come disattivata e non risponde all'input dell'utente.
  • onClick: in genere, un Card non accetta eventi di clic. Di conseguenza, la sovraccarica principale da tenere presente è quella che definisce un parametro onClick. Utilizza questo sovraccarico quando vuoi che la tua implementazione di Card 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:

Scopri come le funzioni composable possono aiutarti a creare facilmente magnifici componenti dell'interfaccia utente basati sul sistema di progettazione Material Design.
Collezione di guide rapide

Domande o feedback

Visita la nostra pagina delle domande frequenti e scopri le guide rapide o contattaci per farci sapere cosa ne pensi.
Vai alle domande frequenti Lascia un feedback