如何将焦点添加到具有验证错误的文本表单字段

问题描述

我的表单中有 textformfields。当我单击提交按钮时，文本表单字段下会显示验证错误。我想将焦点添加到该特定字段，以便当用户单击保存按钮时该字段会弹出。用户不需要向上滚动并输入信息。用户应该能够直接开始输入。在当前场景中，用户感到困惑并且不知道为什么保存按钮不起作用。 Bcoz 直到向上滚动错误是未知的。

 TextFormField(
                  controller: NoteController,validator: (String value){
                    if(value.isEmpty)
                      {
                        return "Note can't be null";
                      }
                    else
                      return null;
                   },decoration: Inputdecoration(
                      border: OutlineInputBorder(
                        borderSide: const BorderSide(width: 2.0),)),keyboardType: TextInputType.multiline,minLines: 5,maxLines: 5,onChanged: (value) {
                    this.note.note = value;
                  },),bool validateAndSave() {
    final form = globalFormKey.currentState;
    if (form.validate()) {
      form.save();
      return true;
    }
    return false;
  }

void _save() async {
    if (validateAndSave()) {
}
}

解决方法

您可以使用 FocusNode 和 TextField 来实现这一点。你可以在这里读更多关于它的内容 https://flutter.dev/docs/cookbook/forms/focus

让我给你看一个例子（试过了，它有效）：

在构建方法之前：

  final FocusNode noteFocus = FocusNode();

在构建方法中：

 Form(
        key: _formKey,child: Column(
          children: [
            TextFormField(
              // Add FocusNode to TextFieldForm
              focusNode: noteFocus,validator: (value) {
                if (value == null || value.isEmpty) {
                  // Request focus in case of error
                  noteFocus.requestFocus();
                  return "Note can't be null";
                }
                return null;
              },),ElevatedButton(
              onPressed: () {
                if (_formKey.currentState!.validate()) {
                  print('Validated');
                }
              },child: Text('Submit'),)
          ],

如果您需要其他任何东西，请告诉我:)

像这样使用 FocusNode。

FocusNode focusNode = FocusNode();

TextFormField(
                  controller: NoteController,focusNode: focusNode,validator: (String value){
                    if(value.isEmpty)
                      {
                        Focus.of(context).requestFocus(focusNode);
                        return "Note can't be null";
                      }
                    else
                      return null;
                   },decoration: InputDecoration(
                      border: OutlineInputBorder(
                        borderSide: const BorderSide(width: 2.0),)),keyboardType: TextInputType.multiline,minLines: 5,maxLines: 5,onChanged: (value) {
                    this.note.note = value;
                  },

setfocus validation