Tarjeta

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 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 que distingue a Card de otros contenedores. Por ejemplo, Scaffold proporciona una estructura general para 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.

Una tarjeta elevada con íconos y texto
Figura 1: Ejemplo de una tarjeta completada con íconos y texto

Implementación básica

Card se comporta de forma muy similar a otros contenedores en 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 la definición de la API de Card. 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 elevada por encima del fondo.
  • colors: Usa el tipo CardColors para establecer el color predeterminado del contenedor y de los elementos secundarios.
  • enabled: Si pasas false para este parámetro, la tarjeta aparece como inhabilitada y no responde a la entrada del usuario.
  • onClick: Por lo general, un Card no acepta eventos de clic. Por lo tanto, la sobrecarga principal que deseas tener en cuenta es la que define un parámetro onClick. Debes usar esta sobrecarga si deseas que tu implementación de Card responda a las presiones del usuario.

En el siguiente ejemplo, se muestra cómo puedes usar estos parámetros y 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,
        )
    }
}
Card.kt

Esta implementación aparece de la siguiente manera:

Se rellena una tarjeta con el color de la variante de superficie del tema de material.
Figura 2: Ejemplo de una tarjeta rellenada.

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,
        )
    }
}
Card.kt

Esta implementación aparece de la siguiente manera:

Se eleva una tarjeta sobre el fondo de la aplicación, con una sombra.
Figura 3: Ejemplo de una tarjeta con privilegios elevados.

Tarjeta con contorno

El siguiente es un ejemplo de una tarjeta con contorno. 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,
        )
    }
}
Card.kt

Esta implementación aparece de la siguiente manera:

El contorno de una tarjeta es con un delgado borde negro.
Figura 4: Ejemplo de una tarjeta con contorno.

Limitaciones

Las tarjetas no incluyen acciones inherentes de desplazamiento o descartar, pero pueden integrarse en elementos componibles que ofrecen estas funciones. Por ejemplo, si quieres implementar el gesto de deslizar para descartar en una tarjeta, intégrala con el elemento componible SwipeToDismiss. Para realizar la integración con el desplazamiento, usa modificadores de desplazamiento, como verticalScroll. Consulta la documentación de Desplazamiento para obtener más información.

Recursos adicionales