Flutter FormBuilder重复字段替换警告 动态表单选中状态丢失如何解决

核心原因 #

• 触发setState更新选项状态时，整个表单组件树会重建，flutter_form_builder默认会重新注册所有在组件树中的表单字段
• 未给条件显示的后续组件加显式渲染判断，导致不需要的字段重复插入表单，抛出重复注册警告
• flutter_form_builder默认开启了*clearValueOnUnregister*配置，字段短暂从组件树移除时会自动清空已保存的值，重建后就会出现选中状态丢失的问题

解决方案 #

步骤1：修改FormBuilder全局配置 #

给你的根FormBuilder组件添加clearValueOnUnregister: false参数，关闭字段移除时自动清空值的逻辑：

FormBuilder(
  key: _fbKey,
  clearValueOnUnregister: false, // 新增这一行
  // 其余原有配置保持不变
  child: // 原有表单内容
)

步骤2：给后续字段加条件渲染逻辑 #

只有当对应单选选了「Sim」时才渲染下方的复选框组件，避免多余字段重复注册：

// diuresis单选之后的复选框，新增条件判断
if (_diuresis)
  Container(
    child: FormBuilderCheckboxGroup(
      name: "diuresisAspect",
      // 其余原有配置保持不变
    )
  ),

// elimination单选之后的复选框，新增条件判断
if (_intestinalElimination)
  Container(
    child: FormBuilderCheckboxGroup(
      name: "eliminationAspect",
      // 其余原有配置保持不变
    )
  ),

步骤3：调整保存逻辑的执行顺序 #

把表单保存操作放到setState的帧回调中，避免状态更新和保存操作冲突：

onChanged: (option) {
  setState(() {
    _diuresis = option == "Sim";
  });
  // 等状态更新完成后再保存表单
  WidgetsBinding.instance.addPostFrameCallback((_) {
    _fbKey.currentState?.save();
  });
}

可选优化：给自定义单选组件绑定初始值 #

给HMClickableCard内部的FormBuilderRadioGroup添加initialValue参数，绑定表单已保存的对应字段值，确保重建时自动回显：

HMClickableCard(
  options: ["Sim", "Não"],
  label: "Diurese",
  name: "diuresis",
  // 新增initialValue参数，传入表单已保存的值
  initialValue: _fbKey.currentState?.value['diuresis'],
  // 其余配置保持不变
)

按上述步骤修改后，重复注册警告会消失，切换选项时其他字段的选中状态也不会丢失。

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