创建浮动操作按钮 (FAB)

浮动操作按钮 (FAB) 是一种高强调按钮，允许用户在应用中执行主要操作。它促进单个、集中的操作，这是用户可能采取的最常见途径，通常位于屏幕右下角。

考虑以下三种可能使用 FAB 的用例

创建新项目：在记事本应用中，FAB 可用于快速创建新笔记。
添加新联系人：在聊天应用中，FAB 可以打开一个界面，允许用户将某人添加到对话中。
中心位置：在地图界面中，FAB 可以将地图中心设置为用户当前位置。

在 Material Design 中，有四种类型的 FAB

FAB：普通尺寸的浮动操作按钮。
小型 FAB：较小的浮动操作按钮。
大型 FAB：较大的浮动操作按钮。
扩展 FAB：包含不仅仅是图标的浮动操作按钮。

版本兼容性

此实现要求您的项目 minSDK 设置为 API 级别 21 或更高版本。

依赖项

Kotlin

  implementation(platform("androidx.compose:compose-bom:2024.10.01"))

Groovy

  implementation platform('androidx.compose:compose-bom:2024.10.01')

创建基本的浮动操作按钮

要创建常规浮动操作按钮，请使用基本的 FloatingActionButton 可组合函数

@Composable
fun Example(onClick: () -> Unit) {
    FloatingActionButton(
        onClick = { onClick() },
    ) {
        Icon(Icons.Filled.Add, "Floating action button.")
    }
}FloatingActionButton.kt

结果

A standard floating action button with rounded corner, a shadow, and an 'add' icon. — **图 1.** 浮动操作按钮。

创建小型浮动操作按钮

要创建小型浮动操作按钮，请使用 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

结果

An implementation of SmallFloatingActionButton that contains an 'add' icon. — **图 2.** 小型浮动操作按钮。

创建大型浮动操作按钮

要创建大型浮动操作按钮，请使用 LargeFloatingActionButton 可组合函数。除了它会导致更大的按钮外，此可组合函数与其他示例没有显着区别。

以下是大 FAB 的简单实现。

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

结果

An implementation of LargeFloatingActionButton that contains an 'add' icon. — **图 3.** 大型浮动操作按钮。

创建扩展浮动操作按钮

您可以使用 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