创建芯片以表示复杂实体

Chip 组件是一个紧凑的交互式 UI 元素。它代表复杂的实体,例如联系人或标签,通常带有图标和标签。它可以是可选中、可取消或可点击的。

以下是五种芯片类型及其用途:

  • 辅助芯片:在任务过程中指导用户。通常作为对用户输入的临时 UI 元素出现。
  • 筛选芯片:允许用户从一组选项中细化内容。它们可以选择或取消选择,并且在选中时可能包含复选标记图标。
  • 输入芯片:代表用户提供的信息,例如菜单中的选择。它们可以包含图标和文本,并提供“X”用于移除。
  • 建议芯片:根据用户的最近活动或输入向用户提供建议。通常出现在输入字段下方,以提示用户操作。
  • 凸起芯片:具有凸起外观,而不是扁平外观。

版本兼容性

此实现要求您的项目 minSDK 设置为 API 级别 21 或更高。

依赖项

创建辅助芯片

AssistChip 可组合函数提供了一种直接创建辅助芯片的方法,该芯片可以引导用户朝特定方向前进。一个显著的特点是其 leadingIcon 参数,它允许您在芯片左侧显示图标,如图 1 所示。以下示例演示了如何实现它

A simple assist chip.
图 1. 辅助芯片。

创建筛选芯片

FilterChip 可组合函数要求您跟踪芯片是否已选中。以下示例演示了如何仅在用户选中芯片时显示领先的选中图标

结果

An unselected filter chip, with no check and a plan background.
图 2. 未选中的筛选芯片。
Selected filter chip, with a check and a coloured background.
图 3. 选中的筛选芯片。

创建输入芯片

您可以使用 InputChip 可组合函数来创建由用户交互产生的芯片。例如,在电子邮件客户端中,当用户撰写电子邮件时,输入芯片可能代表用户已输入“收件人:”字段的个人地址。

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

结果

An input chip with an avatar and a trailing icon.
图 4. 输入芯片。

创建建议芯片

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

考虑此 SuggestionChip 实现

结果

A simple assist chip.
图 5. 辅助芯片。

创建凸起芯片

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

要点

四个可组合函数对应于四种类型的芯片,它们共享以下参数:

  • label:显示在芯片上的字符串。
  • icon:芯片开头显示的图标。某些可组合函数具有单独的 leadingIcontrailingIcon 参数。
  • onClick:用户点击芯片时芯片调用的 lambda 表达式。

包含本指南的收藏集

本指南是这些精选的快速指南收藏集的一部分,涵盖更广泛的 Android 开发目标

了解可组合函数如何使您能够轻松创建基于 Material Design 设计系统的精美 UI 组件。

有问题或反馈?

访问我们的常见问题页面,了解快速指南,或与我们联系,告诉我们您的想法。