用户登录

在 Form 里面可以包装一组表单字段 .. 每个字段可以放在一个 FormField 里面 .. 下面我们先一起创建一个注册用户用的表单 .. 先添加一个 StatefulWidget ... 名字可以是 RegisterForm ..

把这个小部件放在上面的这个 FormDemo 里面 ...

继续再编辑一下 RegisterForm ..

用一下 Form 小部件 .. 它需要一个 child ... 这个 child 可以用一个 Column ... 里面可以包装一组竖排显示的小部件 ...

表单字段是一个 FormField .. 也就是如果我们需要一个文本字段,先要添加一个 FormField .. 里面构建一个 TextField ... 有个简单的小部件叫 TextFormField .. 它就相当于是在一个 FormField 里面包含了一个之前我们介绍过的 TextField ..

添加一个 TextFormField .. 用一下 decoration .. 它是一个 InputDecoration .. 里面用一个 labelText 给这个文本字段添加一个标签 .. 标签文字是 Username ... 用户名 ..

复制一份 ... 修改一下标签文字 .. 这个是 Password ... 表示密码 .. 密码是比较敏感的内容 .. 所以在这个 TextFormField 里面 .. 可以把 obscureText 这个属性的值设置成 true ..

这样在这个文本框里面输入的内容,不会直接显示出来 .. 会用一些小圆点表示 ..

继续再编辑这个表单 .. 再添加一个提交按钮 .. 先添加一个 Container .. 设置一下它的宽度 .. 值可以是 double.infinity ...

这个 Container 的 child 可以用一个 RaisedButton .. 一个按钮小部件 .. 先用一个 color 属性设置一下按钮的背景颜色 .. 这个颜色可以使用主题里面设置的 accentColor .. Theme.of(context).accentColor ..

它的 child 属性的值是按钮上面要显示的东西 .. 一个文本小部件 .. 要显示的文字是 Register .. 再设置一下文字的样式 .. TextStyle .. 把文字的 color .. 设置成白色 ...

然后再把 elevation 设置成 0.0 .. 按钮还需要一个 onPressed .. 先添加一个空白的方法 ..

在这个按钮跟上面这个文本框之间添加点间距 .. 可以直接用一个 SizedBox .. 设置一下它的 height 属性的值 .. 大小是 32.0 ..

Form:表单《 Flutter 移动应用:表单 》

统计

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

社会化网络

关于

微信订阅号

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