Button
按钮是基本组件,可让用户触发指定的 操作。按钮有五种类型。下表介绍了 五种按钮类型的外观,以及应该在哪些位置使用 。
类型 |
外观 |
目的 |
---|---|---|
Filled |
纯色背景搭配对比鲜明的文字。 |
高强调度按钮。针对应用中的主要操作(例如“提交”)然后点击“保存”阴影效果突出了按钮的重要性。 |
填充色调 |
背景颜色会有所不同,以匹配表面。 |
也可用于主要或重要操作。实心按钮能以更显眼的方式呈现重量和套装功能,例如“添加到购物车”和“登录” |
中低热 |
利用阴影脱颖而出。 |
适合与色调按钮类似的角色。增加高度可使按钮更加显眼。 |
Outlined |
具有无填充的边框。 |
中强调度按钮,包含重要但非主要的操作。这类按钮可与其他按钮完美配对,以指明替代的次要操作,例如“取消”或“返回”。 |
文字 |
显示没有背景或边框的文本。 |
低强调度按钮,适合不太重要的操作(如导航链接)或辅助功能(如“了解详情”)或“查看详情” |
下图展示了 Material Design 中的五种按钮。
API Surface
onClick
:用户按下按钮时调用的函数。enabled
:如果为 false,此参数会使按钮显示 和无效状态。colors
:用于确定在以下文件中使用的颜色的ButtonColors
实例 按钮。contentPadding
:按钮内的内边距。
实心按钮
填充的按钮组件使用基本的 Button
可组合项。时间是
默认以纯色填充以下代码段演示了如何
实施组件:
@Composable fun FilledButtonExample(onClick: () -> Unit) { Button(onClick = { onClick() }) { Text("Filled") } }
此实现如下所示:
<ph type="x-smartling-placeholder">![一个填充按钮,紫色背景上写着“已填充”。](https://developer.android.google.cn/static/develop/ui/compose/images/components/button-filled.png?authuser=1&hl=sl)
填充色调按钮
填充的色调按钮组件使用 FilledTonalButton
可组合项。
默认情况下,系统会使用色调颜色进行填充。
以下代码段演示了如何实现该组件:
@Composable fun FilledTonalButtonExample(onClick: () -> Unit) { FilledTonalButton(onClick = { onClick() }) { Text("Tonal") } }
此实现如下所示:
<ph type="x-smartling-placeholder">![一个色调按钮,背景为浅紫色,上面写着“已填充”。](https://developer.android.google.cn/static/develop/ui/compose/images/components/button-tonal.png?authuser=1&hl=sl)
轮廓按钮
框状按钮组件使用 OutlinedButton
可组合项。它
默认显示大纲
以下代码段演示了如何实现该组件:
@Composable fun OutlinedButtonExample(onClick: () -> Unit) { OutlinedButton(onClick = { onClick() }) { Text("Outlined") } }
此实现如下所示:
<ph type="x-smartling-placeholder">![一个透明轮廓按钮,带有一个显示“轮廓”的深色边框。](https://developer.android.google.cn/static/develop/ui/compose/images/components/button-outlined.png?authuser=1&hl=sl)
凸起按钮
提升按钮组件使用 ElevatedButton
可组合项。它具有
表示高度效果的阴影。请注意,
按钮基本上就是一个带有阴影的轮廓按钮。
以下代码段演示了如何实现该组件:
@Composable fun ElevatedButtonExample(onClick: () -> Unit) { ElevatedButton(onClick = { onClick() }) { Text("Elevated") } }
此实现如下所示:
<ph type="x-smartling-placeholder">![一个凸起按钮,具有灰色背景,上面写着“抬高”。](https://developer.android.google.cn/static/develop/ui/compose/images/components/button-elevated.png?authuser=1&hl=sl)
文本按钮
文本按钮组件使用 TextButton
可组合项。按住不放,
它只会显示为文字默认情况下,它没有实心填充或轮廓。
以下代码段演示了如何实现该组件:
@Composable fun TextButtonExample(onClick: () -> Unit) { TextButton( onClick = { onClick() } ) { Text("Text Button") } }
此实现如下所示:
<ph type="x-smartling-placeholder">![一个显示“文本按钮”的文本按钮](https://developer.android.google.cn/static/develop/ui/compose/images/components/button-text.png?authuser=1&hl=sl)