按钮是基本组件,可让用户触发定义的操作。按钮有五种类型。下表介绍了五种按钮类型的外观以及应使用它们的位置。
类型 |
外观 |
用途 |
---|---|---|
Filled |
纯色背景和对比鲜明的文字。 |
高强调度按钮。这些操作用于应用中的主要操作,如“提交”和“保存”。阴影效果可凸显按钮的重要性。 |
填充色调 |
背景颜色会根据 Surface 而变化。 |
也可用于主要操作或重要操作。实心按钮可提供更直观的重量和套装功能,例如“添加到购物车”和“登录”。 |
中低热 |
添加阴影后脱颖而出。 |
适合与色调按钮类似的作用。增加高度可使按钮更显眼。 |
Outlined |
具有没有填充的边框。 |
中强调度按钮,包含重要但并非主要的操作。这类按钮可以与其他按钮完美配对,以指示替代的次要操作,例如“取消”或“返回”。 |
文本 |
显示文本,无背景或边框。 |
低强调度按钮,非常适合不太重要的操作(如导航链接)或次要功能(如“了解详情”或“查看详情”)。 |
下图演示了 Material Design 中的五种按钮。
API Surface
onClick
:用户按下按钮时调用的函数。enabled
:如果为 false,此参数会导致按钮显示为不可用或处于非活动状态。colors
:用于确定按钮中使用的颜色的ButtonColors
实例。contentPadding
:按钮内的内边距。
实心按钮
填充的按钮组件使用基本的 Button
可组合项。默认情况下,它填充的是纯色。以下代码段演示了如何实现该组件:
@Composable fun FilledButtonExample(onClick: () -> Unit) { Button(onClick = { onClick() }) { Text("Filled") } }
此实现如下所示:
填充色调按钮
已填充的色调按钮组件使用 FilledTonalButton
可组合项。默认情况下,它填充有色调颜色。
以下代码段演示了如何实现该组件:
@Composable fun FilledTonalButtonExample(onClick: () -> Unit) { FilledTonalButton(onClick = { onClick() }) { Text("Tonal") } }
此实现如下所示:
轮廓按钮
框状按钮组件使用 OutlinedButton
可组合项。默认情况下,它显示有轮廓。
以下代码段演示了如何实现该组件:
@Composable fun OutlinedButtonExample(onClick: () -> Unit) { OutlinedButton(onClick = { onClick() }) { Text("Outlined") } }
此实现如下所示:
凸起按钮
凸起按钮组件使用 ElevatedButton
可组合项。它有一个阴影,表示默认的高度效果。请注意,它本质上是一个带阴影的轮廓按钮。
以下代码段演示了如何实现该组件:
@Composable fun ElevatedButtonExample(onClick: () -> Unit) { ElevatedButton(onClick = { onClick() }) { Text("Elevated") } }
此实现如下所示:
文本按钮
文本按钮组件使用 TextButton
可组合项。按下之前,它会显示为纯文字。默认情况下,它没有纯色填充或轮廓。
以下代码段演示了如何实现该组件:
@Composable fun TextButtonExample(onClick: () -> Unit) { TextButton( onClick = { onClick() } ) { Text("Text Button") } }
此实现如下所示: