如何在Jetpack Compose中配置FAB停靠、圆角及尺寸？若不可行如何用Canvas实现？

一、常规方式快速配置 #

1. 自定义尺寸 #

FloatingActionButton的尺寸可通过Modifier.size()直接指定，也可以复用官方提供的尺寸常量：

FloatingActionButton(
    onClick = { /* 处理点击 */ },
    modifier = Modifier.size(60.dp), // 自定义宽高
    shape = RoundedCornerShape(16.dp) // 设置统一圆角
) {
    Icon(Icons.Filled.Add, contentDescription = "添加")
}

2. 个性化圆角 #

如果需要不同角设置不同圆角半径，直接传入自定义RoundedCornerShape即可：

shape = RoundedCornerShape(topStart = 20.dp, bottomEnd = 20.dp)

3. 与BottomBar的停靠实现 #

借助Scaffold组件，通过偏移和定位参数实现FAB停靠在BottomBar上方的效果：

Scaffold(
    bottomBar = {
        BottomAppBar(
            modifier = Modifier.height(60.dp),
            containerColor = MaterialTheme.colorScheme.primaryContainer
        ) {
            // BottomBar内部元素
        }
    },
    floatingActionButton = {
        FloatingActionButton(
            onClick = { /* 处理点击 */ },
            modifier = Modifier.offset(y = -30.dp), // 向上偏移BottomBar高度的一半
            shape = RoundedCornerShape(16.dp)
        ) {
            Icon(Icons.Filled.Add, contentDescription = "添加")
        }
    },
    floatingActionButtonPosition = FabPosition.Center // 让FAB与BottomBar居中对齐
) { innerPadding ->
    // 主内容区域，记得添加内边距避免被BottomBar遮挡
    Box(modifier = Modifier.padding(innerPadding)) {
        // 页面内容
    }
}

二、Canvas绘制特殊效果 #

如果常规组件无法满足需求（比如不规则形状、与BottomBar衔接的特殊裁剪），可以用Canvas自定义FAB：

Box(
    modifier = Modifier
        .size(60.dp)
        .offset(y = -30.dp)
        .clickable { /* 处理点击 */ },
    contentAlignment = Alignment.Center
) {
    Canvas(modifier = Modifier.fillMaxSize()) {
        // 绘制FAB主体
        drawRoundRect(
            color = MaterialTheme.colorScheme.primary,
            cornerRadius = CornerRadius(16.dp.toPx(), 16.dp.toPx()),
            size = size
        )
        // 绘制与BottomBar衔接的底部区域（示例：底部圆角衔接）
        drawRoundRect(
            color = MaterialTheme.colorScheme.primaryContainer,
            topLeft = Offset(0f, size.height - 10.dp.toPx()),
            size = Size(size.width, 10.dp.toPx()),
            cornerRadius = CornerRadius(topStart = 16.dp.toPx(), topEnd = 16.dp.toPx())
        )
    }
    // 添加图标
    Icon(Icons.Filled.Add, contentDescription = "添加", tint = Color.White)
}

内容的提问来源于stack exchange，提问作者Master Developer