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 representar una sola pieza de contenido lo que distingue a 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 debes tener en cuenta es la que define un 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 puedes usar estos parámetros, así 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 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 aparece 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 aparece de la siguiente manera:
Tarjeta con contorno
A continuación, se muestra 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:
Limitaciones
Las tarjetas no incluyen acciones de desplazamiento o descarte inherentes, pero se pueden integrar en elementos 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 documentación de desplazamiento para obtener más información.