Scheda

Il composable Card funge da container Material Design per la tua UI. In genere, le schede presentano un singolo contenuto coerente. I seguenti esempi mostrano dove potresti utilizzare una scheda:

  • Un prodotto in un'app per lo 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 la struttura generale di un'intera schermata. La scheda è in genere 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 in rilievo compilata con testo e icone.
Figura 1. Esempio di una scheda compilata con testo e icone.

Implementazione di base

Card si comporta in modo molto simile ad altri container in Compose. Dichiari i suoi contenuti chiamando altri elementi 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.

Ecco alcuni parametri chiave da tenere presenti:

  • elevation: aggiunge un'ombra al componente che lo fa apparire sollevato rispetto allo 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. Pertanda, l'overload principale che devi tenere presente è quello che definisce un parametro onClick. Devi utilizzare questo overload se vuoi che la tua implementazione di Card risponda alle pressioni dell'utente.

L'esempio seguente mostra come utilizzare questi parametri, oltre ad altri parametri comuni come shape e modifier.

Filled card

Di seguito è riportato un esempio di come implementare una scheda con sfondo.

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,
        )
    }
}

Ecco come appare la barra:

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

Scheda con elevazione

Il seguente snippet mostra come implementare una scheda in rilievo. 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,
        )
    }
}

Ecco come appare la barra:

Una scheda è sollevata rispetto allo sfondo dell'app, con un'ombra.
Figura 3. Esempio di scheda in rilievo.

Scheda con contorno

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

Ecco come appare la barra:

Una carta è delineata 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 elementi componibili che offrono queste funzionalità. Ad esempio, per implementare lo scorrimento per chiudere su una scheda, integralo con il componibile SwipeToDismiss. Per l'integrazione con lo scorrimento, utilizza modificatori di scorrimento come verticalScroll. Per saperne di più, consulta la documentazione di Scroll.

Risorse aggiuntive