条状标签

Chip 组件是一种紧凑的交互式界面元素。它表示联系人或标签等复杂实体，通常带有图标和标签。它可以是可选中、可关闭或可点击的。

以下是四种条状标签以及您可以将其用于的位置：

  • 协助：在用户执行任务期间为其提供指导。通常显示为临时界面元素，以响应用户输入。
  • 过滤：让用户可以从一组选项中优化内容。这些选项可以选择或取消选择，并且在选中时可能会显示对勾标记图标。
  • 输入：表示用户提供的信息，例如菜单中的选择。它们可以包含图标和文本，并提供用于移除的“X”。
  • 建议：根据用户近期的活动或输入内容向用户提供建议。通常显示在输入字段下方，用于提示用户执行操作。
四种芯片组件的示例，突出显示了它们的独特特征。
图 1. 四个芯片组件。

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)
            )
        }
    )
}
Chip.kt

此实现如下所示。

一个简单的辅助条状标签。
图 2. 辅助条状标签。

过滤条件

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
        },
    )
}
Chip.kt

未选中时，此实现如下所示：

未选中的过滤条件条状标签，没有勾选标记，背景为套餐。
图 3. 未选中的过滤条件条状标签。

选择后，会显示如下所示：

已选中的过滤器条状标签，带有对勾标记和彩色背景。
图 4. 所选的过滤器条状标签。

输入条状标签

您可以使用 InputChip 可组合项创建由用户互动产生的条状标签。例如，在电子邮件客户端中，当用户撰写电子邮件时，输入条状标签可能代表用户已将其地址输入“收件人：”字段中的收件人。

以下实现演示了已处于已选状态的输入条状标签。用户按下条状标签时，系统会关闭该条状标签。

@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

此实现如下所示。

一个包含头像和尾随图标的输入条状标签。
图 5. 输入条状标签。

建议内容信息条

在 API 定义和常见用例方面，SuggestionChip 可组合项是本页面上列出的可组合项中最基本的一种。建议条状标签会显示动态生成的提示。例如，在 AI 聊天应用中，您可以使用建议条状标签来显示对最新消息的可能回复。

请考虑以下 SuggestionChip 实现：

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

此实现如下所示：

一个简单的辅助条状标签。
图 6. 辅助条状标签。

凸起条状标签

本文档中的所有示例都使用采用扁平外观的基础可组合项。如果您希望条状标签具有凸起的外观，请使用以下三个可组合项之一：

其他资源