Card

O elemento combinável Card atua como um contêiner do Material Design para sua interface. Os cards geralmente apresentam um único conteúdo coerente. Os itens a seguir são alguns exemplos de onde você pode usar um cartão:

  • 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 que diferencia Card de outros contêineres. Por exemplo, Scaffold fornece a estrutura geral de uma tela inteira. Geralmente, o cartão é um elemento de interface menor dentro de um layout, enquanto um componente de layout como Column ou Row fornece um layout mais simples e uma API mais 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 da chamando outros elementos combináveis dentro dele. Por exemplo, considere como Card contém um chamada para Text no seguinte exemplo mínimo:

@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árias parâmetros que permitem personalizar a aparência e o comportamento do componente.

Confira alguns parâmetros importantes:

  • elevation: adiciona uma sombra ao componente que o faz aparecer. se elevam acima do plano de fundo.
  • colors: usa o tipo CardColors para definir a cor padrão dos dois. o contêiner e os filhos.
  • enabled: se você transmitir false para esse parâmetro, o card vai aparecer como desativado e não responde à entrada do usuário.
  • onClick: normalmente, uma 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 seu implementação de Card para responder a pressionamentos do usuário.

O exemplo a seguir demonstra como você pode usar esses parâmetros, bem como como outros parâmetros comuns, por exemplo, shape e modifier.

Card preenchido

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

A chave aqui é o uso da propriedade colors para alterar o valor cor

@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 um elemento combinável ElevatedCard dedicado.

Use 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 plano de fundo do app, com uma sombra.
Figura 3. Exemplo de cartão elevado.

Cartão contornado

Confira a seguir um exemplo de card descrito. Use o serviço dedicado Elemento combinável 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

Essa implementação aparece da seguinte maneira:

Um cartão é contornado 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. Fazer a integração com a rolagem, use modificadores de rolagem, como verticalScroll. Consulte a seção Rolar documentação para mais informações.

Outros recursos