Il componente Chip
è un elemento UI compatto e interattivo. Rappresenta le attività complesse
come un contatto o un tag, spesso con un'icona e un'etichetta. È possibile
controllabile, ignorabile o cliccabile.
Di seguito sono riportati i quattro tipi di chip e dove puoi utilizzarli:
- Assistenza: guida l'utente durante un'attività. Spesso appare come interfaccia utente temporanea 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 potrebbero includere l'icona di un segno di spunta quando viene selezionata.
- Input: rappresenta le informazioni fornite dall'utente, come le selezioni in una o dal menu Fogli Google. Possono contenere un'icona e del testo e fornire una "X" per la rimozione.
- Suggerimento: fornisce all'utente consigli in base ai suoi contenuti recenti attività o input. In genere vengono visualizzati sotto un campo di immissione per chiedere all'utente azioni.
Piattaforma API
Esistono quattro componibili che corrispondono ai quattro tipi di chip. La le seguenti sezioni descrivono nel dettaglio questi componibili e le loro differenze. Tuttavia, condividono i seguenti parametri:
label
: la stringa visualizzata sul chip.icon
: l'icona visualizzata all'inizio del chip. Alcuni dei specifici componibili hannoleadingIcon
etrailingIcon
separati .onClick
: la funzione lambda chiamata dal chip quando l'utente lo preme.
Chip di assistenza
Il componibile AssistChip
offre un modo semplice per creare un
chip di assistenza che spinge l'utente in una determinata direzione. Uno strumento distintivo
caratteristica è il parametro leadingIcon
che ti consente di visualizzare un'icona a sinistra
lato 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) ) } ) }
L'implementazione si presenta come segue.
![Un semplice chip di assistenza.](https://developer.android.com/static/develop/ui/compose/images/components/chip-assist.png?authuser=6&hl=it)
Icona filtro
Il componibile FilterChip
richiede di monitorare se il chip
è selezionata. L'esempio seguente mostra come mostrare un modello
icona selezionata 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:
![Un'icona di filtro non selezionata, senza controllo e uno sfondo di un piano.](https://developer.android.com/static/develop/ui/compose/images/components/chip-filter.png?authuser=6&hl=it)
Se selezionato, il suo aspetto sarà il seguente:
![Chip di filtro selezionato, con un segno di spunta e uno sfondo colorato.](https://developer.android.com/static/develop/ui/compose/images/components/chip-filter-active.png?authuser=6&hl=it)
Chip di input
Puoi utilizzare il componibile InputChip
per creare chip derivanti
interazione dell'utente. Ad esempio, in un client di posta, quando l'utente scrive un
un'email, un chip di input potrebbe rappresentare una persona di cui l'utente ha inserito l'indirizzo
nel campo "to:" .
La seguente implementazione mostra un chip di input che si trova già in una 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) ) }, ) }
L'implementazione si presenta come segue.
![Un chip di input con un avatar e un'icona finale.](https://developer.android.com/static/develop/ui/compose/images/components/chip-input.png?authuser=6&hl=it)
Chip di suggerimento
Il componibile SuggestionChip
è il più semplice tra i componibili elencati
in questa pagina, sia nella definizione dell'API che nei casi d'uso comuni. Suggerimento
presentano suggerimenti generati dinamicamente. Ad esempio, in un'app di chat basata sull'IA,
potrebbe utilizzare chip di suggerimento per presentare possibili risposte alla richiesta più recente
per creare un nuovo messaggio email.
Considera questa implementazione di SuggestionChip
:
@Composable fun SuggestionChipExample() { SuggestionChip( onClick = { Log.d("Suggestion chip", "hello world") }, label = { Text("Suggestion chip") } ) }
Questa implementazione si presenta nel seguente modo:
![Un semplice chip di assistenza.](https://developer.android.com/static/develop/ui/compose/images/components/chip-suggestion.png?authuser=6&hl=it)
Chip con elevata intensità
Tutti gli esempi in questo documento utilizzano elementi componibili di base che prendono aspetto. Se vuoi un chip con aspetto elevato, utilizza una delle tre componibili seguenti: