O elemento combinável Card
funciona como um contêiner do Material Design para sua interface.
Os cards geralmente apresentam um conteúdo coerente. Confira a seguir alguns exemplos de onde é possível usar um cartão:
- Um produto em um app de compras.
- Uma matéria em um app de notícias.
- Uma mensagem em um app de comunicação.
É o foco em retratar uma única parte do conteúdo que distingue
Card
de outros contêineres. Por exemplo, Scaffold
fornece estrutura geral
para 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.
Implementação básica
O Card
se comporta de maneira muito semelhante a outros contêineres no Compose. Para declarar o conteúdo,
chame outros elementos combináveis dentro dele. Por exemplo, considere como Card
contém uma
chamada para Text
neste 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 diversos
parâmetros que permitem personalizar a aparência e o comportamento do
componente.
Alguns parâmetros importantes a serem observados são:
elevation
: adiciona uma sombra ao componente para que ele pareça elevado acima do plano de fundo.colors
: usa o tipoCardColors
para definir a cor padrão do contêiner e dos filhos.enabled
: se você transmitirfalse
para esse parâmetro, o cartão vai aparecer como desativado e não responderá à entrada do usuário.onClick
: normalmente, umCard
não aceita eventos de clique. Assim, a sobrecarga principal que você gostaria de observar é que define um parâmetroonClick
. Use essa sobrecarga se quiser que a implementação deCard
responda aos pressionamentos do usuário.
O exemplo a seguir demonstra como usar esses parâmetros, bem como outros parâmetros comuns, como shape
e modifier
.
Cartão preenchido
Confira abaixo um exemplo de como implementar um cartão preenchido.
O importante 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, ) } }
Essa implementação aparece da seguinte forma:
Cartão elevado
O snippet a seguir demonstra como implementar um cartão elevado. Use o
elemento combinável ElevatedCard
dedicado.
Você pode 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, ) } }
Essa implementação aparece da seguinte forma:
Card contornado
Este é um exemplo de cartão descrito. Use o elemento combinável
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, ) } }
Essa implementação aparece da seguinte forma:
Limitações
Os cards não vêm com ações inerentes de rolagem ou dispensa, mas podem ser integrados a
elementos 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 fazer a integração
com a rolagem, use modificadores de rolagem, como verticalScroll
. Consulte a documentação
Scroll para mais informações.
Outros recursos
- Documentação da interface do Material Design (em inglês)