Flutter中TextFormField与BLoC数据同步的执行顺序问题

问题场景 #

AppBar设置保存按钮，页面主体为表单，需要将TextFormField的内容传递给BLoC。尝试过三种同步方式，但都存在问题：

• onChanged：快速输入时每个字符都会触发事件，导致BLoC频繁更新状态，造成性能过载
• onSubmitted：未按Enter键就切换到其他字段或点击按钮时，无法触发同步，内容丢失
• focusNode.addListener：表现最优，但点击保存按钮时，保存逻辑会先执行，之后才触发焦点失去的监听回调，导致保存时无法获取最新输入内容。日志显示执行顺序为：JOBEDITVIEW saving → JOBEDITVIEW WIDGET.ONCHANGE change

解决方案 #

方案1：保存前主动触发焦点切换与回调等待 #

修改保存按钮的onPressed逻辑，主动让当前聚焦的输入框失焦，并等待焦点监听回调执行完成后再执行保存：

onPressed: () async {
  // 让当前拥有焦点的输入框失去焦点，触发focusNode的监听回调
  FocusManager.instance.primaryFocus?.unfocus();
  // 等待微任务队列执行，确保焦点回调完成
  await Future.delayed(Duration.zero);
  
  if (widget.isEditable) {
    if (widget.formKey.currentState!.validate()) {
      keyJobEditView.currentState!.saveForm(bloc);
    }
  } else {
    bloc.add(JobEditRequested());
  }
},

原理：Flutter事件队列中，触摸事件优先级高于焦点变化回调，通过unfocus()主动触发焦点变化，再用Future.delayed(Duration.zero)将保存逻辑延后到微任务队列，确保焦点回调先执行完毕。

方案2：利用Form组件的save方法统一同步 #

遵循Flutter Form的设计规范，通过onSaved回调统一处理字段内容同步，避免依赖焦点监听：

1. 给TextFormField添加onSaved回调：

TextFormField(
  controller: _notesCtrl,
  onSaved: (value) {
    // 同步输入框最新内容到jobUpdated
    widget.onChanged((startAfter, finishBefore, fixedDurationInMin, value ?? ""));
  },
),

2. 修改saveForm方法，先执行Form的save触发所有字段的同步：

void saveForm(JobEditBloc bloc) {
  if (formKey.currentState!.validate()) {
    // 触发所有字段的onSaved回调，更新jobUpdated为最新值
    formKey.currentState!.save();
    print("JOBEDITVIEW saving");
    bloc.add(JobEditDataSubmitted(jobData: jobUpdated!));
  }
}

这种方式更简洁，也避免了焦点事件的时序问题，是推荐的解决方案。

方案3：保存时手动同步聚焦字段内容 #

如果坚持使用焦点监听，可以在保存前手动检查并同步当前聚焦输入框的内容：

void saveForm(JobEditBloc bloc) {
  if (formKey.currentState!.validate()) {
    // 若当前输入框处于聚焦状态，直接同步最新内容
    if (nodeNotes.hasFocus) {
      widget.onChanged((startAfter, finishBefore, fixedDurationInMin, _notesCtrl.text));
    }
    print("JOBEDITVIEW saving");
    bloc.add(JobEditDataSubmitted(jobData: jobUpdated!));
  }
}

该方案适合仅需处理少数输入框的场景，但需要逐个维护输入框的状态，扩展性较差。

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