悬浮操作按钮 (FAB) 是一种高强调度按钮,可让用户在应用中执行主要操作。它能促使用户执行单一且集中的操作,这是用户可能采取的最常见路径,通常固定在屏幕右下角。
请考虑以下三个可能会使用 FAB 的用例:
- 创建新记事:在记事应用中,FAB 可用于快速创建新记事。
- 添加新联系人:在聊天应用中,FAB 可以打开一个界面,让用户能够将某人添加到对话中。
- 中心位置:在地图界面中,FAB 能够以用户的当前位置为中心显示地图。
在 Material Design 中,有四种类型的 FAB:
- FAB:普通尺寸的悬浮操作按钮。
- 小型 FAB:较小的悬浮操作按钮。
- 大型 FAB:较大的悬浮操作按钮。
- 扩展型 FAB:一种悬浮操作按钮,不仅仅包含图标。
API Surface
虽然您可以使用多个可组合项来创建与 Material Design 一致的悬浮操作按钮,但它们的参数差异并不大。您应该注意以下关键参数:
onClick
:用户按下按钮时调用的函数。containerColor
:按钮的颜色。contentColor
:图标的颜色。
悬浮操作按钮
如需创建常规悬浮操作按钮,请使用基本的 FloatingActionButton
可组合项。以下示例演示了 FAB 的基本实现:
@Composable fun Example(onClick: () -> Unit) { FloatingActionButton( onClick = { onClick() }, ) { Icon(Icons.Filled.Add, "Floating action button.") } }
此实现如下所示:
小按钮
如需创建小型悬浮操作按钮,请使用 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.") } }
此实现如下所示:
大按钮
如需创建大型悬浮操作按钮,请使用 LargeFloatingActionButton
可组合项。此可组合项除了会形成更大的按钮之外,与其他示例没有什么区别。
以下是大型 FAB 的简单实现。
@Composable fun LargeExample(onClick: () -> Unit) { LargeFloatingActionButton( onClick = { onClick() }, shape = CircleShape, ) { Icon(Icons.Filled.Add, "Large floating action button") } }
此实现如下所示:
展开的按钮
您可以使用 ExtendedFloatingActionButton
可组合项创建更复杂的悬浮操作按钮。它与 FloatingActionButton
的主要区别在于它具有专用的 icon
和 text
参数。您可以使用此类按钮创建包含更复杂内容的按钮,这些按钮可缩放以适应其内容。
以下代码段通过为 icon
和 text
传递示例值,演示了如何实现 ExtendedFloatingActionButton
。
@Composable fun ExtendedExample(onClick: () -> Unit) { ExtendedFloatingActionButton( onClick = { onClick() }, icon = { Icon(Icons.Filled.Edit, "Extended floating action button.") }, text = { Text(text = "Extended FAB") }, ) }
此实现如下所示: