Material 组件

Banner for Material
Components

设计系统是可重复使用设计决策的集合,以指南、组件和模式的形式表达。该系统可以细分为最小的设计基元:例如颜色、类型或形状,它们构建成更大的复杂组件。例如,图标和文本标签构成一个按钮组件,而多个按钮和一个表面构成一个卡片。设计系统还附带一组指南,这些指南由围绕组件和模式的现有设计决策组成。

Material Design 是由 Google 开发的开源设计系统,可帮助您构建精美且以用户为中心的產品。Material 3 是 Material Design 的最新版本。

Material Design 组件

Material Design 提供了一系列代码支持的 组件,它们是创建用户界面的交互式构建块。这些组件可以根据其目的分为五类:操作、包含、导航、选择和文本输入。

操作组件

操作组件帮助人们实现目标。

Material 有多种类型的 按钮,可帮助在不同情况下定义操作和交互的优先级。从 FAB扩展 FAB 用于主要操作,到支持 图标按钮 用于选择选项,以及 分段按钮 用于选择选项。

图 1:操作组件

通信组件

通信组件通过 徽章 警示用户、通过 进度指示器 通知状态,以及使用 Snackbar 提供简短的处理消息,来提供有用的信息。

图 2:通信

包含组件

包含组件包含信息和操作,包括其他组件,如按钮、菜单或芯片。大多数 Material 组件使用显式包含,使用视觉对象将相关内容和操作分组在一起:卡片对话框底部菜单侧边菜单走马灯工具提示列表 可以通过显示可见的 分隔符 来提供隐式包含或显式包含。这些组件提供用于显示内容组的常见模式。

图 3:包含

导航组件帮助人们在 UI 中移动。对于移动设备,导航栏导航抽屉 包含您的主要导航目标。标签底部应用栏顶部应用栏 提供了不同的方式来导航支持信息和操作。详细了解如何在 布局 中使用导航。

图 4:导航

选择组件

选择组件让人们指定选择。无论是使用 复选框单选按钮 构建表单,使用 芯片 进行过滤,还是使用 开关滑块 切换设置,选择组件都允许用户控制和输入他们的决策。

图 5:选择

文本输入组件

文本输入组件让人们输入和编辑文本。文本字段 允许用户在 UI 中输入文本。

图 6:文本输入

Compose 的设计系统

阅读 Compose 中的设计系统,了解如何使用 Compose 更平滑地实施设计系统,并使用主题、组件和设计系统的其他方面为您的应用提供一致的外观和感觉。