button - 基于 TextFormField 内容的 Flutter 启用/禁用按钮

Question

如何根据 TextFormField 的内容激活/停用按钮？

如果 TextFormField 有 10 个输入的数字(如果是手机号码)，我想确保用户只能按按钮 X。

谢谢!

Answer 1

小部件的状态可以在表单的 onChanged 回调中更新，只要任何表单字段的值发生变化，就会调用该回调。在那里您可以使用表单键来验证表单并设置一个标志来启用/禁用按钮。此解决方案允许您缩放以禁用具有多个字段的表单中的按钮。例如，

/// Key used to reference the form.
final _formKey = GlobalKey<FormState>();

...

Form(
  key: _formKey,
  onChanged: () => setState(() => _enableBtn = _formKey.currentState.validate()),
  child: ListView(
    children: <Widget>[
      TextFormField(
        validator: (value) => value.length < 10 ?
          'Number must be at least 10 digits' : // return an error message
          null,
        ...
      ),
    ],
  ),
)

...

FlatButton(
  onPressed: _enableBtn ?
    () => _doSomething() :
    null, // setting onPressed to null disables the button.
  ...