在使用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时,就可以显示我们之前输入在表单中的值了😀。