悬浮操作按钮

悬浮操作按钮 (FAB) 是一种高强调按钮，可让用户在应用中执行主要操作。它会突出显示用户可能会采取的最常见路径中的单个重点操作，并且通常固定在屏幕的右下角。

请考虑以下三种您可能会使用 FAB 的用例：

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

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

  • FAB：普通大小的悬浮操作按钮。
  • 小型 FAB：较小的悬浮操作按钮。
  • 大型 FAB：较大的悬浮操作按钮。
  • 扩展型 FAB：包含图标以外的其他内容的悬浮操作按钮。
四种悬浮操作按钮组件的示例。
图 1.四种悬浮操作按钮类型。

API Surface

虽然您可以使用多个可组合项来创建与 Material Design 一致的悬浮操作按钮，但它们的参数差异不大。 您应该记住的关键参数包括：

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

悬浮操作按钮

如需创建常规悬浮操作按钮，请使用基本的 FloatingActionButton 可组合项。以下示例演示了 FAB 的基本实现：

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

此实现如下所示：

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

小型按钮

如需创建小型悬浮操作按钮，请使用 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 的实现。
图 3.小型悬浮操作按钮。

大型按钮

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

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

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

此实现如下所示：

包含“添加”图标的 LargeFloatingActionButton 的实现。
图 4.大型悬浮操作按钮。

扩展型按钮

您可以使用 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") },
    )
}

此实现如下所示：

ExtendedFloatingActionButton 的一种实现，用于显示文字“extended button”和一个修改图标。
图 5.同时包含文本和图标的悬浮操作按钮。

其他资源