基于 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.
  ...

Answer 2

一个简单的方法是将 TextFormField 的 autovalidate 属性设置为true。这将自动检测 TextFormField 小部件上的更改。然后，我们可以尝试检查验证器属性上 TextFormField 的值的字符串长度是否为 10 个字符。之后我们可以调用 setState 来启用或禁用我们的按钮（我在本例中使用 FlatButton）。

bool _btnEnabled = false;

...

@override
Widget build(BuildContext context){

  ...

  TextFormField(

    ...
    autovalidate: true,
    validator: (String txt){
      if (txt.length == 10){
        setState((){
          _btnEnabled = true;
        });
      } else {
        setState((){
          _btnEnabled = false;
        });
      }
    }

    ...

  FlatButton(
    onPressed: _btnEnabled == true ? yourCallback : null,
    child: ...