El elemento componible Card
actúa como un contenedor de Material Design para tu IU.
Por lo general, las tarjetas presentan un solo contenido coherente. Los siguientes son algunos ejemplos de casos en los que puedes usar una tarjeta:
- Un producto en una app de compras
- Una noticia en una app de noticias
- Un mensaje en una app de comunicación.
Se enfoca en representar un solo elemento de contenido que distingue Card
de otros contenedores. Por ejemplo, Scaffold
proporciona una estructura general a toda una pantalla. Por lo general, la tarjeta es un elemento de la IU más pequeño dentro de un diseño más grande, mientras que un componente de diseño como Column
o Row
proporciona una API más simple y genérica.
Implementación básica
Card
se comporta de manera muy similar a otros contenedores de Compose. Para declarar su contenido, llama a otros elementos componibles dentro de él. Por ejemplo, considera cómo Card
contiene una llamada a Text
en el siguiente ejemplo mínimo:
@Composable
fun CardMinimalExample() {
Card() {
Text(text = "Hello, world!")
}
}
Implementaciones avanzadas
Consulta la referencia para ver la definición de Card
de la API. Define varios parámetros que te permiten personalizar la apariencia y el comportamiento del componente.
Estos son algunos parámetros clave que debes tener en cuenta:
elevation
: Agrega una sombra al componente que hace que parezca elevado sobre el fondo.colors
: Usa el tipoCardColors
para establecer el color predeterminado del contenedor y de los elementos secundarios.enabled
: Si pasasfalse
para este parámetro, la tarjeta aparece como inhabilitada y no responde a las entradas del usuario.onClick
: Generalmente, un objetoCard
no acepta eventos de clic. Por lo tanto, la sobrecarga principal que quieres tener en cuenta es la que define un parámetroonClick
. Debes usar esta sobrecarga si quieres que tu implementación deCard
responda a las presiones del usuario.
En el siguiente ejemplo, se muestra cómo puedes usar estos parámetros, además de otros parámetros comunes, como shape
y modifier
.
Tarjeta completada
El siguiente es un ejemplo de cómo implementar una tarjeta completada.
La clave es el uso de la propiedad colors
para cambiar el color relleno.
@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, ) } }
Esta implementación se muestra de la siguiente manera:
Tarjeta elevada
En el siguiente fragmento, se muestra cómo implementar una tarjeta elevada. Usa el elemento componible ElevatedCard
dedicado.
Puedes usar la propiedad elevation
para controlar el aspecto de la elevación y la 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, ) } }
Esta implementación se muestra de la siguiente manera:
Tarjeta con contorno
El siguiente es un ejemplo de una tarjeta delineada. Usa el elemento componible 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, ) } }
Esta implementación se muestra de la siguiente manera:
Limitaciones
Las tarjetas no incluyen acciones inherentes de desplazamiento o descarte, pero se pueden integrar en los elementos componibles que ofrecen estas funciones. Por ejemplo, si quieres implementar el deslizamiento para descartar en una tarjeta, intégralo con el elemento componible SwipeToDismiss
. Para realizar la integración con el desplazamiento, usa modificadores de desplazamiento, como verticalScroll
. Consulta la documentación sobre desplazamiento para obtener más información.