Flutter如何监听hamburger menu打开事件并为指定变量赋值

原有写法的问题 #

你之前在按钮点击回调里直接赋值的写法存在两个明显缺陷：

• 仅能响应点击按钮唤起菜单的场景，用户通过屏幕边缘滑动手势唤起菜单时，点击事件不会触发，赋值逻辑完全失效
• 若调用Scaffold.of(context)时传入的上下文未关联到当前Scaffold实例，会直接抛出运行时报错

实现方法 #

直接使用Scaffold组件自带的onEndDrawerChanged回调即可，该回调会在右侧抽屉（endDrawer）的打开/关闭状态发生变化时自动触发，不区分菜单唤起方式，无论是点击按钮还是边缘滑动都能稳定捕获状态。

效果参考：

具体代码修改 #

1. 新增Scaffold抽屉状态监听 #

移除原有按钮点击回调里的赋值逻辑，在Scaffold层级添加onEndDrawerChanged判断，菜单打开时为变量赋当前页面对应的值：

child: Scaffold(
        extendBodyBehindAppBar: true,
        // 新增右侧抽屉状态监听
        onEndDrawerChanged: (isOpen) {
          // 仅在菜单打开时执行赋值
          if (isOpen) {
            // 不同页面替换为对应PageEnum值即可，例如当前为仪表盘页
            NavigationHelper.pagePosition = PageEnum.poyntDashboard;
            debugPrint(NavigationHelper.pagePosition.toString());
          }
        },
        appBar: LogoAppBar(
            buttonIcon: SvgPicture.asset(constants.Assets.burgerMenu),
            onPressed: () {
              // 点击回调仅保留打开抽屉的逻辑
              Scaffold.of(context).openEndDrawer();
            }),
        endDrawer: const HamburgerMenu(),
        // 其余原有代码保持不变

你现有的LogoAppBar组件代码不需要做任何修改。

2. 点击按钮报错修复（按需使用） #

如果点击汉堡按钮调用openEndDrawer()时提示找不到Scaffold，是因为当前传入的context属于Scaffold的父级组件，无法查找到当前Scaffold的State，推荐用GlobalKey的方式修复，实现更简单：

// 页面State类中提前声明Scaffold的GlobalKey
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

// 为Scaffold绑定key
child: Scaffold(
  key: _scaffoldKey,
  extendBodyBehindAppBar: true,
  onEndDrawerChanged: (isOpen) {
    // 上述的赋值逻辑保持不变
  },
  appBar: LogoAppBar(
    buttonIcon: SvgPicture.asset(constants.Assets.burgerMenu),
    onPressed: () {
      // 直接通过key打开抽屉，不存在context查找问题
      _scaffoldKey.currentState?.openEndDrawer();
    }
  ),
  endDrawer: const HamburgerMenu(),
)

补充说明 #

如果你需要在汉堡菜单组件内部获取抽屉打开状态，可以在HamburgerMenu的build方法里通过DrawerController.of(context)获取抽屉当前状态，不过针对你需要在菜单打开时为全局变量赋值的需求，直接用Scaffold的onEndDrawerChanged回调实现成本最低，后续维护也更方便。

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