Question

我需要有关此功能的帮助。当我在textField中输入文本时，我需要您在输入另一个textField时验证该文本。

这是我的代码

    class _ProfileState extends State<Profile> {
      bool _hasInputError = false;
  var idNumber = '';
  var nombreUser = "";
  FocusNode focusNode;
  void initState() {
    super.initState();
    focusNode = new FocusNode();
    focusNode.addListener(() {
      if (!focusNode.hasFocus) {
        setState(() {
          _hasInputError = idNumber.length < 3;
        });
      }
    });
  }
      @override
      Widget build(BuildContext context) {



        final nombreUserField = TextField(
          focusNode: _focusNode,
          onChanged: (String text) {
            nombreUser = text;
          },
        );   
        final idNumberElement = TextField(
          focusNode: _focusNode,
          decoration: InputDecoration(
            errorText: _hasInputError ? "Id is too short" : null,
            counterText: "",
          ),
          onChanged: (String tex) {
            idNumber = tex;
          },
        );
        return WillPopScope(
            child: Scaffold(
              body: Listener(
                onPointerUp: (e) {
                  FocusScope.of(context).requestFocus(FocusNode());
                },
                child: SingleChildScrollView(
                  child: Container(child: Column(
                      children: <Widget>[
                        SizedBox(
                          height: 10,
                        ),
                        idNumberElement,
                        SizedBox(
                          height: 20,
                        ),
                        nombreUserField,
                      ],
                    ),
                  ),
                ),
              ),
            ));
      }
    }

我试图使验证出现在onEditingComplete中，但是它不起作用。我尝试这个答案，但是它不起作用。

How to listen focus change in flutter?

Answer 1

initState应该在build函数之外。您已在initState

中声明了build

  FocusNode focusNode;
  void initState() {
    super.initState();
    focusNode = new FocusNode();
    focusNode.addListener(() {
      if (!focusNode.hasFocus) {
        setState(() {
          _hasInputError = idNumber.length < 3;
        });
      }
    });
  }
  @override
  Widget build(BuildContext context){
  ..
  }

您的代码

@override
  Widget build(BuildContext context) {
    var _focusNode = FocusNode();
void initState() {
  super.initState();
  _focusNode.addListener(() {
    if (!_focusNode.hasFocus) {
      if (idNumber.length < 3) {
        "Id is too short";
      }
    }
  });
}
..
}

您还应该使用setState来指示您更改了_hasInputError的值，以便框架可以安排构建，并且可以更新此子树的用户界面以反映新的状态< / p>

两个FocusNode中都有相同的TextField对象。从_focusNode中删除nombreUserField。 FocusNode用于在Flutter的焦点树中标识特定的TextField。每个TextField应该有一个不同的FocusNode。

Answer 2

我想您应该添加

if(!focusNode.hasfocus){
    // Do your stuff
}

focusNode侦听器内部

Answer 3

您需要BLoC pattern来进行管理。

This是BLoC的绝佳库，由Felix

维护

Here是示例。这是一个登录屏幕示例，其中我们检查输入的文本是否为有效的电子邮件，并且密码是否符合某些特定条件。

尽管提供的示例与您要查找的不完全匹配，但是您可以将其用作管理自己的状态的示例。

例如：

您在TextField1中输入文本。
现在单击TextField2。
当第一个视图失去焦点时

if(!firstNode.hasfocus){
    //your code
}

触发一个事件。

如果输入的值无效，则显示相应的错误消息。

Answer 4

这里我们可以利用

 _formKey.currentState.validate();

where _formKey，给表单的键

 final _formKey = GlobalKey<FormState>();

并且这些字段定义了验证器属性。

例如

     Form(
        key: _formKey,
        child: Column(
            children: [
              TextFormField(
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  labelText: 'Title',
                ),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter some text';
                  }
                  return null;
                },
                onSaved: (value) {},
              ),
            ],
        ));

当我专注于另一个textField时验证textField

4 个答案: