Material3中BottomSheetScaffold添加随底部栏上移的FloatingActionButton方法

Material Design 3的BottomSheetScaffold确实没有内置的floatingActionButton参数，要让FAB随底部栏同步上移，核心思路是借助BottomSheet的状态偏移量，动态调整FAB的位置。

具体实现方案 #

将地图和FAB放在同一个Box容器内，通过BottomSheetState的偏移量计算FAB的垂直位移，让它和底部栏联动：

BottomSheetScaffold(
    sheetSwipeEnabled = bottomSheetState.bottomSheetState.currentValue == SheetValue.Expanded,
    topBar = {},
    sheetPeekHeight = 0.dp,
    scaffoldState = bottomSheetState,
    sheetContent = {
        // 你的底部栏内容
        Column(modifier = Modifier.fillMaxWidth().height(200.dp).background(Color.LightGray)) {
            Text("Sheet Content")
        }
    }
) { innerPaddingValues ->
    Box(modifier = Modifier.fillMaxSize().padding(innerPaddingValues)) {
        // OSM地图视图
        AndroidView(
            factory = { context ->
                MapView(context).apply {
                    // 地图初始化配置
                }
            },
            modifier = Modifier.fillMaxSize()
        )

        // 随BottomSheet联动的悬浮按钮
        FloatingActionButton(
            onClick = { /* 按钮点击逻辑 */ },
            modifier = Modifier
                .align(Alignment.BottomEnd)
                .padding(16.dp)
                .translationY(
                    // 利用BottomSheet的偏移量反向移动FAB
                    -bottomSheetState.bottomSheetState.requireOffset()
                )
        ) {
            Icon(Icons.Default.Add, contentDescription = "添加")
        }
    }
}

关键逻辑说明 #

• bottomSheetState.bottomSheetState.requireOffset()：返回BottomSheet当前的垂直偏移量，当底部栏向上展开时，该值为负数（表示向上移动的距离）。
• translationY(-offset)：通过反向偏移，让FAB随底部栏同步上移，保持两者的相对位置。
• Box容器确保FAB悬浮在地图上方，结合Alignment.BottomEnd定位到右下角，符合Material设计规范。

如果后续需要调整底部栏的peekHeight，只需根据初始偏移量微调FAB的padding或translationY初始值即可。

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