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, come una Card o una 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: crea un chip del titolo breve

Il seguente codice crea un chip del titolo di base:

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

Example: Create a title chip with a card

To use a title chip with another component, place the title chip TitleChipDefaults.associatedContentSpacing above the other component in the composable. The following code creates a title chip with a card:

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