按钮
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
对于用户易于理解且不需要文本标签的操作，请使用 Button 组件。与条状标签不同，按钮为圆形。
解剖学
A. 内容
按钮有一个为图标或文本预留的槽位。请选择与该按钮所执行的操作相关的图标。如果图标无法描述相关操作，您可以使用不超过三个字符的文本。如果图标无法清晰地描述操作，建议使用条状标签组件
B. 容器
按钮容器仅限使用单一纯色填充。
切换按钮
切换按钮可允许用户在两种状态之间切换。
紧凑按钮
紧凑按钮的显示效果更小，但可点按区域更大。默认可点按区域为 48x48 dp。
层次结构
使用不同的填充颜色来表示按钮层次结构。
高强调度
高强调度按钮包含应用的主要操作。对于高强调度按钮，请为容器使用 Primary 或 Secondary 颜色，并为内容使用 On Primary 和 On Secondary 颜色。如需了解详情，请参阅 Wear Material 主题。
中强调度
中强调度按钮使用色彩对比度较低的颜色。其中包含重要性相对主要操作较低的操作。请为容器使用 Surface 颜色，并为内容使用 On Surface 颜色。
或者，也可为中强调度按钮使用自定义 OutlinedButton 组件。该组件具有透明背景、不透明度为 60% 的主要变体彩色描边，以及主要彩色内容。
低强调度（仅限图标）
低强调度按钮没有颜色填充。它们最适合需要紧凑排列的表盘上的较小区域。请为内容使用 On Surface 颜色。
尺寸
使用不同大小的按钮来突出显示或弱化显示相关操作。
大
图标 (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)
建议在该按钮周围添加额外的内边距，以创建至少 48dp 的点按目标。这是我们为无障碍功能设置的最小点按目标尺寸。
用法
使用标准按钮来允许用户执行单项操作，如接听或拒接来电，或启动计时器。
使用切换按钮来允许用户启用或停用选项，例如选择和取消选择周几，或者暂停和重启计时器。
自适应布局
响应式行为
1 个按钮
内部内边距将保持不变，边距应采用百分比形式，以防止按钮过度拉伸并保持相对大小。
2 个按钮
如果有 2 个按钮，则会添加百分比内部边距，以防止按钮过度拉伸并保持相对大小。
IME
1 个或 2 个按钮
无论屏幕尺寸如何，具有 2 个或 1 个按钮锁定的 IME 始终会一直延伸到侧边边距。
3 个按钮
在小于 225dp 的屏幕上，按钮会保持圆形，不会拉伸。在大屏幕（225 dp 或更大）上，按钮会一直延伸到侧边边距。
本页面上的内容和代码示例受内容许可部分所述许可的限制。Java 和 OpenJDK 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC)：2025-07-27。
[null,null,["最后更新时间 (UTC)：2025-07-27。"],[],[],null,["# Buttons\n\nUse a [Button](/reference/kotlin/androidx/wear/compose/material/package-summary#Button(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material.ButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material.ButtonBorder,kotlin.Function1)) component for actions that are well understood by users and don't need a text label. Buttons are distinguished from chips by their circular shape.\n\nAnatomy\n-------\n\n\n**A. Content**\n\nButtons have a single slot reserved for an icon or text. Choose an icon that is relevant to the action the button performs. You can use text with a maximum of three characters if an icon is unable to describe the relevant action. Consider the use of a Chip component if an icon cannot clearly describe the action\n\n**B. Container**\n\nButton containers are limited to a single solid color fill.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nButton types\n------------\n\n\n**Toggle buttons**\n\n[Toggle buttons](/reference/kotlin/androidx/wear/compose/material/package-summary#ToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material.ToggleButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)) enable users to toggle between two states. \n\n**Compact buttons**\n\n[Compact buttons](/reference/kotlin/androidx/wear/compose/material/package-summary#CompactButton(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material.ButtonColors,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)) appear smaller but have a larger tappable area. The default tappable area is 48x48 dp.\n\n\u003cbr /\u003e\n\nHierarchy\n---------\n\n\nUse different color fills to denote button hierarchy.\n\n**High emphasis**\n\nHigh emphasis buttons contain actions that are primary to the app. For high emphasis buttons use Primary or Secondary colors for the container and On Primary and On Secondary colors for the content. For more information see [Wear Material Theming](/training/wearables/design/theme).\n\n**Medium emphasis**\n\nMedium emphasis buttons are distinguished by a less contrasting color fill. They contain actions that are less important than the primary actions. Use the Surface color for the container and the On Surface color for the content.\n\nAlternatively, use the custom [OutlinedButton](/reference/kotlin/androidx/wear/compose/material/package-summary#OutlinedButton(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material.ButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material.ButtonBorder,kotlin.Function1)) component for a medium emphasis button. This has a transparent background, a primary variant colored stroke of 60% opacity, and primary colored content.\n**Low emphasis (icon only)**\n\n\u003cbr /\u003e\n\nLow emphasis buttons are distinguished by having no fill. They are best suited for smaller areas on the watch face where a compact arrangement is needed. Use the On Surface colour for the content.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nSizes\n-----\n\nUse buttons of different sizes to emphasize or de-emphasize actions.\n\n\n**Large**\n\nIcon (30 x 30 dp) \nContainer (60 x 60 dp) \n\n**Default**\n\nIcon (26 x 26 dp) \nContainer (52 x 52 dp)\n\n\u003cbr /\u003e\n\n\n**Small**\n\nIcon (24 x 24 dp) \nContainer (48 x 48 dp) \n\n**Extra Small**\n\nIcon (24 x 24 dp) \nContainer (32 x 32 dp)\n\n\nIt's recommended to add additional padding around this button to create a tap target of at least 48 dp. This is our minimum tap target size for accessibility.\n\n\u003cbr /\u003e\n\nUsage\n-----\n\nUse standard buttons to enable the user to take a single action such as accepting or declining a call, or starting a timer.\n\nUse toggle buttons to allow the user to turn an option on or off, such as selecting and deselecting days of the week or pausing and restarting a timer.\n\nAdaptive layouts\n----------------\n\n### **Responsive behavior**\n\n\n**1 button**\n\nThe internal padding will remain the same, and the margins should be percentages in order to stop the buttons from stretching too far, and keeping a relative size. \n\n**2 buttons**\n\nWhen there are 2 buttons, percentage internal margins are added in order to stop the buttons from stretching too far, and keeping a relative size.\n\n\u003cbr /\u003e\n\n### **IMEs**\n\n**1 or 2 Buttons**\n\nIMEs with 2 or a single button lockup always stretch all the way to the side margins regardless of screen size.\n\n**3 Buttons**\n\nOn screens smaller than 225 dp, the buttons remain circular and do not stretch. On larger screens, 225 dp or larger, the buttons stretch all the way to the side margins."]]
