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.
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 parametrileadingIcon
etrailingIcon
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) ) } ) }
Questa implementazione ha il seguente aspetto.
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 }, ) }
Se deselezionata, questa implementazione appare come segue:
E appare come segue una volta selezionato:
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) ) }, ) }
Questa implementazione ha il seguente aspetto.
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") } ) }
Questa implementazione si presenta come segue:
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: