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 →
Display Glasses
Más información sobre los tipos de dispositivos de realidad extendida →

En el componente Card de Glimmer de Jetpack Compose, se utiliza como contenedor principal para el contenido relacionado, lo que crea un límite visual claro para las unidades de información fáciles de comprender. Las tarjetas son muy adaptables y admiten combinaciones de contenido principal, títulos opcionales, subtítulos y un ícono principal o final. De forma predeterminada, las tarjetas ocupan el ancho máximo disponible, se pueden enfocar y también se pueden hacer clic. Las tarjetas admiten una disposición vertical en la que la imagen del encabezado se encuentra 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 Glimmer de Jetpack Compose, por lo que heredan propiedades físicas, como efectos de profundidad, recorte y resaltados de borde coherentes.

Figura 1: Ejemplo de algunos estilos diferentes de tarjetas en Jetpack Compose Glimmer.

Anatomía y ranuras

Una tarjeta de Glimmer de Jetpack Compose 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 principal y secundaria 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.

Acción

Es una ranura para un elemento interactivo principal, como un Button.

Contenido principal

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

Valores predeterminados de la tarjeta

Los siguientes valores predeterminados se aplican 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 24.dp.
  • Padding del contenido: El valor predeterminado es GlimmerTheme.componentSpacingValues.medium. Esto afecta el padding más externo alrededor de las imágenes de 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 los siguientes espacios:

Ejemplo: Tarjeta básica

El siguiente código crea una tarjeta básica:

@Composable
fun CardSample() {
    Card { Text("This is a card") }
}

Ejemplo: Tarjeta compleja con varios espacios

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

@Composable
fun CardWithTitleAndLeadingIconAndHeaderAndAction() {
    Card(
        action = {
            Button(onClick = {}, trailingIcon = { Icon(FavoriteIcon, "Localized description") }) {
                Text("Send")
            }
        },
        title = { Text("Title") },
        leadingIcon = { Icon(FavoriteIcon, "Localized description") },
        header = {
            Image(MyHeaderImage, "Localized description", contentScale = ContentScale.FillWidth)
        },
    ) {
        Text("This is a card with a title, leading icon, header image, and action")
    }
}

Puntos clave sobre el código

  • Muestra cómo utilizar varios elementos de tarjetas, como header, title, leadingIcon y action, para personalizar el contenido y la estructura de la tarjeta.
  • Usa la sobrecarga estándar Card con una acción porque solo la tarjeta (o su acción interna) debe poder enfocarse. Si necesitas que toda la superficie de la tarjeta sea interactiva, usa la sobrecarga Card con onClick en su lugar.
  • Esta tarjeta usa una ranura de acción, por lo que la superficie de la tarjeta no es enfocable y el enfoque se dirige al botón de acción.