Flutter抽取TextFormField时多组件复用同一GlobalKey报错

触发「Multiple widgets used the same GlobalKey」报错的核心原因是每个buildTextField生成的输入项都单独嵌套了Form组件，且全部绑定同一个_signUpFormKey。GlobalKey在整个组件树中全局唯一，同一时间只能被一个组件持有，重复绑定必然抛出该错误。
另外当前表单结构设计不符合Flutter表单的设计逻辑：Form是统一管理下属所有TextFormField校验、重置、保存操作的容器，不需要给每个输入项单独套一层Form，只需要给整块登录、注册表单分别套一层绑定对应key的Form即可。

1. 移除buildTextField里单独嵌套的Form #

把buildTextField方法里包裹TextFormField的Form组件删掉，这个方法只需要返回输入框本身即可，同时补充入参支持绑定控制器、自定义校验逻辑，修改后代码：

Widget buildTextField(String hintText, String labelText, bool isName,
      bool isPassword, bool isEmail, TextEditingController? controller, String? Function(String?)? validator) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 10.0),
      child: TextFormField(
        controller: controller,
        autocorrect: isAutoCorrect,
        obscureText: isPassword,
        keyboardType:
            isEmail ? TextInputType.emailAddress : TextInputType.text,
        decoration: InputDecoration(
          hintText: hintText,
          labelText: labelText,
          enabledBorder: const UnderlineInputBorder(
            borderSide: BorderSide(
              color: Colors.black,
            ),
          ),
          focusedBorder: const UnderlineInputBorder(
            borderSide: BorderSide(
              color: Colors.black,
            ),
          ),
        ),
        validator: validator,
      ),
    );
  }

2. 分别给登录、注册整块表单套对应key的Form容器 #

不要给单个输入项套Form，而是把整个登录/注册模块的输入项列表包在对应key的Form里，分别使用已经定义好的_loginFormKey和_signUpFormKey即可。
修改登录模块构建方法：

Widget buildLoginSection() {
    return Container(
      margin: const EdgeInsets.only(top: 30),
      // 整块登录表单绑定登录专用key
      child: Form(
        key: _loginFormKey,
        child: Column(
          children: [
            buildTextField("example@gmail.com", "Email address/Phone number",
                false, false, true, _emailController, (val) {
                  // 自定义邮箱/手机号校验逻辑
                  if(val == null || val.isEmpty) return "请输入邮箱或手机号";
                  return null;
                }),
            buildTextField("......", "Password", false, true, false, _passwordController, (val) {
                  // 自定义密码校验逻辑
                  if(val == null || val.length < 6) return "密码长度不能少于6位";
                  return null;
                }),
          ],
        ),
      ),
    );
  }

修改注册模块构建方法：

Widget buildSignupSection() {
    return Container(
      margin: const EdgeInsets.only(top: 30),
      // 整块注册表单绑定注册专用key
      child: Form(
        key: _signUpFormKey,
        child: Column(
          children: [
            buildTextField( "xpresschop", "Name", true, false, false, null, (val) {
              if(val == null || val.isEmpty) return "请输入姓名";
              return null;
            }),
            buildTextField("example@gmail.com", "email", false, false, true, _emailController, (val) {
              if(val == null || !val.contains("@")) return "请输入有效邮箱";
              return null;
            }),
            buildTextField("......", "password", false, true, false, _passwordController, (val) {
              if(val == null || val.length < 6) return "密码长度不能少于6位";
              return null;
            }),
            buildTextField("......", "Confirm password", false, true, false, null, (val) {
              if(val != _passwordController.text) return "两次输入密码不一致";
              return null;
            }),
          ],
        ),
      ),
    );
  }

3. 触发校验的正确方式 #

根据当前是登录还是注册状态，调用对应key的校验方法即可，比如提交按钮点击逻辑：

void onSubmit() {
  if(isSignupScreen) {
    // 注册场景校验注册表单
    if(_signUpFormKey.currentState?.validate() ?? false) {
      // 校验通过，执行注册逻辑
    }
  } else {
    // 登录场景校验登录表单
    if(_loginFormKey.currentState?.validate() ?? false) {
      // 校验通过，执行登录逻辑
    }
  }
}

• GlobalKey使用原则：一个Key在同一时间只能对应组件树中一个组件，禁止重复赋值
• Form组件的作用域是其下所有的TextFormField后代，一个业务表单对应一个Form和一个GlobalKey即可，不需要拆分到每个输入项
• 切换登录/注册状态时，两个Form不会同时出现在组件树中，不会出现key冲突问题

注册模块需要的姓名、确认密码输入框如果需要获取输入值，自行在State类中定义对应的TextEditingController，传入buildTextField的controller参数，同时在dispose方法里统一释放即可。

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