创建浮动操作按钮 (FAB)

浮动操作按钮 (FAB) 是一个高强调按钮，允许用户在应用中执行主要操作。它突出一个用户可能采取的最常见的单一、重点操作，通常固定在屏幕右下角。

考虑以下三种可能使用 FAB 的用例

  • 创建新项目：在笔记应用中，可以使用 FAB 快速创建新笔记。
  • 添加新联系人：在聊天应用中，FAB 可以打开一个界面，让用户添加人员到对话中。
  • 居中定位：在地图界面中，FAB 可以将地图居中显示用户的当前位置。

在 Material Design 中，有四种类型的 FAB

  • FAB：普通大小的浮动操作按钮。
  • 小型 FAB：较小的浮动操作按钮。
  • 大型 FAB：较大的浮动操作按钮。
  • 扩展 FAB：包含除图标以外更多内容的浮动操作按钮。

版本兼容性

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

依赖项

Kotlin

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

Groovy

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

创建一个基本的浮动操作按钮

要创建通用的浮动操作按钮，请使用基本的 FloatingActionButton 可组合项

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

结果

A standard floating action button with rounded corner, a shadow, and an 'add' icon.
图 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.")
    }
}
FloatingActionButton.kt

结果

An implementation of SmallFloatingActionButton that contains an 'add' icon.
图 2. 一个小型浮动操作按钮。

创建一个大型浮动操作按钮

要创建一个大型浮动操作按钮，请使用 LargeFloatingActionButton 可组合项。除了产生更大的按钮外，此可组合项与前述示例没有显著区别。

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

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

结果

An implementation of LargeFloatingActionButton that contains an 'add' icon.
图 3. 一个大型浮动操作按钮。

创建一个扩展浮动操作按钮

您可以使用 ExtendedFloatingActionButton 可组合项创建更复杂的浮动操作按钮。它与 FloatingActionButton 的主要区别在于它有专门的 icon 和 text 参数。它们使您能够创建一个包含更复杂内容的按钮，并根据内容适当缩放。

以下代码片段演示了如何实现 ExtendedFloatingActionButton，并传递了 icon 和 text 的示例值。

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

结果

An implementation of ExtendedFloatingActionButton that displays text that says 'extended button' and an edit icon.
图 4. 一个带有文本和图标的浮动操作按钮。

要点

尽管有几种可组合项可用于创建符合 Material Design 的浮动操作按钮，但它们的参数差异不大。您应记住的关键参数包括以下各项

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

z## 包含本指南的合集

本指南是这些精心策划的快速指南合集的一部分，这些合集涵盖了更广泛的 Android 开发目标

了解可组合函数如何让您轻松创建基于 Material Design 设计系统的精美 UI 组件。
快速指南合集

有疑问或反馈？

前往我们的常见问题页面，了解快速指南，或联系我们，告知您的想法。
前往常见问题 提供反馈