按钮

使用 按钮 组件执行用户熟知的无需文本标签的操作。按钮通过其圆形形状与芯片区分开来。

结构

A. 内容

按钮有一个用于图标或文本的插槽。选择与按钮执行的操作相关的图标。如果图标无法描述相关操作,则可以使用最多三个字符的文本。如果图标无法清楚地描述操作,请考虑使用芯片组件

B. 容器

按钮容器仅限于单一纯色填充。


按钮类型

切换按钮

切换按钮 使用户能够在两种状态之间切换。

紧凑型按钮

紧凑型按钮 显得较小,但具有更大的可点击区域。默认可点击区域为 48x48 dp。

层次结构

使用不同的颜色填充来表示按钮层次结构。

高强调

高强调按钮包含应用的主要操作。对于高强调按钮,请使用主要或次要颜色作为容器,使用主要和次要颜色上的颜色作为内容。有关更多信息,请参阅 Wear Material 主题

中等强调

中等强调按钮以对比度较低的颜色填充来区分。它们包含的重要性低于主要操作的操作。使用表面颜色作为容器,使用表面颜色上的颜色作为内容。

或者,使用自定义 OutlinedButton 组件作为中等强调按钮。它具有透明背景、60% 不透明度的主要变体彩色描边和主要彩色内容。

低强调(仅图标)

低强调按钮以没有填充来区分。它们最适合手表表面的较小区域,在这些区域需要紧凑的排列。使用表面颜色上的颜色作为内容。

尺寸

使用不同尺寸的按钮来强调或弱化操作。

图标 (30 x 30 dp)
容器 (60 x 60 dp)

默认

图标 (26 x 26 dp)
容器 (52 x 52 dp)

图标 (24 x 24 dp)
容器 (48 x 48 dp)

超小

图标 (24 x 24 dp)
容器 (32 x 32 dp)

建议在此按钮周围添加其他填充以创建至少 48 dp 的点击目标。这是我们用于辅助功能的最小点击目标尺寸。

用法

使用标准按钮使用户能够执行单个操作,例如接听或拒绝电话或启动计时器。

使用切换按钮允许用户打开或关闭选项,例如选择和取消选择一周中的几天或暂停和重新启动计时器。

自适应布局

响应式行为

1 个按钮

内部填充将保持不变,边距应为百分比,以防止按钮拉伸得太远,并保持相对尺寸。

2个按钮

当有 2 个按钮时,会添加百分比内部边距,以防止按钮拉伸得太远,并保持相对尺寸。

输入法

1 或 2 个按钮

具有 2 个或单个按钮锁定功能的输入法始终会拉伸到侧边距,无论屏幕尺寸如何。

3 个按钮

在小于 225 dp 的屏幕上,按钮保持圆形且不会拉伸。在 225 dp 或更大的屏幕上,按钮会拉伸到侧边距。