如何在Jetpack Compose中将悬浮操作按钮（FAB）定位到左侧

默认Scaffold仅支持FabPosition.Center和FabPosition.End两种FAB定位方式，要把FAB移到左侧，可通过自定义BottomAppBar布局实现，同时保留停靠缺口和动画效果。

实现思路 #

• 不再依赖Scaffold的floatingActionButton参数，直接在BottomAppBar内部嵌入FAB
• 用Box控制FAB与BottomAppBar的层叠关系，绘制适配左侧FAB的缺口
• 结合Compose动画API添加交互动画

完整代码示例 #

@Composable
fun LeftAlignedFabBottomBar() {
    val fabSize = 56.dp
    val fabPadding = 16.dp
    val animateFabScale = remember { mutableStateOf(1f) }
    val coroutineScope = rememberCoroutineScope()

    Scaffold(
        bottomBar = {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(64.dp)
            ) {
                // 带左侧缺口的BottomAppBar
                BottomAppBar(
                    backgroundColor = Color.Cyan,
                    modifier = Modifier.fillMaxSize(),
                    cutoutShape = CircleShape.copy(
                        offset = Offset(fabSize / 2 + fabPadding, 0f)
                    )
                ) {
                    // 可添加其他导航图标
                    IconButton(onClick = {}) {
                        Icon(Icons.Filled.Menu, contentDescription = "菜单")
                    }
                }

                // 左侧带动画的FAB
                FloatingActionButton(
                    onClick = {
                        coroutineScope.launch {
                            animateFabScale.value = 0.8f
                            delay(100)
                            animateFabScale.value = 1f
                        }
                    },
                    shape = CircleShape,
                    modifier = Modifier
                        .size(fabSize)
                        .align(Alignment.BottomStart)
                        .padding(start = fabPadding, bottom = fabPadding)
                        .scale(animateFabScale.value)
                ) {
                    Icon(Icons.Filled.Add, contentDescription = "添加")
                }
            }
        }
    ) { paddingValues ->
        // 页面主体内容，需添加padding避免被BottomAppBar遮挡
        Box(modifier = Modifier.padding(paddingValues)) {
            // 此处填充页面内容
        }
    }
}

关键细节 #

• 自定义缺口位置：修改CircleShape的offset属性，将缺口偏移至左侧，与FAB位置对齐
• 动画效果：通过scale修饰符和协程实现点击缩放动画，可扩展为平移、透明度等其他动画
• 布局层叠：利用Box让FAB覆盖在BottomAppBar上方，通过内边距实现停靠效果

若需要更复杂的交互（如FAB展开菜单），可结合AnimatedVisibility或Transition API进一步扩展。

内容的提问来源于stack exchange，提问作者Richard Vázquez Pérez