Scheda

Il componibile Card funge da container Material Design per la tua UI. 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 per gli acquisti.
  • 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 su uno schermo intero. La scheda è generalmente un elemento UI più piccolo all'interno di un layout, mentre un componente di layout come Column o Row offre una e API più generiche.

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 relativi contenuti richiamando altri composabili al suo interno. Ad esempio, considera il modo in cui Card contiene un 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 Card. definisce diversi che consentono di personalizzare l'aspetto e il comportamento dei di strumento di authoring.

Ecco alcuni parametri chiave da tenere in considerazione:

  • elevation: aggiunge un'ombra al componente che lo rende visibile rispetto allo sfondo.
  • colors: utilizza il tipo CardColors per impostare il colore predefinito di entrambi il container e gli eventuali elementi figlio.
  • 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 è quello che definisce Parametro onClick. Devi utilizzare questo sovraccarico se vuoi che la tua 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 riempita

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.

@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 la componibile ElevatedCard dedicato.

Puoi utilizzare la proprietà elevation per controllare l'aspetto dell'elevazione e all'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 scheda in evidenza.

Scheda con contorni

Di seguito è riportato un esempio di scheda con contorni. Utilizza l'interfaccia OutlinedCard componibile.

@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 è delineata da un bordo nero sottile.
Figura 4. Esempio di scheda contornata.

Limitazioni

Le schede non includono azioni di scorrimento o ignora intrinseche, ma possono essere integrate in componibili che offrono queste funzionalità. Ad esempio, per implementare lo scorrimento per ignorare su una scheda, integrala nel componibile SwipeToDismiss. Per eseguire l'integrazione con lo scorrimento, utilizza i modificatori di scorrimento come verticalScroll. Guarda la scorrimento documentazione per ulteriori informazioni.

Risorse aggiuntive