时间戳

首页 > 解决方案 > 如何将全局键 _keyForm 放在我的 TextFormField 中，因为它由不同的小部件分隔

validation - 如何将全局键 _keyForm 放在我的 TextFormField 中，因为它由不同的小部件分隔

问题描述

我试图弄清楚如何将我的全局 _formKey 放在我的表单字段中，因为它由不同的小部件分隔。我尝试将它们放在两个小部件中，但它检测到 2 个不同的小部件正在使用相同的全局密钥。这是我试图修复的代码。我希望我能在这个表单验证方面得到一些帮助。谢谢你。

  final AuthService _auth = AuthService();
  final _formKey = GlobalKey<FormState>();

  //text field state
  String username = '';
  String password = '';
  String error ='';

  bool _rememberMe = false;

  Widget _buildUsernameTF() {
   return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
     children: <Widget>[
      Text(
       'Username',
         style: kLabelStyle,
       ),
    SizedBox(height: 10.0),
    Container(
      alignment: Alignment.centerLeft,
      decoration: kBoxDecorationStyle,
      height: 60.0,
        child: TextFormField(
        validator: (val) => val.isEmpty ? 'Enter the username' : null,
        onChanged: (val){
          setState(() => username = val);
        }, 
        keyboardType: TextInputType.emailAddress,
        style: TextStyle(
          color: Colors.white,
          fontFamily: 'OpenSans',
        ),
        decoration: InputDecoration(
          border: InputBorder.none,
          contentPadding: EdgeInsets.only(top: 14.0),
          prefixIcon: Icon(
            Icons.person,
            color: Colors.white,
          ),
          hintText: 'Enter your username',
          hintStyle: kHintTextStyle,
        ),
      ),
    ),
  ],
);}

  Widget _buildPasswordTF() {
  return Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    Text(
      'Password',
      style: kLabelStyle,
    ),
    SizedBox(height: 10.0),
    Container(
      alignment: Alignment.centerLeft,
      decoration: kBoxDecorationStyle,
      height: 60.0,
      child: TextFormField(
        validator: (val) => val.length < 8 ? 'Enter the password at least 8 chars long' : null,
        onChanged: (val){
          setState(() => password = val);
        },
        obscureText: true,
        style: TextStyle(
          color: Colors.white,
          fontFamily: 'OpenSans',
        ),
        decoration: InputDecoration(
          border: InputBorder.none,
          contentPadding: EdgeInsets.only(top: 14.0),
          prefixIcon: Icon(
            Icons.lock,
            color: Colors.white,
          ),
          hintText: 'Enter your Password',
          hintStyle: kHintTextStyle,
        ),
      ),
    ),
  ],
);
}

标签： validationfluttertextfield

解决方案

FormKey仅用于单个Form()。请在此处阅读有关表单字段验证的信息。用例是这样的，Form class应该只有一个_formKey，所有的TextFields()都将child在Form. 请看表示

final _formKey = GlobalKey<FormState>();

Form(
  key: _formKey,
  // Here you can get your child/children on the basis of your requirements
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
        //Mention both of your TextFields here
    ]
  )
)

所以你的代码应该是这样的，才能工作。

final _formKey = GlobalKey<FormState>();

Form(
  key: _formKey,
  // Here you can get your child/children on the basis of your requirements
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: <Widget>[
        _buildUsernameTF(),
        _buildPasswordTF()
    ]
  )
)

我希望，您现在知道如何对按钮单击进行验证。但它也在链接中提到，所以不用担心。休息一下，这肯定会对你有所帮助。保持学习。

推荐阅读