如何解决如何将焦点添加到具有验证错误的文本表单字段
我的表单中有 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;
},
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。