芯片

The Chip component is a compact, interactive UI element. It represents complex entities like a contact or tag, often with an icon and label. It can be checkable, dismissible, or clickable.

以下列出四种芯片类型及其适用场景：

• Assist: 在用户执行任务期间提供引导。通常作为对用户输入的响应，以临时 UI 元素的形式出现。
• Filter: 允许用户从一组选项中筛选内容。它们可以被选中或取消选中，并且在选中时可能包含一个复选标记图标。
• Input: 代表用户提供的信息，例如菜单中的选择。它们可以包含图标和文本，并提供一个“X”用于删除。
• Suggestion: 根据用户的最近活动或输入向用户提供建议。通常出现在输入字段下方以提示用户操作。

API 表面

有四种可组合函数对应于四种类型的芯片。以下部分详细介绍了这些可组合函数及其区别。但是，它们共享以下参数：

• label: 出现在芯片上的字符串。
• icon: 显示在芯片开头的图标。一些特定的可组合函数具有单独的 leadingIcon 和 trailingIcon 参数。
• onClick: 当用户按下芯片时，芯片调用的 lambda 表达式。

辅助芯片

The AssistChip composable provides a straightforward way to create an assist chip that nudges the user in a particular direction. One distinguishing feature is its leadingIcon parameter that lets you display an icon on the left side of the chip. The following example demonstrates how you can implement it

@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

该实现显示如下。

筛选芯片

The FilterChip composable requires you to track whether or not the chip is selected. The following example demonstrates how you can show a leading checked icon only when the user has selected the 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
        },
    )
}
Chip.kt

该实现未选中时显示如下

选中时显示如下

输入芯片

You can use the InputChip composable to create chips that result from user interaction. For example, in an email client, when the user is writing an email, an input chip might represent a person whose address the user has entered into the "to:" field.

以下实现演示了一个已处于选中状态的输入芯片。用户按下芯片时会将其取消。

@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

该实现显示如下。

建议芯片

The SuggestionChip composable is the most basic of the composables listed on this page, both in its API definition and its common use cases. Suggestion chips present dynamically generated hints. For example, in an AI chat app, you might use suggestion chips to present possible responses to the most recent message.

考虑以下 SuggestionChip 的实现

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

该实现显示如下

浮起芯片

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

• ElevatedAssistChip
• ElevatedFilterChip
• ElevatedSuggestionChip

其他资源

• Material UI 文档