Card

O elemento combinável Card atua como um contêiner do Material Design para sua interface. Os cards normalmente apresentam um único conteúdo coerente. Confira alguns exemplos de onde você pode usar um card:

  • Um produto em um app de compras.
  • Uma notícia em um app de notícias.
  • Uma mensagem em um app de comunicação.

O foco em retratar um único conteúdo é o que diferencia Card de outros contêineres. Por exemplo, Scaffold fornece a estrutura geral de uma tela inteira. O card geralmente é um elemento de interface menor dentro de um layout maior, enquanto um componente de layout, como Column ou Row, fornece uma API mais simples e genérica.

Um card elevado preenchido com texto e ícones.
Figura 1. Exemplo de um card preenchido com texto e ícones.

Implementação básica

O Card se comporta de maneira semelhante a outros contêineres no Compose. Você declara o conteúdo dele chamando outros elementos combináveis. Por exemplo, considere como Card contém uma chamada para Text no exemplo mínimo a seguir:

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

Implementações avançadas

Consulte a referência da definição da API de Card. Ele define vários parâmetros que permitem personalizar a aparência e o comportamento do componente.

Alguns parâmetros importantes são:

  • elevation: adiciona uma sombra ao componente para que ele pareça elevado acima do plano de fundo.
  • colors: usa o tipo CardColors para definir a cor padrão do contêiner e de todos os filhos.
  • enabled: se você transmitir false para esse parâmetro, o card vai aparecer como desativado e não vai responder à entrada do usuário.
  • onClick: normalmente, um Card não aceita eventos de clique. Assim, a sobrecarga principal que você quer notar é aquela que define um parâmetro onClick. Use essa sobrecarga se quiser que a implementação de Card responda às pressões do usuário.

O exemplo a seguir demonstra como usar esses e outros parâmetros comuns, como shape e modifier.

Cartão preenchido

Confira a seguir um exemplo de como implementar um card preenchido.

A chave aqui é o uso da propriedade colors para mudar a cor preenchida.

@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

Essa implementação aparece da seguinte maneira:

Um card é preenchido com a cor da variante de superfície do tema do Material Design.
Figura 2. Exemplo de um card preenchido.

Card elevado

O snippet a seguir demonstra como implementar um card elevado. Use o elemento combinável ElevatedCard dedicado.

É possível usar a propriedade elevation para controlar a aparência da elevação e a sombra resultante.

@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

Essa implementação aparece da seguinte maneira:

Um card é elevado acima do segundo plano do app com uma sombra.
Figura 3. Exemplo de cartão elevado.

Cartão com contorno

Confira a seguir um exemplo de card com contorno. Use o elemento OutlinedCard dedicado.

@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

Essa implementação aparece da seguinte maneira:

Um cartão é delineado com uma borda preta fina.
Figura 4. Exemplo de um card com contorno.

Limitações

Os cards não vêm com ações de rolagem ou dispensação inerentes, mas podem ser integrados a combináveis que oferecem esses recursos. Por exemplo, para implementar o gesto de deslizar para dispensar em um card, integre-o ao elemento combinável SwipeToDismiss. Para integrar com a rolagem, use modificadores de rolagem, como verticalScroll. Consulte a documentação de rolagem para mais informações.

Outros recursos