如何实现可在所有底部标签页持久显示的BottomModalSheet

一、让BottomModalSheet跨标签页持久显示 #

问题核心是默认每个标签页对应独立路由，Modal会随当前路由销毁。要把Modal挂载到所有标签页共享的父级上下文里，配合全局状态控制显示：

1. 将Modal放在根层级容器
   把包含BottomNavigationBar的Scaffold用Stack包裹，Modal作为Stack的顶层子Widget，这样所有标签页切换时，Modal的宿主不会被销毁。

2. 用全局状态同步显示状态
   用ValueNotifier或状态管理工具（比如Riverpod）维护Modal的显示状态，所有标签页通过修改这个状态来控制Modal的显示/隐藏。

示例代码：

// 全局状态（可放在根Widget类中，或用状态管理全局维护）
final showModalNotifier = ValueNotifier<bool>(false);

@override
Widget build(BuildContext context) {
  return Stack(
    children: [
      Scaffold(
        bottomNavigationBar: BottomNavigationBar(
          // 你的标签页切换逻辑，比如onTap切换GoRouter路由
          items: const [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
            BottomNavigationBarItem(icon: Icon(Icons.settings), label: "设置"),
          ],
        ),
        body: GoRouter.of(context).routerDelegate.currentConfiguration,
      ),
      // 全局共享的BottomModalSheet
      ValueListenableBuilder<bool>(
        valueListenable: showModalNotifier,
        builder: (ctx, isShow, child) {
          if (!isShow) return const SizedBox.shrink();
          return ModalBottomSheet(
            context: ctx,
            builder: (sheetContext) => Container(
              height: 200,
              color: Colors.white,
              child: const Center(child: Text("持久化Modal")),
            ),
            onClose: () => showModalNotifier.value = false,
          );
        },
      ),
    ],
  );
}

之后在任意标签页里，只需执行showModalNotifier.value = true就能唤起Modal，切换标签页时Modal不会消失。

二、解决BottomSheet跳转页面被遮挡的问题 #

主Scaffold的BottomSheet属于当前路由层级，跳转时如果新页面是标签页的子路由，会被BottomSheet覆盖。可以通过两种方式解决：

1. 设置全屏路由
   在GoRouter的路由配置中，给需要跳转的页面添加fullscreenDialog: true，或者将其配置为独立于标签页的路由，确保新页面层级高于BottomSheet：

   GoRoute(
     path: "/detail",
     pageBuilder: (context, state) => MaterialPage(
       fullscreenDialog: true,
       child: DetailPage(),
     ),
   )
   

2. 跳转前隐藏BottomSheet
   如果不需要保持BottomSheet显示，跳转前先关闭它，再执行路由跳转：

   // 先关闭BottomSheet
   Navigator.of(context).pop();
   // 再跳转
   context.go("/detail");
   

另外，如果使用modal_bottom_sheet库的showModalBottomSheet，注意要用根Scaffold的上下文调用，避免Modal挂载在标签页路由的上下文里：

// 根Widget中定义GlobalKey
final rootScaffoldKey = GlobalKey<ScaffoldState>();

// 调用时使用根上下文
showModalBottomSheet(
  context: rootScaffoldKey.currentContext!,
  builder: (context) => /* Modal内容 */,
);

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