Chips de título 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 IA
Más información sobre los tipos de dispositivos de realidad extendida →

En Jetpack Compose Glimmer, el TitleChip componente 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 enfocables ni interactivos, cumplen una función puramente informativa dentro de la IU de Jetpack Compose Glimmer. 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.

Figura 1. Un ejemplo de algunos estilos diferentes de chips de título en Jetpack Compose Glimmer.

Se muestran el chip de título predeterminado y el chip de título fijo. Los chips de título fijo se muestran con un contorno.

  1. Etiqueta de chips de título
  2. Ícono o entidad inicial opcional

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