Flutter开发如何在打开BottomSheet时保持FloatingActionButton位置固定

仅修改现有属性即可实现需求，无需自定义BottomSheet组件，核心原因是默认调用showBottomSheet时使用当前页面的Scaffold上下文，会触发Scaffold底部填充调整，连带FloatingActionButton（以下简称FAB）位置上移。

最优解决方案（侵入性最低，仅需修改1行代码） #

你只需要在Map.dart的showBottomSheet调用中新增useRootNavigator: true参数即可，修改后代码如下：

showBottomSheet(
      context: context,
      builder: details(marker),
      backgroundColor: Colors.transparent,
      useRootNavigator: true, // 新增该行
);

该参数会让BottomSheet挂载到App的根Navigator下，不会被当前Home页的Scaffold识别为自身内部的底部组件，因此不会触发Scaffold的底部间距调整，FAB会保持在原有位置不动。

如果出现BottomSheet层级高于BottomAppBar/FAB的情况，只需要给你details方法返回的BottomSheet组件设置低于FAB/BottomAppBar的elevation属性即可，完全满足你要求BottomSheet显示在下层的需求。

备选方案（层级完全可控） #

如果你需要更精准的控制BottomSheet的层级、动画等效果，也可以选择将BottomSheet内置到Home页的Scaffold结构中：

• 在Home.dart中定义状态变量，控制BottomSheet的显隐状态和内容
• 将Scaffold的body改为Stack结构，底层放置原有的PageView组件，上层放置自定义BottomSheet组件，用状态变量控制显隐
• Map页点击地图标记时，通过事件回调通知Home页更新状态，控制BottomSheet展示

该方案完全自主控制组件层级，天然满足BottomSheet在BottomAppBar和FAB下层的需求，同时不会对FAB的位置产生任何影响，也无需修改现有BottomAppBar的形状实现。

两种方案均完全符合你的需求约束：

• 保留非模态BottomSheet的特性，用户可以同时和页面其他UI元素交互
• 不需要修改现有BottomAppBar的形状代码

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