flutter - 如何验证 Stepper 中的每个表单步骤

Question

我正在尝试在步进器的每个步骤中验证表单。我正在从 map 创建步进器列表。问题是，如果我为每个步骤添加表单，我会收到错误

Multiple widgets used the same GlobalKey.

如何为每个表单动态创建新 key

  List<Step> stepList() {
    List<Step> _steps = [];
    list.forEach((k, v) => _steps.add(Step(
          title: Text(k),
          content: Column(
            children: v.map<Widget>((child) {
              return Form(key: _formKey, child: child);
            }).toList(),
          ),
        )));
    return _steps;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stepper(
        onStepContinue: next,
        currentStep: current,
        onStepCancel: cancel,
        steps: stepList(),
      ),
    );
  }

这是完整的复制粘贴代码...还尝试动态创建新 key

class _MaterialScreenState extends State<MaterialScreen> {
  int current = 0;
  bool complete = false;

  //final _formKey = GlobalKey<FormState>();

  List<GlobalKey<FormState>> _getFormKeys() {  //attempt to create list of Form keys for each step 
    List<GlobalKey<FormState>> l = [];
    keyList().forEach((v) => l.add(GlobalKey<FormState>()));
    return l;
  }

  goTo(int step) {
    setState(() => current = step);
  }

  bool _validate() { // this method is called on null
    final form = _getFormKeys()[current].currentState;
    if (form.validate()) {
      return true;
    }
    return false;
  }

  next() {
    bool validated = _validate();
    print(validated);
    if (complete == false) {
      if (current + 1 != list.length && validated) {
        goTo(current + 1);
      }
      if (current + 1 == list.length) {
        setState(() {
          complete = true;
        });
      }
    } else {
      print('saved');
    }
  }

  cancel() {
    if (current > 0) {
      goTo(current - 1);
    }
  }

  List<String> keyList() {
    List<String> l = [];
    list.forEach((k, v) {
      l.add(k);
    });
    return l;
  }

  Map<String, List<Widget>> list = {
    'Step1': [
      TextFormField(validator: (s) => s.isNotEmpty ? null : 'Required')
    ],
    'Step2': [
      TextFormField(validator: (s) => s.isNotEmpty ? null : 'Required')
    ],
    'Step3': [TextFormField(validator: (s) => s.isNotEmpty ? null : 'Required')]
  };

  List<Step> stepList() {
    List<Step> _steps = [];
    list.forEach((k, v) => _steps.add(Step(
          title: Text(k),
          content: Column(
            children: v.map<Widget>((child) {
              return Form(
                  key: _getFormKeys()[keyList().indexOf(k)], child: child);
            }).toList(),
          ),
        )));
    return _steps;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stepper(
        onStepContinue: next,
        currentStep: current,
        onStepCancel: cancel,
        steps: stepList(),
      ),
    );
  }
}

Answer 1

它不起作用并且您的 validate 方法在 null 上调用的原因是因为您每次调用它时都在方法 _getFormKeys() 中创建了 brad new GlobalKey。您所要做的就是在 initState 中初始化您的 globalKey 列表，然后按照您的操作使用它们

class _MaterialScreenState extends State<MaterialScreen> {
  int current = 0;
  bool complete = false;
  List<GlobalKey<FormState>> _formKeyList = []; //<- create variable for the list

  Map<String, List<Widget>> list = {
    'Step1': [
      TextFormField(validator: (s) => s.isNotEmpty ? null : 'Required')
    ],
    'Step2': [
      TextFormField(validator: (s) => s.isNotEmpty ? null : 'Required')
    ],
    'Step3': [TextFormField(validator: (s) => s.isNotEmpty ? null : 'Required')]
  };

  void initState() {
    list.forEach((k, v) {
      _formKeyList.add(GlobalKey<FormState>()); //<-- initialise it here
    });
    super.initState();
  }

  goTo(int step) {
    setState(() => current = step);
  }

  bool _validate() {
    // this method is called on null
    final form = _formKeyList[current].currentState;
    if (form.validate()) {
      return true;
    }
    return false;
  }

  next() {
    bool validated = _validate();
    print(validated);
    if (complete == false) {
      if (current + 1 != list.length && validated) {
        goTo(current + 1);
      }
      if (current + 1 == list.length) {
        setState(() {
          complete = true;
        });
      }
    } else {
      print('saved');
    }
  }

  cancel() {
    if (current > 0) {
      goTo(current - 1);
    }
  }

  List<String> keyList() {
    List<String> l = [];
    list.forEach((k, v) {
      l.add(k);
    });
    return l;
  }

  List<Step> stepList() {
    List<Step> _steps = [];
    list.forEach((k, v) => _steps.add(Step(
          title: Text(k),
          content: Column(
            children: v.map<Widget>((child) {
              return Form(
                  key: _formKeyList[keyList().indexOf(k)], child: child);
            }).toList(),
          ),
        )));
    return _steps;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stepper(
        onStepContinue: next,
        currentStep: current,
        onStepCancel: cancel,
        steps: stepList(),
      ),
    );
  }
}