如何在Material3的Compose中为底部导航栏添加FAB？

要实现你图中那种FAB与底部导航栏部分重叠且带间隙的效果，不用纠结旧版的isFloatingActionButtonDocked，Material3里用BottomAppBar配合指定的FAB位置就能搞定，具体步骤如下：

核心实现思路 #

Material3的Scaffold通过floatingActionButtonLocation控制FAB位置，搭配BottomAppBar的cutoutShape属性，就能自动为FAB留出缺口，形成你要的dock效果，不用手动调整padding或offset。

完整代码示例 #

@Composable
fun DockedFABWithBottomBar() {
    Scaffold(
        // 设置FAB
        floatingActionButton = {
            FloatingActionButton(
                onClick = { /* 处理FAB点击事件 */ },
                shape = CircleShape // 和底部栏缺口形状对应
            ) {
                Icon(Icons.Filled.Add, contentDescription = "添加")
            }
        },
        // 指定FAB停靠在底部栏中间
        floatingActionButtonLocation = FloatingActionButtonLocation.centerDocked,
        // 底部栏用BottomAppBar而非普通BottomNavigation
        bottomBar = {
            BottomAppBar(
                // 定义FAB对应的缺口形状，和FAB形状一致
                cutoutShape = CircleShape,
                containerColor = MaterialTheme.colorScheme.surface
            ) {
                // 左侧导航项
                NavigationBarItem(
                    icon = { Icon(Icons.Filled.Home, contentDescription = "首页") },
                    label = { Text("首页") },
                    selected = true,
                    onClick = {}
                )
                // 中间占位，让导航项分在FAB两侧
                Spacer(modifier = Modifier.weight(1f))
                // 右侧导航项
                NavigationBarItem(
                    icon = { Icon(Icons.Filled.Settings, contentDescription = "设置") },
                    label = { Text("设置") },
                    selected = false,
                    onClick = {}
                )
            }
        }
    ) { innerPadding ->
        // 主内容区域，使用innerPadding避免被底部栏遮挡
        Column(
            modifier = Modifier
                .padding(innerPadding)
                .fillMaxSize()
                .padding(16.dp)
        ) {
            Text(text = "主内容区域")
        }
    }
}

关键细节说明 #

• FloatingActionButtonLocation.centerDocked：这是Material3替代旧版isFloatingActionButtonDocked的核心属性，直接让FAB停靠在底部栏的中间位置。
• BottomAppBar.cutoutShape：必须设置这个属性，它会让底部栏自动为FAB留出对应形状的缺口，FAB和底部栏之间的间隙是系统自动计算的，不用手动调整。
• 如果需要自定义缺口的大小或形状，可以替换CircleShape为自定义的Shape，比如RoundedCornerShape(24.dp)，只要和FAB的shape保持一致即可。

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