能否在Stateless Widget与Provider中使用flutter_form_builder并跨重建保留数据
解决方案
- 问题根因:
flutter_form_builder默认将用户输入的临时数据存在组件内部状态中,应用全局重建(比如主题切换)时,Stateless组件的内部状态会被完全销毁,你没有将输入数据实时同步到Provider中,就会出现表单清空的表象,和是否存储formKey没有关系。 - 第一步:在页面对应的Provider中增加表单数据存储字段和更新方法,示例代码:
class YourPageProvider extends ChangeNotifier { // 存储全量表单数据,key和FormBuilder子项的name属性一一对应 Map<String, dynamic> formData = {}; void updateFormData(Map<String, dynamic> newData) { formData.addAll(newData); notifyListeners(); } // 原有提交方法可以直接读formData使用,不需要再读表单状态 void submitForm() { // 原有提交逻辑,直接使用this.formData即可 } }
- 第二步:修改你的FormBuilder组件配置,仅需增加两个属性即可:
FormBuilder( // 表单任意字段变化时,直接把全量表单键值对同步到Provider onChanged: (value) => context.read<YourPageProvider>().updateFormData(value), // 重建时从Provider读取已存的数据作为初始值回填 initialValue: context.watch<YourPageProvider>().formData, // 其余原有配置(child、formKey等)保持不变 child: // 你的表单子项 )
- 无需额外修改其他逻辑,不需要把组件改成Stateful,也不需要把formKey存到Provider中,切换主题重建时表单会自动从Provider读取已存储的数据回填,不会丢失。
内容的提问来源于stack exchange,提问作者Denes
相关产品推荐
相关产品推荐

