El componente Chip
es un elemento de la IU interactivo y compacto. Representa situaciones complejas
entidades, como un contacto o una etiqueta, que a menudo tienen un ícono y una etiqueta. Sí, es posible
se puede marcar, descartable o en el que se puede hacer clic.
Estos son los cuatro tipos de chips y dónde podrías usarlos:
- Ayudar: Guía al usuario durante una tarea. Suele aparecer como una IU temporal en respuesta a la entrada del usuario.
- Filtrar: Permite a los usuarios definir mejor el contenido de un conjunto de opciones. Pueden seleccionar o anular la selección, y puede incluir un ícono de marca de verificación cuando se selecciona.
- Entrada: Representa la información proporcionada por el usuario, como las selecciones en una . Pueden contener un ícono y texto, y proporcionar una 'X'. para su eliminación.
- Sugerencia: Proporciona recomendaciones al usuario en función de su experiencia actividad o entrada. Suelen aparecer debajo de un campo de entrada para solicitar al usuario acciones.
Plataforma de API
Hay cuatro elementos componibles que corresponden a los cuatro tipos de chips. El En las siguientes secciones, se describen en detalle estos elementos componibles y sus diferencias. Sin embargo, comparten los siguientes parámetros:
label
: Es la cadena que aparece en el chip.icon
: Es el ícono que se muestra al comienzo del chip. Algunos de los elementos componibles específicos tienen unleadingIcon
y unatrailingIcon
independientes parámetro.onClick
: Es la expresión lambda a la que llama el chip cuando el usuario la presiona.
Chip de asistencia
El elemento AssistChip
componible proporciona una forma sencilla de crear un elemento
chip de asistencia que empuja al usuario en una dirección en particular. Un aspecto distintivo
atributo es su parámetro leadingIcon
, que te permite mostrar un ícono a la izquierda.
lado del chip. En el siguiente ejemplo, se muestra cómo puedes 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) ) } ) }
Esta implementación aparece de la siguiente manera:
Chip de filtro
El elemento componible FilterChip
requiere que realices un seguimiento para saber si el chip
. El siguiente ejemplo demuestra cómo puedes mostrar una línea principal
ícono marcado solo cuando el usuario seleccione el 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 }, ) }
Esta implementación se muestra de la siguiente manera cuando no se selecciona:
Y se muestra de la siguiente manera cuando se selecciona:
Chip de entrada
Puedes usar el elemento componible InputChip
para crear chips que resulten de
la interacción del usuario. Por ejemplo, en un cliente de correo electrónico, cuando el usuario escribe un
correo electrónico, un chip de entrada puede representar a una persona cuya dirección ingresó el usuario.
al comando "to:" .
En la siguiente implementación, se muestra un chip de entrada que ya se encuentra en el estado seleccionado. El usuario descarta el chip cuando lo presiona.
@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) ) }, ) }
Esta implementación aparece de la siguiente manera:
Chip de sugerencias
El elemento SuggestionChip
componible es el más básico de la lista.
en esta página, tanto en su definición de API como en sus casos de uso comunes. Sugerencia
presentan sugerencias generadas de forma dinámica. Por ejemplo, en una app de chat con IA,
puedes usar chips de sugerencias para presentar posibles respuestas a los mensajes
mensaje.
Considera esta implementación de SuggestionChip
:
@Composable fun SuggestionChipExample() { SuggestionChip( onClick = { Log.d("Suggestion chip", "hello world") }, label = { Text("Suggestion chip") } ) }
Esta implementación aparece de la siguiente manera:
Chip elevado
En todos los ejemplos de este documento, se usan los elementos básicos componibles que toman un plano en su apariencia. Si quieres un chip con un aspecto elevado, usa uno de los tres elementos componibles siguientes: