Scheda

Il composable Card funge da contenitore Material Design per la tua UI. Le schede in genere 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 dagli altri contenitori. Ad esempio, Scaffold fornisce una struttura generale a un'intera schermata. Una scheda è generalmente 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.

Una scheda in rilievo completata con testo e icone.
Figura 1. Un esempio di scheda compilata con testo e icone.

Implementazione di base

Card si comporta in modo simile agli altri contenitori in Compose. Dichiari i suoi contenuti chiamando altri componenti compositi al suo interno. Ad esempio, considera come Card contenga 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 ti consentono di personalizzare l'aspetto e il comportamento del componente.

Ecco alcuni parametri chiave da tenere presente:

  • 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 trasmetti 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 segnalare è quello che definisce un parametro onClick. Devi utilizzare questo overload se vuoi che la tua implementazione di Card risponda alle pressioni dell'utente.

Il seguente esempio mostra come utilizzare questi parametri, nonché altri parametri comuni come shape e modifier.

Scheda con riempimento

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

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

Questa implementazione viene visualizzata nel seguente modo:

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

Scheda sollevata

Il seguente snippet mostra come implementare una scheda rialzata. Utilizza il componente componibile ElevatedCard dedicato.

Puoi utilizzare la proprietà elevation per controllare l'aspetto dell'elevazione e l'ombreggiatura 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

Questa implementazione viene visualizzata nel seguente modo:

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

Scheda con contorno

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

Questa implementazione viene visualizzata nel seguente modo:

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

Risorse aggiuntive