Flutter使用FormBuilder时出现多个组件共用GlobalKey错误的原因是什么？

所有Flutter Widget基类都预留了key属性，用于标识当前Widget自身。你的FormBuilderWrapper组件在定义构造函数时，把要透传给内部FormBuilder的参数直接命名为key，导致同一个GlobalKey被同时赋值给两个组件：

• FormBuilderWrapper本身：构造函数中@required this.key的写法，会把传入的GlobalKey赋值给FormBuilderWrapper自身的key属性
• 内部嵌套的FormBuilder组件：你在build方法中又把同一个GlobalKey传给了FormBuilder的key参数
  这就是报错中提到的两个共用同一个GlobalKey的组件，完全符合错误日志里的描述。

将FormBuilderWrapper中用于透传的key参数改名，避免和Widget自带的key属性冲突即可，示例修改代码如下：

修改FormBuilderWrapper定义 #

class FormBuilderWrapper extends StatelessWidget {
  final List<Widget> childrenInColumn;
  // 将透传用的key重命名为formKey，避免命名冲突
  final GlobalKey<FormBuilderState> formKey;
  const FormBuilderWrapper({
    // 保留Widget默认的key参数，用于给FormBuilderWrapper自身设置key（不需要可以不传）
    Key? key,
    @required this.formKey,
    @required this.childrenInColumn,
  }) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    print("Key: $formKey");
    return FormBuilder(
      key: formKey,
      child: Column(
        children: this.childrenInColumn,
      ),
    );
  }
}

修改调用处代码 #

class SignInScreen extends StatelessWidget {
  final GlobalKey<FormBuilderState> key =
      GlobalKey<FormBuilderState>(debugLabel: 'GlobalFormKey #SignIn ');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Dummy")),
      body: FormBuilderWrapper(
        // 用重命名后的参数名传值
        formKey: key,
        childrenInColumn: [
          FormBuilderEmail(),
          FormBuilderPassword(identifierForField: "password")
        ],
      ),
    );
  }
}

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