浮动操作按钮 (FAB) 是一种高强调按钮，允许用户在应用程序中执行主要操作。它突出显示单个、集中的操作，这是用户可能采取的最常见途径，通常位于屏幕的右下方。
考虑以下三种可能使用 FAB 的用例
- 创建新项目：在记事本应用程序中，可以使用 FAB 快速创建新笔记。
- 添加新联系人：在聊天应用程序中，FAB 可以打开一个界面，允许用户将某人添加到对话中。
- 中心位置：在地图界面中，FAB 可以将地图中心定位到用户当前位置。
在 Material Design 中，有四种类型的 FAB
- FAB：普通尺寸的浮动操作按钮。
- 小号 FAB：较小的浮动操作按钮。
- 大号 FAB：较大的浮动操作按钮。
- 扩展 FAB：包含不仅仅是图标的浮动操作按钮。
API 表面
虽然您可以使用多个可组合项来创建与 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 参数。它们允许您创建具有更复杂内容的按钮，这些内容可以根据其内容进行适当缩放。
以下代码段演示了如何实现 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") },
)
}
此实现显示如下
