Scheda

Il componibile Card funge da contenitore di Material Design per la tua UI. Le schede in genere presentano un unico contenuto coerente. Di seguito sono riportati alcuni esempi di schede in cui potresti utilizzare una carta:

  • Un prodotto in un'app di shopping.
  • Una notizia in un'app di notizie.
  • Un messaggio in un'app di comunicazione.

Consente di rappresentare un singolo contenuto in grado di distinguere Card dagli altri container. Ad esempio, Scaffold fornisce una struttura generale a un'intera schermata. La scheda è in genere un elemento UI più piccolo all'interno di un layout più grande, mentre un componente del layout come Column o Row offre un'API più semplice e più generica.

Una scheda in evidenza con testo e icone.
Figura 1. Esempio di scheda completata con testo e icone.

Implementazione di base

Card si comporta in modo molto simile agli altri contenitori di Compose. Puoi dichiarare i contenuti richiamando altri componibili al suo interno. Ad esempio, nel seguente esempio minimo considera come Card contiene una chiamata a Text:

@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.

Alcuni parametri chiave da considerare sono i seguenti:

  • elevation: aggiunge un'ombra al componente che lo fa apparire sopra lo sfondo.
  • colors: utilizza il tipo CardColors per impostare il colore predefinito sia del contenitore sia degli eventuali elementi secondari.
  • enabled: se passi false per questo parametro, la scheda viene visualizzata come disabilitata e non risponde all'input utente.
  • onClick: in genere, un Card non accetta eventi di clic. Di conseguenza, l'overload principale da notare è quello che definisce un parametro onClick. Dovresti usare questo sovraccarico se vuoi che l'implementazione di Card risponda alle pressioni dell'utente.

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

Scheda piena

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

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

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

Una scheda è piena con il colore della variante della superficie del tema Materiale.
Figura 2. Esempio di una carta compilata.

Carta rialzata

Lo snippet riportato di seguito mostra come implementare una scheda con livello più elevato. 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

Questa implementazione si presenta come segue:

Una scheda con un'ombra sullo sfondo dell'app in evidenza.
Figura 3. Esempio di carta con un livello superiore.

Scheda con contorni

Di seguito è riportato un esempio di scheda con contorni. Utilizza l'elemento 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

Questa implementazione si presenta come segue:

Una scheda ha un bordo nero sottile.
Figura 4. Esempio di una scheda con contorni.

Limitazioni

Le schede non includono azioni di scorrimento o chiusura intrinseche, ma possono essere integrate nei componenti componibili che offrono queste funzionalità. Ad esempio, per implementare l'opzione "Scorri per ignorare" su una scheda, integrala con l'elemento componibile SwipeToDismiss. Per l'integrazione con lo scorrimento, utilizza i modificatori di scorrimento come verticalScroll. Per ulteriori informazioni, consulta la documentazione di Scorrimento.

Risorse aggiuntive