Flutter动态添加FormBuilder组件：GlobalKey使用异常及输入框问题

问题根源分析 #

你遇到的问题本质是GlobalKey的生命周期管理不当：

• 在listTile函数内创建GlobalKey：每次setState触发重建时，都会生成新的GlobalKey，导致FormBuilder重新初始化，输入内容瞬间消失。
• 在State中使用单个GlobalKey：多个动态生成的FormBuilder共用同一个key，会触发"GlobalKey被多个组件使用"的错误；而且组件被移除后，key仍被引用，导致setState() called after dispose()异常。

本地key（ValueKey等）确实无法控制FormBuilderState，所以我们需要正确管理多个GlobalKey的生命周期。

正确的实现方案 #

我们需要为每个动态生成的FormBuilder分配独立的GlobalKey和TextEditingController，并在State中维护这些实例的列表，同时在组件销毁时正确释放资源。

修改后的代码示例

class _addMenuState extends State<addMenu> {
  // 改为列表，存储每个Form的key、controller和状态
  List<GlobalKey<FormBuilderState>> _formKeys = [];
  List<TextEditingController> _itemNameControllers = [];
  List<TextEditingController> _priceControllers = [];
  List<TextEditingController> _descControllers = [];
  List<File?> _images = [];
  List<String?> _itemImageUrls = [];
  List<menu> items = [];

  int _count = 1;

  @override
  void initState() {
    super.initState();
    // 初始化第一个Form的资源
    _initFormResources();
  }

  // 初始化单个Form的key和controller
  void _initFormResources() {
    _formKeys.add(GlobalKey<FormBuilderState>());
    _itemNameControllers.add(TextEditingController());
    _priceControllers.add(TextEditingController());
    _descControllers.add(TextEditingController());
    _images.add(null);
    _itemImageUrls.add(null);
  }

  @override
  void dispose() {
    // 销毁所有controller，防止内存泄漏
    for (var controller in _itemNameControllers) {
      controller.dispose();
    }
    for (var controller in _priceControllers) {
      controller.dispose();
    }
    for (var controller in _descControllers) {
      controller.dispose();
    }
    super.dispose();
  }

  Future getImageFromGallery(int index) async {
    var image = await ImagePicker.pickImage(source: ImageSource.gallery);
    setState(() {
      _images[index] = image;
      print('Image Path ${_images[index]}');
    });
  }

  Future getImageFromCamera(int index) async {
    var image = await ImagePicker.pickImage(source: ImageSource.camera);
    setState(() {
      _images[index] = image;
      print('Image Path ${_images[index]}');
    });
  }

  Future uploadItemOfShop(BuildContext context, int index) async {
    FirebaseStorage storage = FirebaseStorage.instance;
    final itemName = _itemNameControllers[index].text;
    final price = _priceControllers[index].text;
    if (_images[index] == null) {
      Flushbar(
        title: "Menu Item Image is empty",
        message: "Please Add some Image first",
        backgroundColor: Colors.red,
        boxShadows: [BoxShadow(color: Colors.red[800], offset: Offset(0.0, 2.0), blurRadius: 3.0,)],
        duration: Duration(seconds: 3),
      )..show(context);
    } else {
      Reference ref = storage.ref().child("${widget.rr.name}'s $itemName Price $price" + DateTime.now().toString());
      UploadTask uploadTask = ref.putFile(_images[index]!);
      uploadTask.then((res) async {
        setState(() {
          _itemImageUrls[index] = await res.ref.getDownloadURL();
        });
      });
    }
  }

  Widget Divido() {
    return Divider(
      thickness: 5,
      color: Colors.black45,
      height: 2,
    );
  }

  Widget listTile(int index) {
    return SingleChildScrollView(
      child: ListTile(
        title: // 保留你的原有标题代码
        subtitle: FormBuilder(
          key: _formKeys[index],
          child: Column(
            children: [
              FormBuilderTextField(
                controller: _itemNameControllers[index],
                keyboardType: TextInputType.text,
                name: 'item_name',
                decoration: InputDecoration(labelText: 'Enter Item name'),
                validator: FormBuilderValidators.compose([
                  FormBuilderValidators.required(context),
                ]),
              ),
              FormBuilderTextField(
                controller: _priceControllers[index],
                name: 'price',
                keyboardType: TextInputType.number,
                decoration: InputDecoration(labelText: 'Enter Price'),
                validator: FormBuilderValidators.compose([
                  FormBuilderValidators.required(context),
                ]),
              ),
              FormBuilderTextField(
                maxLength: 150,
                controller: _descControllers[index],
                keyboardType: TextInputType.multiline,
                maxLines: null,
                name: 'desc',
                decoration: InputDecoration(
                  labelText: 'Description',
                ),
                validator: FormBuilderValidators.compose(
                  [
                    FormBuilderValidators.required(context),
                  ],
                ),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  RaisedButton(
                    child: Text(
                      "Save",
                      style: TextStyle(color: Colors.white, fontSize: 16),
                    ),
                    color: Colors.red,
                    onPressed: () {
                      // 先验证当前Form
                      if (_formKeys[index].currentState!.validate()) {
                        menu item = menu(
                          _itemNameControllers[index].text,
                          _priceControllers[index].text,
                          _descControllers[index].text,
                          _itemImageUrls[index],
                        );
                        items.add(item);
                        // 添加新的Form资源
                        setState(() {
                          _count++;
                          _initFormResources();
                        });
                      }
                    },
                  ),
                  RaisedButton(
                    child: Text(
                      "Reset",
                      style: TextStyle(color: Colors.white, fontSize: 16),
                    ),
                    color: Colors.grey,
                    onPressed: () {
                      _formKeys[index].currentState?.reset();
                    }
                  )
                ],
              ),
              Divido()
            ],
          ),
        ),
        selectedTileColor: Colors.red.shade300,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    List<Widget> children = List.generate(_count, (int i) => listTile(i));
    return Scaffold(
      appBar: AppBar(
        title: Text("Add Menu for ${widget.rr.name} Shop"),
      ),
      body: SingleChildScrollView(
        child: Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: children
          ),
        )
      )
    );
  }
}

关键改进点 #

1. 独立管理每个Form的资源：用列表存储每个FormBuilder的GlobalKey和TextEditingController，确保每个Form有自己的独立实例，避免状态冲突。
2. 生命周期管理：在initState初始化第一个Form的资源，在dispose中销毁所有controller，彻底避免内存泄漏和dispose相关异常。
3. 状态隔离：每个Form的图片、图片URL也用列表存储，确保不同Form的状态互不干扰。
4. 安全的状态控制：通过索引访问对应Form的GlobalKey，可以安全调用validate()或reset()方法，完美解决无法控制FormBuilder状态的问题。

这样修改后，既可以正常控制每个FormBuilder的状态，又不会出现输入框消失或dispose相关的错误。

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