用户登录

用户在登录表单上,输入了用户名与密码,按了登录按钮以后,我们要获取到表单字段里的数据,然后把它发送给我们的后端服务,让它去处理这个用户登录的请求。后端服务可以验证用户名与密码是否匹配,如果匹配就让用户登录。

先在这个登录表单小部件里创建一个 GlobalKey,用这个 Key 可以获取或者验证表单里的数据。 final _formKey ,创建了一个 GlobalKey ,类型是 FormState 。

把这个 key 交给登录表单,在 Form 小部件里,添加一个 key 属性,值就是 _formKey。

LoginModel

然后在 login 目录的下面,新建一个文件,放在 models 里面,名字叫 login_model.dart,在这个文件里定义一个类, 名字是 LoginModel,类里面有两个属性,类型都是 String ,一个是 name 表示用户名,还有一个是 password,表示登录的时候用的密码。

回到 Login 表单,在这个表单里可以创建一个 LoginModel ,类型是 LoginModel ,名字可以叫 _formData ,新建一个 LoginModel。

这样这个 _formData 里面有两个属性,一个是 name 还有一个是 password。

onSaved

再找到用户名表单字段,在它里面添加一个 onSaved,保存表单的时候会执行这个属性指定的方法,方法接收一个 String 类型的参数,名字可以是 value,在这个方法里,设置一下 _formData 里的 name 属性的值,让它等于 value 。

这样保存表单的时候,_formData 里的 name 属性的值,就是用户在用户名表单字段里输入的用户名。

再处理一下 password 字段,添加一个 onSaved 属性,一个方法,接收一个 String 类型的参数,名字是 value,方法里面设置一下 _formData 里的 password ,让它等于 value。

提交

提交表单的动作可以交给下面这个 登录 按钮, 修改一下这个按钮的 onPressed 属性,用一下 _submitForm ,然后再去定义一下需要的 _submitForm 。 void 表示方法不返回值,名字是 _submitForm,在这个方法里,可以用一下 _formKey.currentState 上的 save 方法。

这样 _formData 里面的 name 还有 password 属性的值,就会是用户在用户名与密码字段里输入的东西。

下面可以先在控制台上输出这两个值,print ,输出 Name ,冒号,后面加上 _formData 里的 name 属性的值。然后再用一个 print ,输出 Password,冒号,后面加上 _formData 里的 password 属性的值。

预览

在模拟器上试一下这个登录表单,输入一个用户名,然后再输入一个密码。 然后打开编辑器的控制台,command + shift + Y。

按一下 登录,执行了 _submitForm 方法,它会保存表单的当前状态。 在控制台上,你会发现,输出了一个 Name 还有 Password 。它们的值就是用户在用户名还有密码字段里输入的值。

登录表单:保存表单数据《 Flutter 应用案例: 用户表单 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点