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 con display
Scopri di più sui tipi di dispositivi XR →

In Jetpack Compose Glimmer, il componente TitleChip è un componente non interattivo che fornisce un breve contesto o un'etichettatura per i contenuti associati, ad esempio un Card o un VerticalList.

Utilizza i chip del titolo per informazioni concise come un titolo breve, un nome di categoria o un indicatore di stato. In genere, devi posizionare i chip del titolo sopra i contenuti che descrivono per stabilire una relazione strutturale chiara.

Figura 1. Un esempio di chip del titolo con stile predefinito e chip del titolo fisso in Jetpack Compose Glimmer. Ogni chip del titolo ha un'etichetta (1) e un'icona o un'entità iniziale facoltativa (2).

Esempio di base: creare un chip del titolo breve

Il seguente codice crea un chip del titolo di base:

@Composable
fun BasicTitleChipSample() {
    TitleChip { Text("Messages") }
}

Esempio di base: creare un chip del titolo con un'icona

Il seguente codice crea un chip del titolo con un'icona:

@Composable
fun TitleChipWithIconSample() {
    TitleChip {
        Icon(FavoriteIcon, contentDescription = "Favorite")
        Text("Favorites")
    }
}

Esempio: creare 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 crea un chip del titolo con una scheda:

@Composable
fun TitleChipWithCardSample() {
    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

  • Il chip del titolo è centrato orizzontalmente, che è l'allineamento abituale per un chip del titolo posizionato sopra una scheda.
  • Il Spacer ha un'altezza fissa per fornire la giusta quantità di spaziatura verticale tra i due componenti. Questa viene definita utilizzando TitleChipDefaults.associatedContentSpacing.
  • Utilizza un leadingIcon facoltativo per aggiungere un contesto visivo aggiuntivo prima del contenuto di testo.
  • Il chip del titolo utilizza automaticamente lo stile caption per il testo.
  • Il chip del titolo non è interattivo. Se ti serve un'etichetta su cui è possibile fare clic, utilizza un Button o un altro componente interattivo.