悬浮操作按钮 (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.") } }
此实现如下所示:
![带有圆角、阴影和“添加”的标准悬浮操作按钮图标。](https://developer.android.google.cn/static/develop/ui/compose/images/components/fab.png?authuser=7&hl=sk)
小按钮
要创建小型悬浮操作按钮,请使用
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 的实现图标。](https://developer.android.google.cn/static/develop/ui/compose/images/components/fab-small.png?authuser=7&hl=sk)
大按钮
要创建大型悬浮操作按钮,请使用
LargeFloatingActionButton
可组合项。此可组合项不是
与其他示例明显不同,
按钮会变大
以下是大型 FAB 的简单实现。
@Composable fun LargeExample(onClick: () -> Unit) { LargeFloatingActionButton( onClick = { onClick() }, shape = CircleShape, ) { Icon(Icons.Filled.Add, "Large floating action button") } }
此实现如下所示:
![包含“add”的 LargeFloatingActionButton 的实现图标。](https://developer.android.google.cn/static/develop/ui/compose/images/components/fab-large.png?authuser=7&hl=sk)
扩展按钮
您可以使用
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") }, ) }
此实现如下所示:
![一个 ExtendedfloatActionButton 实现,用于显示内容为“extended button”的文本和“修改”图标](https://developer.android.google.cn/static/develop/ui/compose/images/components/fab-extended.png?authuser=7&hl=sk)