Chips de título 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 TitleChip está diseñado para proporcionar una etiqueta breve y no interactiva para el contenido asociado, como una tarjeta. Usa chips de título para mostrar información concisa, como un título corto, un nombre o un estado. Dado que los chips de título no son interactivos ni se pueden enfocar, cumplen un rol puramente informativo dentro de la IU de Glimmer de Jetpack Compose. Por ejemplo, puedes proporcionar un chip de título etiquetado como "Ingredientes" junto a una lista de ingredientes en la que se puede hacer desplazamientos.

Ejemplo básico: Muestra un chip de título corto

Puedes crear un chip de título corto con muy poco código:

TitleChip { Text("Messages") }

Ejemplo detallado: Muestra un chip de título con una tarjeta

Para usar un chip de título con otro componente, coloca el chip de título TitleChipDefaults.AssociatedContentSpacing sobre el otro componente en el elemento componible. En el siguiente código, se muestra cómo usar un chip de título con una tarjeta:

@Composable
fun TitleChipExample() {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        TitleChip { Text("Title Chip") }
        Spacer(Modifier.height(TitleChipDefaults.AssociatedContentSpacing))
        Card(
            title = { Text("Title") },
            subtitle = { Text("Subtitle") },
            leadingIcon = { Icon(FavoriteIcon, "Localized description") },
        ) {
            Text("Card Content")
        }
    }
}

Puntos clave sobre el código

• El Spacer tiene una altura fija para proporcionar el espaciado vertical correcto, definido por TitleChipDefaults.AssociatedContentSpacing, entre los dos componentes.