首页 > 解决方案 > 表单有效时立即显示元素

问题描述

我试图在我的表单生效后立即显示元素。根据颤振文档,我需要使用 _formKey.currentState.validate() 但在文档中它用于按钮单击,而我正在尝试使用它来显示/隐藏元素。

工作代码(在颤振教程中使用)

return Form(
  key: _formKey,
  child: Column(
    children: [
      TextFormField(
        autovalidate: true,
        validator: validateName,
      ),

      RaisedButton(
          onPressed: () => _formKey.currentState.validate()
              ? print('valid')
              : print('not valid'))

我的代码带有 (INVALID MEMER OF NULL: 'validate) 错误

return Form(
  key: _formKey,
  child: Column(
    children: [
      TextFormField(
        autovalidate: true,
        validator: validateName,
       ),

      _formKey.currentState.validate()
          ? Container(child: Text('valid'))
          : Container(child: Text('not valid'))

标签: flutter

解决方案


对你来说最好的答案是使用TextFormField onChanged,它是 type ValueChanged,它跟踪你在你的TextFormField

优势

您将能够跟踪文本更改,并据此显示/隐藏内容

坏处

每个人都TextField应该维护bool不同TextField的项目以跟踪项目

它就像一种解决方法,因此可以以这种方式使用。我使用单个 TextFormField 来展示它是如何工作的,然后您可以在上面工作TextFormField并启动并运行它。

最终解决方案

       bool isValid = false;
       final TextEditingController _controller = new TextEditingController();

       Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
             TextFormField(
               decoration: InputDecoration(hintText: 'Enter your data'),
               controller: _controller,
               onChanged: (String val){
                 setState((){
                   if(val.length >= 4) isValid = true;
                   else isValid = false;
                 });
               }
             ),
             SizedBox(height: 20.0),
             isValid ? Text('Valid String', textAlign: TextAlign.center) : Text('Name must be more than 3 character', textAlign: TextAlign.center)
          ]
        )

解决方案:对于各种,您必须检查所有不同的布尔值是否为真,基于此,您可以显示/隐藏数据。

结果

结果 GIF

让我知道是否对你有用:)


推荐阅读