Stepper组件表单验证失效问题求助

我在做一个客户端分步骤表单的Stepper组件，把多输入项拆分成了3个步骤，每个步骤对应独立的Form和GlobalKey<FormState>，但现在遇到了一个问题：点击「继续/下一步」按钮时，即使当前步骤的输入框为空，还是能直接跳转到下一个步骤，表单验证完全没生效。我参考了一些解决方案但没解决问题，以下是我的核心代码，麻烦帮忙看看哪里出问题了：

class FillClientProfileBody extends StatefulWidget {
  const FillClientProfileBody({super.key, required this.id});
  final String id;

  @override
  State<FillClientProfileBody> createState() => _FillClientProfileBodyState();
}

class _FillClientProfileBodyState extends State<FillClientProfileBody> {
  final List<GlobalKey<FormState>> formKeys = [
    GlobalKey<FormState>(), // ClientDataStep
    GlobalKey<FormState>(), // ProjectDataStep
    GlobalKey<FormState>(), // WorkDataStep
  ];

  // 省略各类TextEditingController和ValueNotifier定义...

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // 省略标题等UI...
        ValueListenableBuilder(
          valueListenable: currentStep,
          builder: (context, value, child) {
            final isLastStep = currentStep.value == getSteps().length - 1;
            return Stepper(
              steps: getSteps(),
              currentStep: value,
              onStepContinue: () {
                if (formKeys[currentStep.value].currentState!.validate()) {
                  if (currentStep.value < getSteps().length - 1) {
                    currentStep.value++;
                  } else {
                    // 最后一步提交逻辑
                    context.read<AuthRoleProfileBloc>().add(UpdateClientProfileEvent(...));
                  }
                }
              },
              // 省略onStepCancel、controlsBuilder等...
            );
          },
        ),
      ],
    );
  }

  List<Step> getSteps() => [
    buildCustomStep(
      stepIndex: 0,
      title: TextStrings.clientData,
      content: ClientDataStep(
        formKey: formKeys[0],
        nameController: _nameController,
        phoneController: _phoneController,
        // 省略其他参数...
      ),
    ),
    // 省略另外两个步骤的buildCustomStep...
  ];
}

我排查后仍没解决的疑问： #

1. 每个步骤的Form我都传了对应的formKey，为什么validate()没起作用？
2. 是不是ValueNotifier的状态更新方式有问题？
3. 有没有可能是强制解包currentState!导致的隐性错误？

解决方案（结合常见踩坑点） #

1. 优先检查：子步骤组件是否正确绑定FormKey

这是最容易忽略的核心问题！你需要确保ClientDataStep这类子组件的内部，Form组件的key参数确实绑定了传入的formKey，比如：

class ClientDataStep extends StatelessWidget {
  final GlobalKey<FormState> formKey;
  final TextEditingController nameController;
  // 省略其他参数

  const ClientDataStep({super.key, required this.formKey, required this.nameController, ...});

  @override
  Widget build(BuildContext context) {
    return Form(
      key: formKey, // 这里必须严格绑定传入的formKey！
      child: Column(
        children: [
          TextFormField(
            controller: nameController,
            // 必须给必填项加validator！
            validator: (value) {
              if (value?.trim().isEmpty ?? true) {
                return "请输入姓名";
              }
              return null;
            },
          ),
          // 其他输入框同理添加validator
        ],
      ),
    );
  }
}

如果子组件里的Form没绑定对应的GlobalKey，调用formKeys[0].currentState!.validate()时，根本不会触发当前步骤的表单验证，自然会直接跳转。

2. 完善onStepContinue的空安全与验证逻辑

把原来的强制解包逻辑优化，避免隐性错误，同时增加验证失败的用户提示：

onStepContinue: () {
  final currentFormKey = formKeys[currentStep.value];
  final currentForm = currentFormKey.currentState;

  // 先判断表单状态是否存在，再执行验证
  if (currentForm != null && currentForm.validate()) {
    // 可选：保存当前表单的状态（如果需要）
    currentForm.save();

    if (currentStep.value < getSteps().length - 1) {
      // 正确更新ValueNotifier的值（值类型直接赋值新值）
      currentStep.value = currentStep.value + 1;
    } else {
      // 最后一步提交逻辑
      context.read<AuthRoleProfileBloc>().add(UpdateClientProfileEvent(...));
    }
  } else {
    // 验证失败时给用户提示
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text("请完成当前步骤的所有必填项")),
    );
  }
},

3. 检查所有必填输入框的validator

确保每个需要验证的TextFormField都设置了validator回调——如果某个必填项没有validator，Form的validate()会默认认为该字段验证通过，导致整个步骤的验证失效。

4. 可选：拦截步骤标题的直接跳转（如果需要）

如果想禁止用户点击步骤标题直接跳转到未完成的后续步骤，可以在onStepTapped里加拦截：

onStepTapped: (value) {
  // 只允许跳转到当前步骤及之前的步骤
  if (value <= currentStep.value) {
    currentStep.value = value;
  } else {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text("请先完成当前步骤的内容")),
    );
  }
},

内容来源于stack exchange