Scheda

Il composable Card funge da contenitore Material Design per l'interfaccia utente. In genere, le schede presentano un singolo contenuto coerente. Di seguito sono riportati alcuni esempi di casi in cui 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 distingueCard da altri contenitori. Ad esempio, Scaffold fornisce una struttura generale a un intero schermo. La scheda è in genere 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 elevata con testo e icone.
Figura 1. Un esempio di scheda con testo e icone.

Implementazione di base

Card si comporta in modo molto simile agli altri contenitori in Compose. Dichiari i relativi contenuti richiamando altri composable 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 in considerazione:

  • 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, il sovraccarico principale che vuoi notare è quello che definisce un parametro onClick. Devi utilizzare questo sovraccarico se vuoi che l'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 con riempimento

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

L'elemento chiave è l'utilizzo della proprietà colors per modificare il colore preenchimento.

@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 è visualizzata come segue:

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

Scheda in rilievo

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.

@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 è visualizzata come segue:

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

Scheda con contorni

Di seguito è riportato un esempio di scheda con bordi. Utilizza l'elemento 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,
        )
    }
}
Card.kt

Questa implementazione è visualizzata come segue:

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

Limitazioni

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 documentazione su scorrimento.

Risorse aggiuntive