按钮

按钮是基本组件，可让用户触发定义的操作。按钮有五种类型。下表介绍了五种按钮类型的外观以及应使用它们的位置。

类型	外观	用途
Filled	纯色背景和对比鲜明的文字。	高强调度按钮。这些操作用于应用中的主要操作，如“提交”和“保存”。阴影效果可凸显按钮的重要性。
填充色调	背景颜色会根据 Surface 而变化。	也可用于主要操作或重要操作。实心按钮可提供更直观的重量和套装功能，例如“添加到购物车”和“登录”。
中低热	添加阴影后脱颖而出。	适合与色调按钮类似的作用。增加高度可使按钮更显眼。
Outlined	具有没有填充的边框。	中强调度按钮，包含重要但并非主要的操作。这类按钮可以与其他按钮完美配对，以指示替代的次要操作，例如“取消”或“返回”。
文本	显示文本，无背景或边框。	低强调度按钮，非常适合不太重要的操作（如导航链接）或次要功能（如“了解详情”或“查看详情”）。

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

API Surface

• onClick：用户按下按钮时调用的函数。
• enabled：如果为 false，此参数会导致按钮显示为不可用或处于非活动状态。
• colors：用于确定按钮中使用的颜色的 ButtonColors 实例。
• contentPadding：按钮内的内边距。

实心按钮

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

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

此实现如下所示：

填充色调按钮

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

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

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

此实现如下所示：

轮廓按钮

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

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

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

此实现如下所示：

凸起按钮

凸起按钮组件使用 ElevatedButton 可组合项。它有一个阴影，表示默认的高度效果。请注意，它本质上是一个带阴影的轮廓按钮。

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

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

此实现如下所示：

文本按钮

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

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

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

此实现如下所示：

其他资源

• 悬浮操作按钮
• Material 界面文档