悬浮操作按钮

悬浮操作按钮 (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.")
    }
}
FloatingActionButton.kt

此实现如下所示：

图 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.")
    }
}
FloatingActionButton.kt

注意 ：由于各种 FAB 可组合项共用许多参数，因此您可以使用此示例中的方法通过其他可组合项自定义颜色。

此实现如下所示：

图 3. 小型悬浮操作按钮。

大按钮

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

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

注意 ：此示例将 CircleShape 作为 shape 参数的值传递，从而产生圆形按钮，而不是圆角边框的方形按钮。您可以传递 Shape 的任何实例，也可以设置 MaterialTheme.shape.large 的值，以在整个应用中调整它。

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

此实现如下所示：

图 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") },
    )
}
FloatingActionButton.kt

此实现如下所示：

图 5. 同时包含文本和图标的悬浮操作按钮。

其他资源

• 常用按钮
• Material UI 文档