创建悬浮操作按钮 (FAB)

悬浮操作按钮 (FAB) 是一种高强调度按钮,可让用户在应用中执行主要操作。它用于宣传一项聚焦的操作,这项操作是用户最常采用的路径,通常固定在屏幕的右下角。

请考虑以下三个可能使用 FAB 的用例:

  • 创建新内容:在记事应用中,FAB 可用于快速创建新记事。
  • 添加新联系人:在聊天应用中,FAB 可以打开一个界面,让用户将某人添加到对话中。
  • 将位置居中:在地图界面中,FAB 可以将地图居中显示在用户的当前位置。

在 Material Design 中,FAB 有四种类型:

  • FAB:普通大小的悬浮操作按钮。
  • 小型 FAB:较小的悬浮操作按钮。
  • 大型 FAB:较大的悬浮操作按钮。
  • 展开式 FAB:一个包含多个内容(而不仅仅是图标)的悬浮操作按钮。

版本兼容性

此实现要求将项目 minSDK 设置为 API 级别 21 或更高级别。

依赖项

Kotlin

  implementation(platform("androidx.compose:compose-bom:2025.01.01"))

Groovy

  implementation platform('androidx.compose:compose-bom:2025.01.01')

创建基本悬浮操作按钮

如需创建通用浮动操作按钮,请使用基本 FloatingActionButton 可组合项:

@Composable
fun Example(onClick: () -> Unit) {
    FloatingActionButton(
        onClick = { onClick() },
    ) {
        Icon(Icons.Filled.Add, "Floating action button.")
    }
}

结果

一个带有圆角、阴影和“添加”图标的标准悬浮操作按钮。
图 1. 悬浮操作按钮。

创建一个小型悬浮操作按钮

如需创建一个小浮动操作按钮,请使用 SmallFloatingActionButton 可组合项。以下示例演示了如何通过添加自定义颜色来实现此目的。

@Composable
fun SmallExample(onClick: () -> Unit) {
    SmallFloatingActionButton(
        onClick = { onClick() },
        containerColor = MaterialTheme.colorScheme.secondaryContainer,
        contentColor = MaterialTheme.colorScheme.secondary
    ) {
        Icon(Icons.Filled.Add, "Small floating action button.")
    }
}

结果

包含“添加”图标的 SmallFloatingActionButton 实现。
图 2. 一个小型的悬浮操作按钮。

创建大型悬浮操作按钮

如需创建大型悬浮操作按钮,请使用 LargeFloatingActionButton 可组合项。除了会生成更大的按钮之外,此可组合项与其他示例没有明显不同。

以下是大型 FAB 的简单实现。

@Composable
fun LargeExample(onClick: () -> Unit) {
    LargeFloatingActionButton(
        onClick = { onClick() },
        shape = CircleShape,
    ) {
        Icon(Icons.Filled.Add, "Large floating action button")
    }
}

结果

包含“添加”图标的 LargeFloatingActionButton 实现。
图 3. 一个较大的悬浮操作按钮。

创建展开式悬浮操作按钮

您可以使用 ExtendedFloatingActionButton 可组合项创建更复杂的悬浮操作按钮。它与 FloatingActionButton 之间的主要区别在于,它具有专用的 icontext 参数。借助它们,您可以创建包含更复杂内容的按钮,并让按钮按内容大小进行适当缩放。

以下代码段演示了如何实现 ExtendedFloatingActionButton,并为 icontext 传递示例值。

@Composable
fun ExtendedExample(onClick: () -> Unit) {
    ExtendedFloatingActionButton(
        onClick = { onClick() },
        icon = { Icon(Icons.Filled.Edit, "Extended floating action button.") },
        text = { Text(text = "Extended FAB") },
    )
}

结果

ExtendedFloatingActionButton 的实现,用于显示“展开式按钮”文本和编辑图标。
图 4. 同时包含文本和图标的悬浮操作按钮。

要点

虽然您可以使用多个可组合项来创建符合 Material Design 的悬浮操作按钮,但它们的参数没有太大差异。您应注意以下关键参数:

  • onClick:用户按下按钮时调用的函数。
  • containerColor:按钮的颜色。
  • contentColor:图标的颜色。

z## 包含本指南的集合

本指南属于以下精选快速入门集合,这些集合涵盖了更广泛的 Android 开发目标:

了解如何使用可组合函数根据 Material Design 设计系统轻松创建美观的界面组件。

有问题或反馈

请访问我们的常见问题解答页面,了解简短指南,或与我们联系,告诉我们您的想法。