Flutter中如何修改Form验证后FocusScope的焦点跳转方向？

页面内实现了带大量输入字段的表单，部分字段为必填项。点击保存按钮触发formKey.currentState!.validate()执行表单校验时，焦点默认从表单末尾向开头反向定位首个校验不通过的字段，需要调整焦点跳转方向。
页面采用Stack布局实现了底部固定的粘性保存按钮，表单校验后自动聚焦的错误字段经常被底部的BottomAlignWidget组件遮挡，影响用户填写体验。

相关实现代码如下：

Stack(
  children: [
    SingleChildScrollView(
      child: Form(
        key: formKey,
        child: Column(
          children: [
            EmptyLine(height: 8),
            PropertyWidget(state: state),
            AddressWidget(state: state),
            SellerWidget(state: state),
            AdvtPhotoWidget(state: state),
            DescriptionWidget(state: state),
            MoreInformationWidget(state: state),
            IndicatorsWidget(state: state),
            SourceWidget(state: state),
            const SizedBox(height: 90)
          ],
        ),
      ),
    ),
    BottomAlignWidget(SaveButtonWidget(
        title: localized(context,
            widget.update ?? false ? 'update' : 'save')!,
        onPress: () {
          if (formKey.currentState!.validate()) {
            // 提交逻辑
          } 
        }))
  ],
)

修改焦点跳转方向 #

Flutter原生Form的默认校验逻辑是倒序遍历所有表单字段，定位到视觉上最靠下的错误项后自动聚焦，才会出现反向跳转的问题。不要依赖默认的自动聚焦逻辑，手动接管校验和聚焦流程即可：

• 给外层SingleChildScrollView绑定一个ScrollController，用来后续控制滚动位置
• 点击保存按钮时，先正序（从上到下）遍历formKey.currentState!.fields里的所有表单字段，逐个执行校验，记录第一个校验不通过的字段
• 找到第一个错误字段后，主动调用字段的requestFocus()方法拉起焦点，再通过ScrollController滚动到对应字段位置

核心实现代码参考：

// 声明滚动控制器
final ScrollController formScrollController = ScrollController();

// 替换原保存按钮的onPress逻辑
onPress: () async {
  bool isFormValid = true;
  FormFieldState? firstInvalidField;
  // 正序遍历所有表单字段校验
  for (final field in formKey.currentState!.fields) {
    bool fieldValid = field.validate();
    if (!fieldValid && firstInvalidField == null) {
      firstInvalidField = field;
      isFormValid = false;
    }
  }

  if (isFormValid) {
    // 原有表单提交逻辑
    return;
  }

  // 聚焦第一个错误字段
  firstInvalidField!.requestFocus();
  // 等待焦点响应后滚动到字段位置
  await Future.delayed(const Duration(milliseconds: 80));
  formScrollController.position.ensureVisible(
    firstInvalidField.context.findRenderObject()!,
    alignment: 0.2, // 字段定位到视口20%高度位置，避开底部按钮
    duration: const Duration(milliseconds: 300),
    curve: Curves.easeOut,
  );
}

修复固定按钮遮挡字段问题 #

两个调整就能彻底解决：

• 测量底部BottomAlignWidget的实际渲染高度，把表单末尾的占位SizedBox高度调整为「按钮高度 + 20px」，如果当前写的90小于按钮实际高度就加大数值，保证表单最底部的字段滚动时，下方有足够留白不会被按钮盖住
• 滚动定位错误字段时，alignment参数不要设置为1（定位到视口最底部），保持0.1~0.3之间的数值即可，让错误字段始终出现在视口偏上区域，不会被底部悬浮按钮遮挡。

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