Flutter 验证器仅在双击时触发

Posted 2023-02-23

【中文标题】Flutter 验证器仅在双击时触发

【英文标题】：Flutter validator only trigger on double tap

【发布时间】：2020-11-10 18:46:32

【问题描述】：

我将电话号码存储在 Firebase 文档（表格）中。我想要的是通过使用验证器检测号码是否已经存在并在文本框下显示一条消息，说明电话号码已经存在我对此没有问题，我的问题是必须双击按钮才能执行完成任务。

   var _formKey = GlobalKey<FormState>();
   var validate;

   String validateNumber(String value)
      if (value.isEmpty) 
        return 'Please enter number';
      if(validate == true)
        return "Phone number already exists";
      
      return null;
    

   addPhoneNumber(phoneNumber) async
      var exist = await db.checkPhoneNumber(phoneNumber); //my query to firestore so far i have no problem with this.
      if(exist == true)
         validate = true;
          print(validate);
      
      if(exist == false)
        validate = false;
        Navigator.of(context).push(_verifyPhone(_phoneNumber.text));
        await db.addPhoneNumber(phoneNumber);
      
                    //my function to detect if the number exists

    @override
  Widget build(BuildContext context) 
    _get1();
    return WillPopScope(
      onWillPop: () async 
        Navigator.pop(context);
        return true;
      ,
      child: Scaffold(
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Form(
             key:_formKey,
             child:Expanded(
              child:Scrollbar(
                child: ListView(
                  padding: EdgeInsets.zero,
                  children: <Widget>[
        
                      TextFormField(
                              controller: _phoneNumber,
                              validator: validateNumber,                      //my validator
                    ),
                  ],
                ),
              ),
             ),
            ),
            FlatButton(
                  onTap: ()
                    if(_formKey.currentState.validate())
                     addPhoneNumber(phoneNumber)
                    
                  
                  ,
                )
          ],
        ),
      ),
    );
  

【参考方案1】：

您需要在表单状态上调用validate() 方法。查看 here 获取 API 参考。

框架不会自动为您调用。您需要在按钮的onTap() 方法中调用它。在此处添加一行_formKey.currentState.validate()。

当调用此方法时，表单会为每个表单字段调用validator。

---------------更新------- --------------------

好的，@ppdy，你现在又近了一步。它还不起作用，因为您的验证器只检查值是否不为空。只需仔细查看按下按钮时会发生什么。它运行validateNumber，如果值为空，框架将呈现您的验证消息。然后，如果该值不为空，则运行 addPhoneNumber 方法，但您自己运行它。这很重要，请注意它不会作为文本表单字段validator 属性函数的一部分运行。因此，您需要自己处理await db.checkPhoneNumber(phoneNumber); 的输出，如果检查为假，则在文本表单字段中呈现验证红色消息。

为此，请首先注意TextFormField 类具有decoration 属性。此属性的类型是InputDecoration。请阅读此类here 的文档。因此，通过设置装饰的errorText 属性，您将能够手动将红色验证消息添加到表单字段。

试着想一想，玩弄它，把它们粘在一起，你就会得到你想要的:)

【讨论】：

您好，请检查编辑后的代码仍然无法正常工作

有人可以帮我解决这个问题吗？

我在答案中添加了更多信息。