El elemento Card
componible actúa como un contenedor de Material Design para tu IU.
En general, las tarjetas presentan un único contenido coherente. Los siguientes son
Estos son algunos ejemplos de los casos en los que podrías usar una tarjeta:
- Un producto en una app de compras
- Una noticia en una app de noticias
- Un mensaje en una app de comunicaciones.
Es el enfoque en mostrar un único contenido lo que distingue
Card
de otros contenedores. Por ejemplo, Scaffold
proporciona una estructura general
a toda una pantalla. La tarjeta es generalmente un elemento de la IU más pequeño dentro de un
mientras que un componente de diseño, como Column
o Row
, proporciona un diseño
y una más genérica.
Implementación básica
Card
se comporta de forma muy similar a otros contenedores en Compose. Para declarar su contenido,
llamando a otros elementos componibles dentro de ella. Por ejemplo, considera cómo Card
contiene un
llamada a Text
en el siguiente ejemplo mínimo:
@Composable
fun CardMinimalExample() {
Card() {
Text(text = "Hello, world!")
}
}
Implementaciones avanzadas
Consulta la referencia para la definición de la API de Card
. Define varias
parámetros que te permiten personalizar el aspecto y el comportamiento de la
este componente.
Estos son algunos parámetros clave que debes tener en cuenta:
elevation
: Agrega una sombra al componente que la hace aparecer. elevado por encima del fondo.colors
: Usa el tipoCardColors
para establecer el color predeterminado de ambos. el contenedor y cualquier elemento secundario.enabled
: Si pasasfalse
para este parámetro, la tarjeta aparece como inhabilitado y no responde a las entradas del usuario.onClick
: Por lo general, unCard
no acepta eventos de clic. Por lo tanto, la sobrecarga principal que te gustaría tener en cuenta es que define ParámetroonClick
. Deberías usar esta sobrecarga si quieres que tu implementación deCard
para responder a las presiones del usuario
En el siguiente ejemplo, se muestra cómo podrías usar estos parámetros, además
como otros parámetros comunes, como shape
y modifier
.
Tarjeta llena
El siguiente es un ejemplo de cómo puedes implementar una tarjeta rellenada.
La clave aquí es el uso de la propiedad colors
para cambiar el valor completado
color.
@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 aparece de la siguiente manera:
![Se rellena una tarjeta con el color de la variante de superficie del tema de material.](https://developer.android.com/static/develop/ui/compose/images/components/card-filled.png?authuser=7&hl=es)
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 aparece de la siguiente manera:
![Se eleva una tarjeta sobre el fondo de la aplicación, con una sombra.](https://developer.android.com/static/develop/ui/compose/images/components/card-elevated.png?authuser=7&hl=es)
Tarjeta con contorno
El siguiente es un ejemplo de una tarjeta con contorno. Usa la versión
Elemento OutlinedCard
componible.
@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 aparece de la siguiente manera:
![El contorno de una tarjeta es con un delgado borde negro.](https://developer.android.com/static/develop/ui/compose/images/components/card-outlined.png?authuser=7&hl=es)
Limitaciones
Las tarjetas no incluyen acciones inherentes de desplazamiento o descartar, pero se pueden integrar en
componibles que ofrecen estas funciones. Por ejemplo, para implementar la acción de deslizar para descartar
en una tarjeta, intégrala con el elemento SwipeToDismiss
componible. Para realizar la integración
con desplazamiento, usa modificadores de desplazamiento, como verticalScroll
. Consulta la sección Desplazamiento
documentación para obtener más información.