Chip
组件是一个紧凑的互动式界面元素。它代表复杂的
联系人或标签等实体,通常带有一个图标和标签。它可以
可勾选、可关闭或可点击。
四种类型的条状标签及其使用位置如下:
- 辅助:在执行任务期间引导用户。通常显示为临时界面 元素来响应用户输入。
- 过滤:允许用户通过一组选项优化内容。他们可以 可能带有一个对勾图标。
- 输入:表示用户提供的信息,例如 菜单。它们可以包含图标和文本,并提供“X”移除。
- 建议:根据用户最近使用的应用提供推荐内容。 activity 或输入。通常显示在输入字段下方,以提示用户 操作。
API Surface
有四个可组合项与四种条状标签相对应。通过 以下部分详细介绍了这些可组合项及其差异。 不过,它们有以下共同的参数:
label
:条状标签上显示的字符串。icon
:条状标签开头显示的图标。其中一些 特定的可组合项具有单独的leadingIcon
和trailingIcon
参数。onClick
:当用户按下芯片时,芯片调用的 lambda。
辅助条状标签
AssistChip
可组合项提供了一种创建
用于引导用户朝特定方向的辅助条状标签。区别在于
地图项的 leadingIcon
参数,可让您在左侧显示一个图标
芯片的另一侧。以下示例演示了如何实现它:
@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) ) } ) }
该实现如下所示。
![简单的辅助条状标签。](https://developer.android.google.cn/static/develop/ui/compose/images/components/chip-assist.png?authuser=5&hl=sr)
过滤条件
FilterChip
可组合项要求您跟踪条状标签是否
。以下示例演示了如何展示前导
选中的图标:
@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 }, ) }
取消选择时,此实现如下所示:
![未选中的过滤条状标签,无勾选框和方案背景。](https://developer.android.google.cn/static/develop/ui/compose/images/components/chip-filter.png?authuser=5&hl=sr)
选择后如下所示:
![已选中的过滤组件,带有一个勾选标记和彩色背景。](https://developer.android.google.cn/static/develop/ui/compose/images/components/chip-filter-active.png?authuser=5&hl=sr)
输入条状标签
您可以使用 InputChip
可组合项创建根据以下内容生成的条状标签:
用户互动例如,在电子邮件客户端中,当用户
电子邮件地址,则输入条状标签可能表示用户输入其地址的人员
粘贴到“to:”中,字段。
以下实现演示了已在 状态用户在按下条状标签时将其关闭。
@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) ) }, ) }
该实现如下所示。
![包含头像和尾随图标的输入条状标签。](https://developer.android.google.cn/static/develop/ui/compose/images/components/chip-input.png?authuser=5&hl=sr)
建议条状标签
SuggestionChip
可组合项是列出的可组合项中最基本的可组合项。
介绍其 API 定义及其常见用例。建议
条状标签会显示动态生成的提示。例如,在 AI 聊天应用中,
可能会使用建议内容信息卡,针对最近的客户
消息。
请考虑 SuggestionChip
的以下实现:
@Composable fun SuggestionChipExample() { SuggestionChip( onClick = { Log.d("Suggestion chip", "hello world") }, label = { Text("Suggestion chip") } ) }
此实现如下所示:
![简单的辅助条状标签。](https://developer.android.google.cn/static/develop/ui/compose/images/components/chip-suggestion.png?authuser=5&hl=sr)
凸起的条状标签
本文档中的所有示例都使用接受 Flat 方法的基本可组合项 外观。如果你想某个条状标签的外观处于凸起状态,请使用其中一个 以下三个可组合项: