芯片

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

芯片的四种类型及其适用场景如下所示

辅助芯片：在任务期间引导用户。通常作为临时界面元素出现，以响应用户输入。
过滤芯片：允许用户根据一组选项筛选内容。它们可以被选中或取消选中，选中时可能包含一个对勾图标。
输入芯片：代表用户提供的信息，例如菜单中的选择项。它们可以包含图标和文本，并提供一个“X”用于移除。
建议芯片：根据用户的近期活动或输入提供建议。通常出现在输入字段下方，以提示用户操作。

An example of each of the four chip components, with their unique characteristics highlighted. — **图 1.** 四种芯片组件。

API 表面

有四种可组合项对应四种芯片类型。以下部分将详细概述这些可组合项及其差异。但是，它们共享以下参数

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

此实现效果如下所示。

A simple assist chip displaying a leading icon and text label. — **图 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

当未选中时，此实现效果如下所示

An unselected filter chip, with no check and a plain background. — **图 3.** 未选中的过滤芯片。

当选中时，效果如下所示

Selected filter chip, with a check and a colored background. — **图 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. 输入芯片。

建议芯片

SuggestionChip 可组合项是此页面上列出的可组合项中最基本的一个，无论是在其 API 定义还是常见用例方面。建议芯片提供动态生成的提示。例如，在 AI 聊天应用中，您可以使用建议芯片来呈现对最新消息的可能回复。

考虑此 SuggestionChip 的实现

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

此实现效果如下所示

A simple suggestion chip. — **图 6.** 建议芯片。

浮雕芯片

本文档中的所有示例都使用具有平面外观的基础可组合项。如果您想要具有浮雕外观的芯片，请使用以下三种可组合项之一

其他资源

Material UI 文档