Flutter 进行表单登录失败后,数据回显到输入框中

在这里插入图片描述

在使用Flutter进行登录,登录失败后,数据如何回显呢?
这里,就要使用TextFormField里面的属性initialValue

在调用方法的时候,将变量传入

var uid = "";
getTextField(uid,"请输入账号",Icons.phone_android_outlined,false,"uid",FilteringTextInputFormatter.digitsOnly,6,11,'账号长度不能低于 6 位!','账号长度不能高于 11 位'),
TextFormField getTextField(initialValue,labelText,icon,obscureText,data,inputFormatters,validatorLength1,validatorLength2,message1,message2){
    return TextFormField(
      /// 默认值,可以保存用户登录失败后的表单信息
      initialValue: initialValue,
      decoration: InputDecoration(
          labelText: labelText,
          filled: true,
          // 去掉默认的下划线
          enabledBorder: UnderlineInputBorder(
            borderSide: BorderSide.none,
          ),
          //获取输入焦点时的边框样式
          focusedBorder: OutlineInputBorder(
              borderRadius:
              BorderRadius.all(Radius.circular(10.0)),
              borderSide: BorderSide(color: Colors.blue)),
          prefixIcon: Icon(
            icon,
            size: 18,
            color: Colors.blue,
          )),
      //不显示密码
      obscureText: obscureText,
      // onSaved: (value) {
      //   print("username = $value");
      // },
      // onFieldSubmitted: (value){
      //   print("username = $value");
      // },
      onChanged: (value) {
        if("uid" == data){
          this.uid = value;
        }else if("username" == data){
          this.username = value;
        }else if("password" == data){
          this.password = value;
        }else if("confirmPassword" == data){
          this.confirmPassword = value;
        }else if("email" == data){
          this.email = value;
          print(email);
        }
      },
      /// 输入框的规则
      inputFormatters: [
        inputFormatters
      ],
      //验证规则
      validator: (value) {
        if (value.length < validatorLength1) {
          return message1;
        } else if (value.length > validatorLength2) {
          return message2;
        } else {
          return null;
        }
      },
    );
  }

这样,即时表单提交错了,再重新build时,就可以显示我们之前输入在表单中的值了😀。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值