按钮

按钮是基本组件，允许用户触发定义的动作。按钮有五种类型。下表描述了这五种按钮的外观以及何时应该使用它们。

类型

外观

用途

实心

实心背景，文字对比鲜明。

高强调按钮。它们用于应用中的主要操作，例如“提交”和“保存”。阴影效果强调了按钮的重要性。

色调实心

背景颜色随表面而变化。

也用于主要或重要的操作。实心按钮提供更强的视觉分量，适用于“添加到购物车”和“登录”等功能。

浮动

通过阴影突出显示。

与色调按钮扮演类似的角色。增加海拔高度会使按钮显得更加突出。

轮廓

带有边框，无填充。

中等强调按钮，包含重要但不主要的操作。它们与其他按钮搭配良好，用于指示替代的次要操作，如“取消”或“返回”。

文本

显示文本，无背景或边框。

低强调按钮，非常适合不太关键的操作，例如导航链接，或次要功能，如“了解更多”或“查看详情”。

下图演示了 Material Design 中的五种按钮类型。

An example of each of the five button components, with their unique characteristics highlighted.
图 1. 五种按钮组件。

API 表面

  • onClick：当用户按下按钮时调用的函数。
  • enabled：当为 false 时，此参数使按钮显示为不可用和非活动状态。
  • colors：一个 ButtonColors 实例，用于确定按钮中使用的颜色。
  • contentPadding：按钮内部的内边距。

实心按钮

实心按钮组件使用基本的 Button 可组合项。默认情况下，它填充有纯色。以下代码段演示了如何实现该组件

@Composable
fun FilledButtonExample(onClick: () -> Unit) {
    Button(onClick = { onClick() }) {
        Text("Filled")
    }
}
Button.kt

此实现显示如下

A filled button with a purple background that reads, 'filled'.
图 2. 一个实心按钮。

色调实心按钮

色调实心按钮组件使用 FilledTonalButton 可组合项。默认情况下，它填充有色调颜色。

以下代码段演示了如何实现该组件

@Composable
fun FilledTonalButtonExample(onClick: () -> Unit) {
    FilledTonalButton(onClick = { onClick() }) {
        Text("Tonal")
    }
}
Button.kt

此实现显示如下

A tonal button with a light purple background that reads, 'filled'.
图 3. 一个色调按钮。

轮廓按钮

轮廓按钮组件使用 OutlinedButton 可组合项。默认情况下，它带有轮廓。

以下代码段演示了如何实现该组件

@Composable
fun OutlinedButtonExample(onClick: () -> Unit) {
    OutlinedButton(onClick = { onClick() }) {
        Text("Outlined")
    }
}
Button.kt

此实现显示如下

A transparent outlined button with a dark border that reads, 'Outlined'.
图 4. 一个轮廓按钮。

浮动按钮

浮动按钮组件使用 ElevatedButton 可组合项。默认情况下，它具有表示浮动效果的阴影。请注意，它本质上是一个带有阴影的轮廓按钮。

以下代码段演示了如何实现该组件

@Composable
fun ElevatedButtonExample(onClick: () -> Unit) {
    ElevatedButton(onClick = { onClick() }) {
        Text("Elevated")
    }
}
Button.kt

此实现显示如下

An elevated button with a gray background that reads, 'Elevated'.
图 5. 一个浮动按钮。

文本按钮

文本按钮组件使用 TextButton 可组合项。在按下之前，它仅显示为文本。默认情况下，它没有实心填充或轮廓。

以下代码段演示了如何实现该组件

@Composable
fun TextButtonExample(onClick: () -> Unit) {
    TextButton(
        onClick = { onClick() }
    ) {
        Text("Text Button")
    }
}
Button.kt

此实现显示如下

A text button that reads 'Text Button'
图 6. 一个文本按钮。

其他资源