Compose UI 之 FloatingActionButton 按钮

最新推荐文章于 2024-08-29 07:34:32 发布

虚妄皆空

最新推荐文章于 2024-08-29 07:34:32 发布

阅读量1.6k

点赞数 11

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/sz_chrome/article/details/137119435

本文介绍了Android Compose UI中的FloatingActionButton及其变体ExtendedFloatingActionButton。FloatingActionButton有四种尺寸，包括普通、小型、大型和扩展型。尽管视觉上看起来不占用布局空间，但实际上FAB仍会影响布局。ExtendedFloatingActionButton提供了更大的点击区域和显示文本的空间，允许自定义内容和尺寸。开发者可以选择不同的声明方式以适应不同场景的需求。

FAB（Floating Action Button）

FAB 是最具突出效果的悬浮按钮，出现在屏幕右下角。通常位于屏幕右下角，具有显著的圆形形状和浮动的定位，用于呈现应用程序的主要操作或常用操作，例如开始一个新的任务、分享内容、启动一个动作等。

Compose UI 库中，FAB 的样式有 4 种。

普通 FAB：普通大小的 FAB，大小是 56dp。
Small FAB：大小是 40dp。
Large FAB：大小是 96dp。
扩展 FAB：高 56dp，宽至少 80dp（宽度大小可变）。

下面看下不同类型的 FAB 大小效果。

FloatingActionButton(onClick = {
   
   }) {
   
    Icon(Icons.Filled.Add, "FAB") }

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

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

ExtendedFloatingActionButton(
    onClick = {
   
   },
    icon = {
   
    Icon(Icons.Filled.Edit, "扩展 FAB") },
    text = {
   
    Text(text = "Extended FAB") },
)

FloatingActoinButton

FloatingActionButton 是最常使用的悬浮按钮，它的测量属性大小如下。

属性	值
容器高度/宽度	56dp/56dp
容器外形	16dp 圆角
内边距	16dp
图标大小	24dp

FAB 声明及参数

上述是 FloatingActionButton 的外观设计，下面从 FloatingActionButton 的声明和实际运行结果来看它的使用。

@Composable
fun FloatingActionButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    shape: Shape = FloatingActionButtonDefaults.shape,
    containerColor: Color = FloatingActionButtonDefaults.containerColor,
    contentColor: Color = contentColorFor(containerColor),
    elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(),
    interactionSource: MutableInteractionSource?