Chip dei titoli in Jetpack Compose Glimmer

Dispositivi XR applicabili

Queste indicazioni ti aiutano a creare esperienze per questi tipi di dispositivi XR.

Scopri di più sui tipi di dispositivi XR →

Occhiali AI

Scopri di più sui tipi di dispositivi XR →

In Jetpack Compose Glimmer, the TitleChip component is designed to provide brief, non-interactive label for associated content, such as a Card. Utilizza i chip del titolo per visualizzare informazioni concise come un titolo breve, un nome o uno stato. Poiché i chip del titolo non sono selezionabili o interattivi, svolgono un ruolo puramente informativo all'interno dell'interfaccia utente di Jetpack Compose Glimmer. Ad esempio, potresti fornire un chip del titolo con l'etichetta "Ingredienti" accanto a un elenco scorrevole di ingredienti.

Figura 1. Un esempio di alcuni stili diversi di chip del titolo in Jetpack Compose Glimmer.

Vengono mostrati il chip del titolo predefinito e il chip del titolo fisso. I chip del titolo fisso vengono visualizzati con un contorno.

1. Etichetta dei chip del titolo
2. Icona o entità iniziale facoltativa

Esempio di base: visualizzare un chip del titolo breve

Puoi creare un chip del titolo breve con pochissimo codice:

TitleChip { Text("Messages") }

Esempio dettagliato: visualizzare un chip del titolo con una scheda

Per utilizzare un chip del titolo con un altro componente, posiziona il chip del titolo TitleChipDefaults.AssociatedContentSpacing sopra l'altro componente in the composable. Il seguente codice mostra come utilizzare un chip del titolo con una scheda:

@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")
        }
    }
}

Punti chiave sul codice

• Lo Spacer ha un'altezza fissa per fornire la spaziatura verticale corretta, definita da TitleChipDefaults.AssociatedContentSpacing, tra i due componenti.