Jetpack Compose 组件 - 悬浮按钮

282 阅读1分钟

悬浮操作按钮 (FAB) 是一种高强调度按钮,可让用户在应用中执行主要操作。它能促使用户执行单一且集中的操作,这是用户可能采取的最常见路径,通常固定在屏幕右下角。

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

  • 创建新记事:在记事应用中,FAB 可用于快速创建新记事。
  • 添加新联系人:在聊天应用中,FAB 可以打开一个界面,让用户能够将某人添加到对话中。
  • 中心位置:在地图界面中,FAB 能够以用户的当前位置为中心显示地图。

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

  • FAB:普通尺寸的悬浮操作按钮。
  • 小型 FAB:较小的悬浮操作按钮。
  • 大型 FAB:较大的悬浮操作按钮。
  • 扩展型 FAB:一种悬浮操作按钮,不仅仅包含图标。

image.png

API Surface

虽然您可以使用多个可组合项来创建与 Material Design 一致的悬浮操作按钮,但它们的参数差异并不大。您应该注意以下关键参数:

  • onClick:用户按下按钮时调用的函数。
  • containerColor:按钮的颜色。
  • contentColor:图标的颜色。

悬浮操作按钮

创建常规悬浮操作按钮

image.png

FloatingActionButton (
    onClick = {  },
) {
    Icon(Icons.Filled.Add, "Floating action button.")
}

小按钮

image.png

SmallFloatingActionButton(
    onClick = {  },
    containerColor = MaterialTheme.colorScheme.secondaryContainer,
    contentColor = MaterialTheme.colorScheme.secondary
) {
    Icon(Icons.Filled.Add, "Small floating action button.")
}

大按钮

image.png

LargeFloatingActionButton(
    onClick = {  },
    shape = CircleShape,
) {
    Icon(Icons.Filled.Add, "Large floating action button")
}

展开的按钮

image.png

ExtendedFloatingActionButton(
    onClick = {  },
    icon = { Icon(Icons.Filled.Edit, "Extended floating action button.") },
    text = { Text(text = "Extended FAB") },
)

上一篇 Jetpack Compose 修饰符

下一篇 Jetpack Compose 组件 - 滑块