gpt4 book ai didi

flutter - flutter 中的异步验证仍然存在问题

转载 作者:行者123 更新时间:2023-12-03 03:25:17 26 4
gpt4 key购买 nike

我想检查后端数据库中是否已存在电子邮件。因此,我尝试使用状态var,该状态应在异步调用返回后更改。我发现以下包含已接受答案的线程。

Flutter - Async Validator of TextFormField

Flutter firebase validation of form field inputs

我尝试了这些答案以及一些变体,但仍然对我不起作用。我只是模拟后端调用。将_emailExist设置为true可以打印,但是我看不到任何错误。如果我单击按钮两次,错误消息将正确显示。

import 'package:flutter/material.dart';

class LoginPage extends StatefulWidget {
LoginPage({Key key}) : super(key: key);

@override
_LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
final GlobalKey<FormState> _loginFormKey = GlobalKey<FormState>();
bool _emailExist = false;

@override
initState() {
super.initState();
}

checkEmail(String name) {

// Simulare async call
Future.delayed(Duration(seconds: 2)).then((val) {
setState(() {
_emailExist = true;
});
print(_emailExist);
});
return _emailExist;
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Test"),
),
body: Container(
child: SingleChildScrollView(
child: Form(
key: _loginFormKey,
child: Column(
children: <Widget>[
TextFormField(
validator: (value) =>
checkEmail(value) ? "Email already taken" : null,
),
RaisedButton(
child: Text("Login"),
onPressed: () {
if (_loginFormKey.currentState.validate()) {}
},
)
],
),
))));
}
}

最佳答案

TextFormField希望将同步函数用作验证器(这是一个执行某些任务然后返回其结果的普通函数)。
checkEmail正是这个同步功能。它设置了一个Future,它将在两秒钟内将_emailExist设置为true。但至关重要的是,它不会等待两秒钟左右。它立即返回_emailExist的当前值(首次运行时为false)。两秒钟后,您的Future解析并将_emailExist设置为true。这就是为什么当您第二次运行它时,它可以按预期运行(_checkEmail再次返回_emailExist的当前值,但现在是true)。

解决此问题的一种方法是提供onChangeddecoration参数来实现相同的效果:

TextFormField(
onChanged: _handleChange,
decoration: InputDecoration(
errorText: _emailExist ? "Email already taken" : null,
),
),

现在,您可以在文本字段更改时进行异步后端调用,然后根据响应更新状态:
void _handleChange(String val) {
Future.delayed(Duration(seconds: 2)).then(() {
setState(() {
_emailExist = true;
});
print(_emailExist);
});
}

debounce这个函数是个好主意,这样您就不会在用户键入的每个字母上发出请求!

这是关于Flutter / Dart中异步编码的一个好 video和一些 docs

关于flutter - flutter 中的异步验证仍然存在问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58435975/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com