Flutter跨类校验实现步骤：多页面Stepper组件onContinue按钮的字段校验方案

嘿，这个需求我之前做过类似的，给你分享一套靠谱的实现方案，分步骤来很清晰：

每个页面是独立的类，那我们得让每个类自己搞定自身字段的校验，这样职责更清晰。做法很简单：

• 如果是StatefulWidget的页面，在它的State类里，给需要校验的字段加控制器（比如TextEditingController），再维护一个错误信息的变量（比如String? _phoneError）。
• 写一个validate()方法，在里面判断字段是否符合要求，更新错误信息的状态，最后返回校验结果（bool类型）。
• 在UI里，把错误信息绑定到输入框的errorText属性，这样校验不通过时用户能直观看到提示。

举个第一个页面的例子：

class StepOnePage extends StatefulWidget {
  final GlobalKey<StepOnePageState> key;

  StepOnePage({required this.key}) : super(key: key);

  @override
  StepOnePageState createState() => StepOnePageState();
}

class StepOnePageState extends State<StepOnePage> {
  final _phoneController = TextEditingController();
  String? _phoneError;

  // 自定义校验方法
  bool validate() {
    setState(() {
      final phone = _phoneController.text.trim();
      if (phone.isEmpty) {
        _phoneError = '手机号不能为空';
      } else if (!RegExp(r'^1[3-9]\d{9}$').hasMatch(phone)) {
        _phoneError = '请输入正确的手机号格式';
      } else {
        _phoneError = null;
      }
    });
    return _phoneError == null;
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextFormField(
          controller: _phoneController,
          keyboardType: TextInputType.phone,
          decoration: InputDecoration(
            labelText: '手机号',
            errorText: _phoneError,
            border: OutlineInputBorder(),
          ),
        ),
      ],
    );
  }
}

接下来，我们需要在承载Stepper的父组件里，控制每个步骤的校验触发和步骤切换：

1. 持有每个页面的GlobalKey：因为每个页面是StatefulWidget，我们可以通过GlobalKey获取到页面的State实例，从而调用它的validate()方法。
2. 配置Stepper的onContinue回调：点击“继续”按钮时，先根据当前激活的步骤，调用对应页面的校验方法。只有校验通过，才切换到下一个步骤；不通过的话，给用户提示错误。

父组件的示例代码：

class StepperValidationDemo extends StatefulWidget {
  @override
  _StepperValidationDemoState createState() => _StepperValidationDemoState();
}

class _StepperValidationDemoState extends State<StepperValidationDemo> {
  int _currentStep = 0;
  // 给每个页面创建GlobalKey，用来获取页面状态
  final _stepOneKey = GlobalKey<StepOnePageState>();
  final _stepTwoKey = GlobalKey<StepTwoPageState>();
  final _stepThreeKey = GlobalKey<StepThreePageState>();

  // 定义Stepper的步骤列表
  List<Step> get _steps => [
        Step(
          title: const Text('第一步：填写手机号'),
          content: StepOnePage(key: _stepOneKey),
          isActive: _currentStep >= 0,
        ),
        Step(
          title: const Text('第二步：填写地址'),
          content: StepTwoPage(key: _stepTwoKey),
          isActive: _currentStep >= 1,
        ),
        Step(
          title: const Text('第三步：确认信息'),
          content: StepThreePage(key: _stepThreeKey),
          isActive: _currentStep >= 2,
        ),
      ];

  // 处理继续按钮的点击事件
  void _handleContinue() {
    bool isCurrentStepValid = false;

    // 根据当前步骤调用对应页面的校验方法
    switch (_currentStep) {
      case 0:
        isCurrentStepValid = _stepOneKey.currentState!.validate();
        break;
      case 1:
        isCurrentStepValid = _stepTwoKey.currentState!.validate();
        break;
      case 2:
        isCurrentStepValid = _stepThreeKey.currentState!.validate();
        // 如果第三步校验通过，就可以执行提交逻辑了
        if (isCurrentStepValid) {
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(content: Text('所有信息校验通过，提交成功！')),
          );
        }
        break;
    }

    // 校验通过且不是最后一步，切换到下一个步骤
    if (isCurrentStepValid && _currentStep < _steps.length - 1) {
      setState(() {
        _currentStep++;
      });
    } else if (!isCurrentStepValid) {
      // 校验不通过，提示用户
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('当前步骤填写有误，请检查！')),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('带跨页校验的Stepper')),
      body: Stepper(
        currentStep: _currentStep,
        steps: _steps,
        onContinue: _handleContinue,
        onCancel: () {
          // 处理取消按钮逻辑，返回上一步
          if (_currentStep > 0) {
            setState(() {
              _currentStep--;
            });
          }
        },
      ),
    );
  }
}

如果需要做跨页面的校验（比如第三步要检查第一步的手机号是否符合某些特殊规则），有两种简单的实现方式：

• 方式一：通过GlobalKey获取其他页面的数据：比如在第三步的校验方法里，通过_stepOneKey.currentState!._phoneController.text拿到第一步的手机号，然后做校验。
• 方式二：父组件统一收集数据：每个页面的校验方法可以返回当前页面的表单数据，父组件把这些数据存在自己的变量里，后续步骤需要时直接使用。比如：

  // 在StepOnePageState的validate方法里返回数据
  Map<String, dynamic>? validate() {
    // 校验逻辑...
    if (_phoneError == null) {
      return {'phone': _phoneController.text};
    }
    return null;
  }
  
  // 父组件里保存数据
  Map<String, dynamic> _formData = {};
  // 在_handleContinue里
  case 0:
    final stepData = _stepOneKey.currentState!.validate();
    if (stepData != null) {
      isCurrentStepValid = true;
      _formData.addAll(stepData);
    }
    break;
  

• 每个页面的校验方法里一定要调用setState，这样错误信息才能更新到UI上，用户能看到哪里错了。
• 如果页面是StatelessWidget，那可以把校验逻辑和状态放到父组件里，或者使用ValueNotifier来管理字段状态，但更推荐用StatefulWidget，职责更清晰。
• 如果项目里用了状态管理库（比如Provider、Riverpod），可以把表单状态放到全局状态里，这样跨类访问会更优雅，不需要依赖GlobalKey。

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