Scheda

Il Card componibile funge da contenitore Material Design per la tua UI. In genere, le schede presentano un singolo contenuto coerente. Di seguito sono riportati alcuni esempi di dove 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.

È l'attenzione alla rappresentazione di un singolo contenuto che distingue Card da altri contenitori. Ad esempio, Scaffold fornisce una struttura generale a un'intera schermata. In genere, Card è 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 generica.

Una scheda sollevata compilata con testo e icone.
Figura 1. Un esempio di scheda con testo e icone.

Implementazione di base

Card si comporta in modo simile ad altri contenitori in Compose. Dichiari il suo contenuto chiamando altri componibili al suo interno. Ad esempio, considera come Card contiene una 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 di Card. Definisce diversi parametri che consentono di personalizzare l'aspetto e il comportamento del componente.

Di seguito sono riportati alcuni parametri chiave da tenere presente:

  • elevation: aggiunge un'ombra al componente che lo fa apparire elevato rispetto allo sfondo.
  • colors: utilizza il tipo CardColors per impostare il colore predefinito sia del contenitore sia di tutti gli 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. Pertanto, il sovraccarico principale da notare è quello che definisce un parametro onClick. Dovresti utilizzare questo sovraccarico se vuoi che la tua implementazione di Card 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 riempita.

La chiave qui è l'utilizzo della proprietà colors per modificare il colore di riempimento.

@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,
        )
    }
}
Card.kt

Ecco come appare la barra:

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

Scheda elevata

Il seguente snippet mostra come implementare una scheda elevata. Utilizza il componibile 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,
        )
    }
}
Card.kt

Ecco come appare la barra:

Una scheda è sollevata sopra lo sfondo dell'app, con un'ombra.
Figura 3. Esempio di scheda elevata.

Scheda con contorno

Di seguito è riportato un esempio di scheda con contorno. Utilizza il componibile 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,
        )
    }
}
Card.kt

Ecco come appare la barra:

Una carta è contornata da un sottile bordo nero.
Figura 4. Esempio di scheda con contorno.

Limitazioni

Le schede non sono dotate di azioni di scorrimento o chiusura intrinseche, ma possono essere integrate in componibili che offrono queste funzionalità. Ad esempio, per implementare lo scorrimento per chiudere una scheda, integrala con il SwipeToDismiss componibile. Per l'integrazione con lo scorrimento, utilizza modificatori di scorrimento come verticalScroll. Per maggiori informazioni, consulta la documentazione sullo scorrimento.

Risorse aggiuntive