Tarjetas en Jetpack Compose Glimmer

Dispositivos de realidad extendida correspondientes
Esta guía te ayuda a crear experiencias para estos tipos de dispositivos de realidad extendida.
Más información sobre los tipos de dispositivos de realidad extendida →
Lentes de visualización
Más información sobre los tipos de dispositivos de realidad extendida →

En Jetpack Compose Glimmer, el Card componente sirve como el contenedor principal para el contenido relacionado, lo que crea un límite visual claro para las unidades de información digeribles. Las tarjetas son muy adaptables y admiten combinaciones de contenido principal, títulos opcionales, subtítulos y íconos iniciales o finales. De forma predeterminada, las tarjetas ocupan el ancho máximo disponible, se pueden enfocar y también puedes hacer que se pueda hacer clic en ellas. Las tarjetas admiten una disposición vertical en la que la imagen del encabezado está en la parte superior, seguida del título, el subtítulo y el contenido del cuerpo.

Las tarjetas se compilan en el sistema de superficie de Jetpack Compose Glimmer surface system, por lo que heredan propiedades físicas como efectos de profundidad, recorte y resaltados de bordes coherentes.

Figura 1. Un ejemplo de algunos estilos diferentes de tarjetas en Jetpack Compose Glimmer.

Anatomía y ranuras

Una tarjeta de Jetpack Compose Glimmer se compila a partir de varios elementos especializados que te permiten personalizar su contenido y diseño.

Ranura Descripción

Encabezado

Es la sección superior de la tarjeta, diseñada para contener una imagen.

Título y subtítulo

Estos campos de texto proporcionan las etiquetas principales y secundarias de la tarjeta. El título se coloca sobre el subtítulo.

Ícono inicial

Es un ícono opcional (por lo general, un Icon) que aparece al comienzo del área de contenido de la tarjeta.

Ícono final

Es un ícono opcional que aparece al final del área de contenido de la tarjeta.

Contenido principal

Es el cuerpo principal de la tarjeta para el Text o el contenido principal.

Valores predeterminados de la tarjeta

Se aplican los siguientes valores predeterminados a las tarjetas:

  • Ancho: Las tarjetas ocupan el ancho máximo disponible de la pantalla para optimizar la legibilidad en los lentes de visualización.
  • Altura mínima: 80.dp
  • Espaciado vertical del texto: 3.dp
  • Forma del encabezado: Usa RoundedCornerShape con esquinas de 24.dp.
  • Padding del contenido: El valor predeterminado es GlimmerTheme.componentSpacingValues.medium. Esto afecta el padding más externo alrededor de las imágenes del encabezado y el contenedor de contenido.
  • Forma: El valor predeterminado es GlimmerTheme.shapes.medium.

  • Renderización de texto: Usa los valores predeterminados de GlimmerTheme.typography para las siguientes ranuras:

Ejemplo: Tarjeta básica

En el siguiente código, se muestra el código mínimo necesario para compilar una tarjeta:

Card { Text("This is a card") }

Ejemplo: Tarjeta con varias ranuras

En el siguiente código, se muestra cómo usar varias ranuras juntas para compilar una tarjeta:

Card(
    title = { Text("Card Title", style = GlimmerTheme.typography.titleMedium) },
    subtitle = { Text("Sub-heading text", style = GlimmerTheme.typography.titleSmall) },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = "Favorite") },
    trailingIcon = { Icon(BookmarkIcon, contentDescription = "Bookmark") },
    header = {
        Image(
            painter = myHeaderImage,
            contentDescription = "Header image",
            contentScale = ContentScale.FillWidth
        )
    },
) {
    Text("This is a complete card")
}

Puntos clave sobre el código

  • Muestra cómo usar varios elementos de la tarjeta, como title, subtitle y leadingIcon, para personalizar el contenido y la estructura de la tarjeta.
  • Usa la sobrecarga Card con onClick para hacer que toda la superficie de la tarjeta sea interactiva.

Tarjetas de acciones

Si deseas incluir un botón de acción con una tarjeta, usa un ActionCard. Las tarjetas de acciones tienen los mismos elementos que las tarjetas estándar y también incluyen un parámetro action adicional que define el botón inferior.

Figura 2. Un ejemplo de una ActionCard en Jetpack Compose Glimmer.

Ejemplo: Tarjeta de acción básica

En este código, se muestra cómo crear una ActionCard:

ActionCard(
    action = {
        Button(onClick = {}, trailingIcon = { Icon(FavoriteIcon, "Localized description") }) {
            Text("Send")
        }
    }
) {
    Text("This is a card with a title, leading icon, header image, and action")
}

Ejemplo: Tarjeta de acción con un ícono

En este código, se muestra cómo crear una ActionCard más compleja con íconos:

ActionCard(
    title = { Text("Card Title", style = GlimmerTheme.typography.titleMedium) },
    subtitle = { Text("Sub-heading text", style = GlimmerTheme.typography.titleSmall) },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = "Favorite") },
    header = {
        Image(
            painter = myHeaderImage,
            contentDescription = "Header image",
            contentScale = ContentScale.FillWidth
        )
    },
    action = {
        Button(onClick = { /* Handle action */ }) {
            Text("Action")
        }
    }
) {
    Text(
        "This is the main body content of the card, utilizing theme-tokens for consistent styling.",
        style = GlimmerTheme.typography.bodyMedium
    )
}