悬浮操作按钮

悬浮操作按钮 (FAB) 是一种高强调度按钮,让用户能够 执行主要操作。它鼓励单一的、集中的行动 这是用户可能会采用的最常用路径,通常可在 锚定在屏幕右下角

请考虑以下三个可能会使用 FAB 的使用场景:

  • 创建新内容:在记事应用中,可以使用 FAB 快速执行操作 创建新记事。
  • 添加新联系人:在聊天应用中,FAB 可以打开界面来 用户将某人添加到会话中。
  • 中心位置:在地图界面中,FAB 可以将地图中心设为 用户的当前位置。

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

  • FAB:普通尺寸的悬浮操作按钮。
  • 小型 FAB:较小的悬浮操作按钮。
  • 大型 FAB:较大的悬浮操作按钮。
  • 扩展型 FAB:一种悬浮操作按钮,其中不仅仅包含一个 图标。
。 <ph type="x-smartling-placeholder">
</ph> 四个悬浮操作按钮组件分别的示例。
图 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.")
    }
}

此实现如下所示:

包含“add”操作的 SmallFloatingActionButton 的实现图标。
图 3. 小型悬浮操作按钮。

大按钮

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

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

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

此实现如下所示:

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

扩展按钮

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

此实现如下所示:

一个 ExtendedfloatActionButton 实现,用于显示内容为“extended button”的文本和“修改”图标
图 5. 同时包含文本和图标的悬浮操作按钮。

其他资源