Chip

Il componente Chip è un elemento UI compatto e interattivo. Rappresenta entità complesse come un contatto o un tag, spesso con un'icona e un'etichetta. Può essere selezionabile, ignorabile o cliccabile.

I quattro tipi di chip e dove potresti utilizzarli sono i seguenti:

  • Assistenza: guida l'utente durante un'attività. Viene spesso visualizzato come elemento UI temporaneo in risposta all'input dell'utente.
  • Filtra: consente agli utenti di perfezionare i contenuti da una serie di opzioni. Possono essere selezionati o deselezionati e, se selezionati, possono includere un segno di spunta.
  • Input: rappresenta le informazioni fornite dall'utente, come le selezioni in un menu. Possono contenere un'icona e del testo e fornire una "X" per la rimozione.
  • Suggerimento: fornisce suggerimenti all'utente in base all'attività o all'input recenti. In genere vengono visualizzati sotto un campo di immissione per richiedere azioni degli utenti.
Un esempio di ciascuno dei quattro componenti di chip, con le caratteristiche uniche evidenziate.
Figura 1. I quattro componenti del chip.

Piattaforma API

Esistono quattro componibili che corrispondono ai quattro tipi di chip. Le seguenti sezioni descrivono nel dettaglio questi componenti componibili e le rispettive differenze. Tuttavia, condividono i seguenti parametri:

  • label: la stringa visualizzata nel chip.
  • icon: l'icona visualizzata all'inizio del chip. Alcuni componenti componibili specifici hanno parametri leadingIcon e trailingIcon separati.
  • onClick: il lambda chiamato dal chip quando l'utente lo preme.

Chip di assistenza

L'elemento componibile AssistChip offre un modo semplice per creare un chip di assistenza che indirizza l'utente in una determinata direzione. Una delle caratteristiche distintive è il parametro leadingIcon, che consente di visualizzare un'icona a sinistra del chip. L'esempio seguente mostra come implementarlo:

@Composable
fun AssistChipExample() {
    AssistChip(
        onClick = { Log.d("Assist chip", "hello world") },
        label = { Text("Assist chip") },
        leadingIcon = {
            Icon(
                Icons.Filled.Settings,
                contentDescription = "Localized description",
                Modifier.size(AssistChipDefaults.IconSize)
            )
        }
    )
}
Chip.kt

Questa implementazione ha il seguente aspetto.

Un semplice chip di assistenza.
Figura 2. Chip di assistenza.

Icona filtro

Il componibile FilterChip richiede di monitorare se il chip è selezionato o meno. L'esempio seguente mostra come mostrare un'icona selezionata con un segno di spunta solo quando l'utente ha selezionato il chip:

@Composable
fun FilterChipExample() {
    var selected by remember { mutableStateOf(false) }

    FilterChip(
        onClick = { selected = !selected },
        label = {
            Text("Filter chip")
        },
        selected = selected,
        leadingIcon = if (selected) {
            {
                Icon(
                    imageVector = Icons.Filled.Done,
                    contentDescription = "Done icon",
                    modifier = Modifier.size(FilterChipDefaults.IconSize)
                )
            }
        } else {
            null
        },
    )
}
Chip.kt

Se deselezionata, questa implementazione appare come segue:

Un chip di filtro deselezionato, senza controllo e con uno sfondo del piano.
Figura 3. Chip di filtro deselezionato.

E appare come segue una volta selezionato:

Chip di filtro selezionato, con un segno di spunta e uno sfondo colorato.
Figura 4. Icona filtro selezionata.

Chip di input

Puoi utilizzare il componibile InputChip per creare chip derivanti dall'interazione dell'utente. Ad esempio, in un client di posta, quando l'utente scrive un'email, un chip di input potrebbe rappresentare una persona il cui indirizzo è stato inserito nel campo "A:".

La seguente implementazione mostra un chip di input già in uno stato selezionato. L'utente ignora il chip quando lo preme.

@Composable
fun InputChipExample(
    text: String,
    onDismiss: () -> Unit,
) {
    var enabled by remember { mutableStateOf(true) }
    if (!enabled) return

    InputChip(
        onClick = {
            onDismiss()
            enabled = !enabled
        },
        label = { Text(text) },
        selected = enabled,
        avatar = {
            Icon(
                Icons.Filled.Person,
                contentDescription = "Localized description",
                Modifier.size(InputChipDefaults.AvatarSize)
            )
        },
        trailingIcon = {
            Icon(
                Icons.Default.Close,
                contentDescription = "Localized description",
                Modifier.size(InputChipDefaults.AvatarSize)
            )
        },
    )
}
Chip.kt

Questa implementazione ha il seguente aspetto.

Un chip di input con un avatar e un'icona finale.
Figura 5. Chip di input.

Chip di suggerimento

L'elemento componibile SuggestionChip è il più semplice tra i componibili elencati in questa pagina, sia nella definizione dell'API che nei casi d'uso comuni. I chip di suggerimento presentano suggerimenti generati dinamicamente. Ad esempio, in un'app di chat basata sull'IA, potresti utilizzare i chip di suggerimento per presentare le possibili risposte ai messaggi più recenti.

Prendi in considerazione questa implementazione di SuggestionChip:

@Composable
fun SuggestionChipExample() {
    SuggestionChip(
        onClick = { Log.d("Suggestion chip", "hello world") },
        label = { Text("Suggestion chip") }
    )
}
Chip.kt

Questa implementazione si presenta come segue:

Un semplice chip di assistenza.
Figura 6. Chip di assistenza.

Chip con risoluzione elevata

Tutti gli esempi in questo documento utilizzano componenti componibili di base che hanno un aspetto piatto. Se vuoi un chip dall'aspetto discreto, utilizza uno dei tre componenti componibili seguenti:

Risorse aggiuntive