响应式Flutter中Drawer出现Multiple Widgets used the same GlobalKey错误及Drawer不关闭问题

问题1：Multiple Widgets used the same GlobalKey错误 #

错误原因分析 #

你的MenuController中使用了static修饰的GlobalKey，这类静态变量生命周期全局，不会随页面组件销毁而释放。切换页面时，旧页面的Scaffold可能仍留在内存中（比如用Navigator.push跳转而非替换），新页面Scaffold若关联同一个静态GlobalKey，就会触发重复使用的错误。另外，controlMenu方法中直接用!强制解包currentState，页面未加载完成时会引发空指针风险，也可能间接导致key关联异常。

修复步骤 #

1. 移除GlobalKey的static修饰
   将静态key改为实例变量，确保全局单例的MenuController持有独立key集合，避免静态变量生命周期冲突：

class MenuController extends ChangeNotifier {
  // 移除static，改为实例变量
  final GlobalKey<ScaffoldState> _scaffoldKeyDashboard = GlobalKey(debugLabel: 'Scaffold Key Dashboard');
  final GlobalKey<ScaffoldState> _scaffoldKeyAnalytics = GlobalKey(debugLabel: 'Scaffold Key Analytics');
  final GlobalKey<ScaffoldState> _scaffoldKeyHistory = GlobalKey(debugLabel: 'Scaffold Key History');

  GlobalKey<ScaffoldState> get scaffoldKey1 => _scaffoldKeyDashboard;
  GlobalKey<ScaffoldState> get scaffoldKey2 => _scaffoldKeyAnalytics;
  GlobalKey<ScaffoldState> get scaffoldKey3 => _scaffoldKeyHistory;

  void controlMenu() {
    // 先判断currentState是否存在，再执行操作
    if (_scaffoldKeyDashboard.currentState != null && !_scaffoldKeyDashboard.currentState!.isDrawerOpen) {
      _scaffoldKeyDashboard.currentState!.openDrawer();
    }
    if (_scaffoldKeyAnalytics.currentState != null && !_scaffoldKeyAnalytics.currentState!.isDrawerOpen) {
      _scaffoldKeyAnalytics.currentState!.openDrawer();
    }
    if (_scaffoldKeyHistory.currentState != null && !_scaffoldKeyHistory.currentState!.isDrawerOpen) {
      _scaffoldKeyHistory.currentState!.openDrawer();
    }
  }
}

2. 校验页面key的唯一性
   检查所有页面的Scaffold配置，确保Dashboard页面用scaffoldKey1、Analytics用scaffoldKey2、History用scaffoldKey3，无重复使用情况。

问题2：切换页面时Drawer不自动关闭 #

原因分析 #

Drawer属于当前页面Scaffold的组件，用Navigator.push跳转页面时，原页面Scaffold仍保留在导航栈中，Drawer不会自动关闭，需手动触发关闭逻辑。

修复步骤 #

1. 跳转前手动关闭Drawer
   在页面跳转方法中，先获取当前页面对应的GlobalKey，关闭Drawer后再跳转：

// 示例：侧边栏菜单跳转逻辑
void navigateToPage(BuildContext context, String routeName, GlobalKey<ScaffoldState> scaffoldKey) {
  // 关闭当前Drawer
  if (scaffoldKey.currentState != null && scaffoldKey.currentState!.isDrawerOpen) {
    scaffoldKey.currentState!.closeDrawer();
  }
  // 执行页面跳转
  Navigator.pushNamed(context, routeName);
}

2. 优化controlMenu方法逻辑
   原方法会尝试操作所有三个页面的Drawer，同一时间仅当前页面Scaffold活跃，可修改为只操作当前页面的key：

void controlMenu(GlobalKey<ScaffoldState> currentKey) {
  if (currentKey.currentState != null) {
    if (currentKey.currentState!.isDrawerOpen) {
      currentKey.currentState!.closeDrawer();
    } else {
      currentKey.currentState!.openDrawer();
    }
  }
}

然后在Header的IconButton中传递当前页面的key：

// 以Dashboard页面为例，传递对应的scaffoldKey1
IconButton(
  icon: const Icon(Icons.menu, size: 25.0),
  onPressed: () => context.read<MenuController>().controlMenu(context.read<MenuController>().scaffoldKey1),
)

额外建议 #

• 避免在全局控制器中持有多页面的GlobalKey，可考虑让每个页面自行管理ScaffoldState，或通过路由监听统一处理Drawer状态。
• 使用?.、??等空安全语法替代强制解包!，降低运行时异常概率。

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