Scheda

Il componibile Card funge da container Material Design per la tua UI. In genere le schede presentano un singolo contenuto coerente. Ecco alcuni esempi di dove potresti utilizzare una scheda:

  • Un prodotto in un'app per gli acquisti.
  • Una notizia in un'app di notizie.
  • Un messaggio in un'app di comunicazione.

Lo scopo principale è presentare un singolo contenuto che distingua Card dagli altri contenitori. Ad esempio, Scaffold fornisce una struttura generale a un intero schermo. Scheda di solito è 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 più 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 container in Compose. Dichiari i contenuti richiamando altri componibili al loro interno. Considera ad esempio come Card contiene una chiamata a Text nell'esempio minimo che segue:

@Composable
fun CardMinimalExample() {
    Card() {
        Text(text = "Hello, world!")
    }
}

Implementazioni avanzate

Consulta il riferimento per la definizione dell'API 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 apparire in alto sullo sfondo.
  • colors: utilizza il tipo CardColors per impostare il colore predefinito sia del contenitore che 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. Dovresti usare questo sovraccarico se vuoi che la tua implementazione di Card risponda alle pressioni dell'utente.

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

Scheda riempita

Di seguito è riportato un esempio di come puoi implementare una carta riempita.

La chiave in questo caso è l'utilizzo della proprietà colors per modificare il colore di colore.

@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 si presenta nel seguente modo:

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

Scheda elevata

Il seguente snippet mostra come implementare una scheda con privilegi elevati. Utilizza l'apposito componibile ElevatedCard.

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 si presenta nel seguente modo:

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

Scheda con contorni

Di seguito è riportato un esempio di scheda con contorni. 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 si presenta nel seguente modo:

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

Limitazioni

Le schede non includono azioni di scorrimento o chiusura intrinseche, ma possono integrarsi nei componibili che offrono queste funzionalità. Ad esempio, per implementare lo scorrimento per chiudere in una scheda, integrala con il componibile SwipeToDismiss. Per l'integrazione con lo scorrimento, utilizza i modificatori di scorrimento, come verticalScroll. Per ulteriori informazioni, consulta la documentazione relativa allo scorrimento.

Risorse aggiuntive