El elemento componible Card actúa como un contenedor de Material Design para tu IU.
Las tarjetas presentan una sola pieza de contenido coherente, como la siguiente:
- Un producto en una app de compras
- Una noticia en una app de noticias
- Un mensaje en una app de comunicación.
El enfoque en representar una sola pieza de contenido distingue a Card de otros contenedores. Por ejemplo, Scaffold proporciona la estructura general a toda una pantalla. La tarjeta es un elemento de 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.
En este tema, se muestra cómo implementar cuatro tipos de tarjetas:
Compatibilidad de versiones
Esta implementación requiere que el minSDK de tu proyecto se establezca en el nivel de API 21 o superior.
Dependencias
Crea una tarjeta básica
Card se comporta de manera similar a otros contenedores en Compose. Para declarar su contenido, llama a otros elementos componibles dentro de él. Por ejemplo, observa cómo Card contiene una llamada a Text en el siguiente ejemplo mínimo:
Crea una tarjeta completa
La clave aquí es el uso de la propiedad colors para cambiar el color relleno:
Resultados
Crea una 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 la apariencia de la elevación y la sombra resultante.
Resultados
Crea una tarjeta con un esquema
El siguiente es un ejemplo de una tarjeta con contorno. Usa el elemento componible OutlinedCard dedicado.
Resultados
Puntos clave
Consulta la referencia para obtener la definición de la API de Card. Define varios parámetros que puedes usar para personalizar la apariencia y el comportamiento del componente.
Entre algunos de los parámetros clave, se incluyen los siguientes:
elevation: Agrega una sombra al componente que lo hace verse elevado sobre el fondo.colors: Usa el tipoCardColorspara establecer el color predeterminado del contenedor y de sus elementos secundarios.enabled: Si pasasfalsepara este parámetro, la tarjeta aparecerá inhabilitada y no responderá a las entradas del usuario.onClick: Por lo general, unCardno acepta eventos de clic. Por lo tanto, la sobrecarga principal que debes tener en cuenta es la que define un parámetroonClick. Usa esta sobrecarga cuando quieras que tu implementación deCardresponda a los clics del usuario.
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 el deslizamiento para descartar en una tarjeta, intégralo con el elemento componible SwipeToDismiss. Para integrarlo con el desplazamiento, usa modificadores de desplazamiento, como verticalScroll. Consulta la documentación de Scroll para obtener más información.
Colecciones que contienen esta guía
Esta guía forma parte de estas colecciones de guías rápidas seleccionadas que abarcan objetivos más amplios de desarrollo de Android:
Cómo mostrar componentes interactivos
