如何在Jetpack Compose Material 3中实现Cradled FAB？

在Compose Material 3中，实现停靠在BottomAppBar的Cradled FAB不需要手动设置锚点，而是通过BottomAppBar的fabConfiguration参数关联FAB，自动完成凹槽适配与位置对齐。以下是完整实现示例：

import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material3.BottomAppBar
import androidx.compose.material3.BottomAppBarDefaults
import androidx.compose.material3.FabAlignmentMode
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun CradledFabScreen() {
    MaterialTheme {
        Surface(modifier = Modifier.fillMaxSize()) {
            // 定义FAB形状：缩小底部圆角，适配BottomAppBar的凹槽
            val fabShape = MaterialTheme.shapes.extraLarge.copy(
                bottomStart = MaterialTheme.shapes.small.bottomStart,
                bottomEnd = MaterialTheme.shapes.small.bottomEnd
            )
            
            Scaffold(
                bottomBar = {
                    BottomAppBar(
                        // 配置FAB停靠参数，指定形状与对齐方式
                        fabConfiguration = BottomAppBarDefaults.fabConfiguration(
                            fabShape = fabShape,
                            // 可选：设置FAB对齐位置，默认Center，可改为End
                            fabAlignmentMode = FabAlignmentMode.Center
                        )
                    ) {
                        // BottomAppBar导航内容
                        Text(
                            text = "首页",
                            modifier = Modifier.padding(horizontal = 16.dp)
                        )
                        Text(
                            text = "我的",
                            modifier = Modifier.padding(horizontal = 16.dp)
                        )
                    }
                },
                floatingActionButton = {
                    FloatingActionButton(
                        onClick = { /* 处理FAB点击事件 */ },
                        // 必须与fabConfiguration中的形状保持一致
                        shape = fabShape
                    ) {
                        Icon(Icons.Filled.Add, contentDescription = "添加")
                    }
                }
            ) { innerPadding ->
                // 主内容区域，使用innerPadding避免被底部组件遮挡
                Text(
                    text = "应用主内容",
                    modifier = Modifier.padding(innerPadding)
                )
            }
        }
    }
}

核心要点： #

• 形状统一：FAB与fabConfiguration必须使用相同形状，才能让FAB完美嵌入BottomAppBar的凹槽。示例中通过修改extraLarge形状的底部圆角，实现FAB与BottomAppBar的贴合效果。
• fabConfiguration作用：该参数会告知BottomAppBar为FAB预留凹槽空间，并自动处理位置对齐，无需手动设置锚点。
• 对齐方式调整：通过fabAlignmentMode可控制FAB在BottomAppBar上的位置，支持Center（默认）和End两种选项。
• 内容遮挡处理：Scaffold返回的innerPadding已自动计算BottomAppBar与FAB的高度，主内容使用该padding可避免被底部组件遮挡。

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