如何将焦点添加到具有验证错误的 textformfield

Question

我的表单中有文本表单字段。 当我单击提交按钮时，验证错误会显示在 textformfield 下。 我想将焦点添加到该特定字段，因此当用户单击保存按钮时，该字段会弹出。 用户不需要向上滚动并输入信息。 用户应该能够直接开始输入。 在当前情况下，用户会感到困惑并且不知道为什么保存按钮不起作用。 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()) {
}
}

Answer 1

您可以使用 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'),
            )
          ],
        ),
      ),

需要帮助请叫我：）

Answer 2

像这样使用 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;
                  },

                ),