Flutter集成底部导航时FAB无法唤起SimpleDialog、BottomSheet如何解决

根本原因 #

• 核心问题出在使用了错误层级的BuildContext
  当你把带底部导航、FAB的主Scaffold直接写在MaterialApp的根路由页面时，主页面build方法拿到的context，是Scaffold组件的父级上下文，不是Scaffold自身的子节点上下文。这时候调用弹窗方法时，组件会沿着这个context向上查找对应的Scaffold挂载点、当前页面对应的Navigator，就会出现查找路径断裂，导致点击无响应。
• 为什么把FAB挪到子页面里就正常了？因为每个子页面都是独立的Scaffold节点，从子页面build方法里拿到的context，刚好处于子Scaffold的子层级，能正确向上找到对应的Scaffold和Navigator，自然可以正常唤起弹窗。
• 你之前尝试的用Navigator.push把SimpleDialog包成普通页面路由的写法，本身就是不符合Flutter交互设计的：所有弹窗类组件本来就应该通过对应的show方法唤起，自行包装成普通页面路由会丢失弹窗本身的交互逻辑（比如点外部关闭、自动对齐页面层级等），这也是你之前尝试换唤起方式依然不生效的原因之一。

可落地的修复方案 #

• 调整组件层级，通过Builder组件生成属于Scaffold子级的正确上下文，不要再用Scaffold外层的context调用弹窗方法
  错误的写法示例：

  // 这里的context是根页面的context，属于Scaffold的父级，层级不对
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 用错误的context调用方法，弹窗无法拉起
          showModalBottomSheet(context: context, builder: (c) => Container());
        },
      ),
    );
  }
  

  正确的写法示例：

  Widget build(BuildContext context) {
    // 把Scaffold包进Builder里，用Builder生成的context（属于Scaffold的子级）来操作
    return Builder(
      builder: (scaffoldContext) {
        return Scaffold(
          floatingActionButton: FloatingActionButton(
            onPressed: () {
              // 用scaffoldContext调用方法，层级正确，弹窗可正常唤起
              showModalBottomSheet(
                context: scaffoldContext,
                builder: (c) => Container(
                  height: 200,
                  child: const Center(child: Text("底部弹窗")),
                ),
              );
              // 唤起SimpleDialog同理，用showDialog方法替代之前的push写法
              showDialog(
                context: scaffoldContext,
                builder: (c) => const SimpleDialog(title: Text("hello")),
              );
            },
          ),
        );
      },
    );
  }
  

• 如果你的业务场景比较复杂，需要在跨组件的位置唤起弹窗，也可以给主Scaffold绑定一个全局GlobalKey<ScaffoldState>，通过这个key直接获取Scaffold对应的上下文，不需要依赖组件树的传递路径，这种方式的稳定性比Builder更高。

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