Button

按钮是基本组件,可让用户触发指定的 操作。按钮有 5 种类型。下表介绍了五种按钮类型的外观,以及应在何处使用它们。

类型

外观

用途

Filled

纯色背景搭配对比鲜明的文字。

高强调度按钮。针对应用中的主要操作(例如“提交”)然后点击“保存”阴影效果突出了按钮的重要性。

填充色调

背景颜色会因 Surface 而异。

也适用于主要或重要操作。实心按钮能以更显眼的方式呈现重量和套装功能,例如“添加到购物车”和“登录”

中低热

通过阴影脱颖而出。

适合与色调按钮类似的角色。提高 elevation,使按钮看起来更加醒目。

Outlined

具有边框但没有填充。

中强调度按钮,其中包含重要但不是主要的操作。这类按钮非常适合与其他按钮搭配使用,用于指示“取消”或“返回”等备选次要操作。

文本

显示没有背景或边框的文本。

低强调度的按钮,非常适合用于不太重要的操作(例如导航链接)或次要功能(例如“了解详情”或“查看详情”)。

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

五种按钮组件的示例,突出显示了它们的独特特征。
图 1. 五个按钮组件。

API Surface

  • onClick:用户按下按钮时调用的函数。
  • enabled:如果为 false,此参数会使按钮显示 和无效状态。
  • colors:用于确定在以下文件中使用的颜色的 ButtonColors 实例 按钮。
  • contentPadding:按钮内的内边距。

实心按钮

填充的按钮组件使用基本的 Button 可组合项。时间是 默认以纯色填充以下代码段演示了如何 实施组件:

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

此实现如下所示:

一个填充按钮,紫色背景上写着“已填充”。
图 2. 填充的按钮。

填充色调按钮

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

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

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

此实现如下所示:

<ph type="x-smartling-placeholder">
</ph> 一个色调按钮,背景为浅紫色,上面写着“已填充”。
图 3.色调按钮。

轮廓按钮

轮廓按钮组件使用 OutlinedButton 可组合项。它 默认显示大纲

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

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

此实现如下所示:

<ph type="x-smartling-placeholder">
</ph> 一个透明轮廓按钮,带有一个显示“轮廓”的深色边框。
图 4.一个轮廓按钮。

凸起按钮

提升按钮组件使用 ElevatedButton 可组合项。它具有 表示高度效果的阴影。请注意, 按钮基本上就是一个带有阴影的轮廓按钮。

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

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

此实现如下所示:

<ph type="x-smartling-placeholder">
</ph> 一个凸起按钮,带有灰色背景,上面写着“抬高”。
图 5.凸起按钮。

文本按钮

文本按钮组件使用 TextButton 可组合项。按住不放, 它只会显示为文字默认情况下,它没有实心填充或轮廓。

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

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

此实现如下所示:

<ph type="x-smartling-placeholder">
</ph> 一个显示“文本按钮”的文本按钮
图 6.文本按钮。

其他资源