Tarjetas en Jetpack Compose Glimmer

Dispositivos XR aplicables

Esta guía te ayuda a crear experiencias para estos tipos de dispositivos de XR.

Más información sobre los tipos de dispositivos XR →

Más información sobre los tipos de dispositivos XR →

En Jetpack Compose Glimmer, el componente Card está diseñado para agrupar y mostrar información relacionada en una sola unidad. Las tarjetas son muy adaptables y admiten combinaciones de contenido principal, títulos y subtítulos opcionales, e íconos iniciales o finales. De forma predeterminada, las tarjetas ocupan el ancho máximo completo de la pantalla de los lentes con IA, se pueden enfocar y también se pueden hacer clic.

Anatomía y ranuras de las tarjetas

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

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

• Ícono principal: Es un ícono opcional que aparece al principio del área de contenido de la tarjeta.

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

• Action: Es un espacio para un elemento interactivo principal, como un botón. Esto permite que los usuarios realicen una acción directamente desde la tarjeta. La ranura está disponible en una sobrecarga separada del elemento componible Card.

• Contenido principal: Es el cuerpo principal de la tarjeta, donde colocas el texto principal o cualquier otro contenido.

Ejemplo básico: Crea una tarjeta básica

Puedes crear una tarjeta muy básica con muy poco código:

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

Ejemplo detallado: Muestra una tarjeta compleja

En el siguiente código, se muestra cómo usar varias ranuras juntas para compilar una tarjeta. También se muestra cómo vincular un Card con un TitleChip.

@Composable
fun SampleGlimmerCard() {
    val myHeaderImage = painterResource(id = R.drawable.header_image)
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        TitleChip { Text("Title Chip") }
        Spacer(Modifier.height(TitleChipDefaults.AssociatedContentSpacing))
        Card(
            action = {
                Button(onClick = {}) {
                    Text("Action Button")
                }
            },
            header = {
                Image(
                    painter = myHeaderImage,
                    contentDescription = "Header image for the card",
                    contentScale = ContentScale.FillWidth
                )
            },
            title = { Text("Card Title") },
            subtitle = { Text("Card Subtitle") },
            leadingIcon = { FavoriteIcon, "Localized description" },
            trailingIcon = { FavoriteIcon, "Localized description" }
        ) {
            Text("A Jetpack Compose Glimmer Card using all available slots")
        }
    }
}

Puntos clave sobre el código

• Muestra cómo utilizar varios elementos de tarjetas, como header, title, subtitle, leadingIcon y action, para personalizar el contenido y la estructura de la tarjeta.
• Muestra un ejemplo de cómo colocar un TitleChip y usar un Spacer.