flutter - 如果至少n个TextFormField被填充并在Flutter中检索其值，如何验证表单？

Question

我在TextFormFields中有三种不同的Form，但是一次只能填充其中的两种。我想实现的是，每当填充其中两个时，不应启用另一个。
他们应该随时了解其他 Realm 的变化。

在它们下面是RaisedButton，当满足此条件时应启用。
此外，当按下所述按钮时，我需要对其值进行一些逻辑运算。

这就是我现在所拥有的:

class LPFilterCalculator extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _LPFilterCalculatorState();
}

class _LPFilterCalculatorState extends State<LPFilterCalculator> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PersistentAppBar("Low Pass Filter").build(context),
      drawer: DrawerMenu(),
      body: Column(
        children: <Widget>[
          LowPassInputForm(),
        ],
      ),
    );
  }
}

/// Inputform class for Calculators
class LowPassInputForm extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _LowPassInputFormState();
}

class _LowPassInputFormState extends State<LowPassInputForm> {
  ValueNotifier<bool> pressed = ValueNotifier(false);
  final _formKey = GlobalKey<FormState>();

  final resistanceTextController = TextEditingController();
  final capacitorTextController = TextEditingController();
  final frequencyTextController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    print('state update');
    return Form(
      onChanged: () => {},
      key: _formKey,
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: <Widget>[
            Column(
              children: <Widget>[
                TextFormField(
                  controller: resistanceTextController,
                  inputFormatters: <TextInputFormatter>[
                    WhitelistingTextInputFormatter.digitsOnly
                  ],
                  keyboardType: TextInputType.number,
                  decoration:
                      const InputDecoration(hintText: 'Enter resistance value'),
                ),
                TextFormField(
                  controller: capacitorTextController,
                  inputFormatters: <TextInputFormatter>[
                    WhitelistingTextInputFormatter.digitsOnly
                  ],
                  keyboardType: TextInputType.number,
                  decoration:
                      const InputDecoration(hintText: 'Enter capacitor value'),
                ),
                TextFormField(
                  controller: frequencyTextController,
                  inputFormatters: <TextInputFormatter>[
                    WhitelistingTextInputFormatter.digitsOnly
                  ],
                  keyboardType: TextInputType.number,
                  decoration: const InputDecoration(
                      hintText: 'Enter desired cutoff frequency'),
                ),
                RaisedButton(
                  elevation: 5.0,
                  onPressed: () {
                    calculateLowPass();
                  },
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  void calculateLowPass() {
    var resistance = resistanceTextController.text;
    var capacitor = capacitorTextController.text;
    var frequency = frequencyTextController.text;
    // do calculations
  }

  @override
  void dispose() {
    frequencyTextController.dispose();
    super.dispose();
  }
}

You should note I'm not really using some properties as well as functionalities of objects, as I'm not really sure which is the correct or best way to approach this in Flutter.

任何提示都将受到欢迎!

Answer 1

您需要在enabled上使用TextFormField属性，并检查其他两个字段是否为空。如果任何字段为空，则启用当前字段。

您可以将数据保存在Object模型中:

class Object {
  // for the sake of this example the fields here are strings, but in practice it's better to change them to double
  String resistance;
  String capacitor;
  String frequency;

  Object({
    this.resistance = '',
    this.capacitor = '',
    this.frequency = '',
  });
}

您的更新状态如下所示，其中添加了Object实例:

class _LowPassInputFormState extends State<LowPassInputForm> {
  final _formKey = GlobalKey<FormState>();

  final resistanceTextController = TextEditingController();
  final capacitorTextController = TextEditingController();
  final frequencyTextController = TextEditingController();

  Object data = Object();

  @override
  Widget build(BuildContext context) {
    return Form(
      onChanged: () => {},
      key: _formKey,
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: <Widget>[
            Column(
              children: <Widget>[
                TextFormField(
                  enabled: data.capacitor.isEmpty || data.frequency.isEmpty,
                  onChanged: (val) => setState(() => data.resistance = val),
                  controller: resistanceTextController,
                  inputFormatters: <TextInputFormatter>[
                    WhitelistingTextInputFormatter.digitsOnly
                  ],
                  keyboardType: TextInputType.number,
                  decoration:
                      const InputDecoration(hintText: 'Enter resistance value'),
                ),
                TextFormField(
                  enabled: data.resistance.isEmpty || data.frequency.isEmpty,
                  onChanged: (val) => setState(() => data.capacitor = val),
                  controller: capacitorTextController,
                  inputFormatters: <TextInputFormatter>[
                    WhitelistingTextInputFormatter.digitsOnly
                  ],
                  keyboardType: TextInputType.number,
                  decoration:
                      const InputDecoration(hintText: 'Enter capacitor value'),
                ),
                TextFormField(
                  enabled: data.resistance.isEmpty || data.capacitor.isEmpty,
                  onChanged: (val) => setState(() => data.frequency = val),
                  controller: frequencyTextController,
                  inputFormatters: <TextInputFormatter>[
                    WhitelistingTextInputFormatter.digitsOnly
                  ],
                  keyboardType: TextInputType.number,
                  decoration: const InputDecoration(
                      hintText: 'Enter desired cutoff frequency'),
                ),
                RaisedButton(
                  elevation: 5.0,
                  onPressed: () {
                    calculateLowPass();
                  },
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  void calculateLowPass() {
    // use data to do calculations
  }

}