条状标签

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

四种类型的条状标签及其使用位置如下：

  • 辅助：在执行任务期间引导用户。通常显示为临时界面 元素来响应用户输入。
  • 过滤：允许用户通过一组选项优化内容。他们可以 可能带有一个对勾图标。
  • 输入：表示用户提供的信息，例如 菜单。它们可以包含图标和文本，并提供“X”移除。
  • 建议：根据用户最近使用的应用提供推荐内容。 activity 或输入。通常显示在输入字段下方，以提示用户 操作。
四个条状标签组件的示例，其中突出显示了各自的独特特征。
图 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 可组合项创建根据以下内容生成的条状标签： 用户互动例如，在电子邮件客户端中，当用户 电子邮件地址，则输入条状标签可能表示用户输入其地址的人员 粘贴到“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)
            )
        },
    )
}
Chip.kt

该实现如下所示。

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

建议条状标签

SuggestionChip 可组合项是列出的可组合项中最基本的可组合项。 介绍其 API 定义及其常见用例。建议 条状标签会显示动态生成的提示。例如，在 AI 聊天应用中， 可能会使用建议内容信息卡，针对最近的客户 消息。

请考虑 SuggestionChip 的以下实现：

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

此实现如下所示：

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

凸起的条状标签

本文档中的所有示例都使用接受 Flat 方法的基本可组合项 外观。如果你想某个条状标签的外观处于凸起状态，请使用其中一个 以下三个可组合项：

其他资源