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 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.

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, 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 tipo CardColors para establecer el color predeterminado de ambos. el contenedor y cualquier elemento secundario.
  • enabled: Si pasas false para este parámetro, la tarjeta aparece como inhabilitado y no responde a las entradas del usuario.
  • onClick: Por lo general, un Card no acepta eventos de clic. Por lo tanto, la sobrecarga principal que te gustaría tener en cuenta es que define Parámetro onClick. Deberías usar esta sobrecarga si quieres que tu implementación de Card 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,
        )
    }
}
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 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,
        )
    }
}
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 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.

Recursos adicionales