Flutter Widget树重复GlobalKey问题（FormKey存ViewModel）

问题背景 #

使用FormKey且未手动重复复用，但导航时触发「Duplicate GlobalKey detected in widget tree」错误。当前FormKey定义在ViewModel中，移至View层可解决问题，但希望保留ViewModel中的定义。

错误提示详情：

检测到Widget树中存在重复的GlobalKey。Widget树中多次指定了以下GlobalKey，这会导致Widget树部分内容被意外截断，因为第二次检测到该Key时，之前的实例会被移到新位置。涉及的Key为：

• [LabeledGlobalKey#78a40 resetKey]
  经判定，带有上述全局Key的Widget从原父组件移出后，原父组件在当前帧中从未更新，这意味着它要么完全未更新，要么在Widget移动前已更新，无论哪种情况都说明它仍认为自己应该拥有带有该全局Key的子组件。因GlobalKey重父化而被强制移除一个或多个子组件后未更新的特定父组件为：
• KeyedSubtree-[GlobalKey#d59ba]
  一个GlobalKey在Widget树中同一时间只能指定给一个Widget。

错误原因 #

如果你的ViewModel是全局单例（比如Riverpod Provider默认是单例模式），ViewModel中的FormKey会被多个ResetPasswordView实例共享；或者当页面导航时，旧的Form组件还未完全从Widget树中移除，新的Form就绑定了同一个GlobalKey，违反了「同一时间一个GlobalKey只能绑定一个Widget」的规则，从而触发错误。

解决方案（不改动ViewModel中FormKey的定义逻辑） #

方案1：在View生命周期中重置ViewModel的FormKey #

修改ViewModel，让FormKey支持动态初始化与销毁，确保每个ResetPasswordView实例使用独立的FormKey：

1. 更新ViewModel代码

class AuthVM {
  // 将FormKey改为可空类型，避免提前初始化
  GlobalKey<FormState>? resetPasswordFormKey;

  // 初始化FormKey的方法
  void initResetPasswordFormKey() {
    resetPasswordFormKey = GlobalKey<FormState>(debugLabel: 'resetKey');
  }

  // 销毁时清空FormKey，避免内存泄漏
  void disposeResetPasswordFormKey() {
    resetPasswordFormKey = null;
  }

  // 其他原有方法...
}

2. 更新View的生命周期方法

在_ResetPasswordViewState中，利用initState初始化FormKey，dispose时清空：

class _ResetPasswordViewState extends ConsumerState<ResetPasswordView> {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      final authVM = ref.read(authVMProvider);
      authVM.initResetPasswordFormKey(); // 初始化当前View对应的FormKey
      if (widget.token != null && widget.token!.isNotEmpty) {
        authVM.setToken(widget.token!);
      }
    });
  }

  @override
  void dispose() {
    ref.read(authVMProvider).disposeResetPasswordFormKey(); // 页面销毁时清空Key
    super.dispose();
  }

  // 原有build方法不变...
}

方案2：确保页面导航时销毁旧实例 #

如果错误是由于多次pushResetPasswordView导致多个实例共存，修改导航逻辑，使用pushReplacement替代push，确保旧页面被销毁后再加载新页面：

// 导航到ResetPasswordView时使用
Navigator.pushReplacement(
  context,
  MaterialPageRoute(builder: (_) => ResetPasswordView(token: token)),
);

验证 #

修改后重新测试导航场景，确认GlobalKey冲突错误不再出现，同时Form的验证、提交功能正常工作。

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