Flutter 开发一个登录页面
业务逻辑
为了演示登录跳转,在分类浏览先做了一个简单的按钮,点击跳转到登录页面。实际的 app 中,通常会是触发某些需要登录才能查看的操作后再跳转到登录界面。
布局分析
界面如上图所示,从界面上看,整体内容区域是居中的,内容的布局是一个简单的列式布局,包括了顶部的一个 logo(通常是 app图标),再往下是两个文本输入框,最后是登录按钮。整体布局比较简单,使用 center 下嵌一个column 进行列布局即可。
图片圆形裁剪
在 flutter 中实行图片圆形裁剪有两个方式,一是使用外层的容器,通过将正方形的按圆形裁剪即可;二是使用内置的 circleavatar。不过从名字上看 circleavatar 用于头像的,因此这里使用容器的来实现圆形裁剪。封装一个获取圆形图片的方法_getroundimage,传入图片资源名称和正方形边长,代码如下所示:
widget _getroundimage(string imagename, double size) { return container( width: size, height: size, clipbehavior: clip.antialias, decoration: boxdecoration( borderradius: borderradius.all(radius.circular(size / 2)), ), child: image.asset( imagename, fit: boxfit.fitwidth, ), ); }
这里使用了 boxdecoration 将边框设置为圆形的边框,半径为边长的一半,这样就达到边框是圆形的效果了。但是,需要额外设置一个属性就是 clipbehavior,这是边缘裁剪类型,默认是不裁剪的。这里使用了 clip.antialias(抗锯齿)的方式进行裁剪,这种方式的裁剪效果最好,但是更耗资源,其他的裁剪方式如下:
- clip.hardedge:从名字就知道,这种方式很粗糙,但是裁剪的效率最快;
- clip.antialiassavelayer:最为精细的裁剪,但是非常慢,不建议使用;
- clip.none:默认值,如果内容区没有超出容器边界的话,不会做任何裁剪。内容超出边界的话需要使用别的裁剪方式防止内容溢出。
圆形扁平按钮
这里需要提一下, flutter 2.0以前的扁平按钮是flatbutton,使用起来很简单,但是很多场合不太满足,因此2.0以后引入了 textbutton 替代。textbutton 多了一个 style来装饰按钮样式。具体可以看官方的文档。这里我们的按钮需要设置背景色为主题色,然后按钮文字颜色为白色,同时需要切成圆角,因此还是使用 container 的边界圆弧来实现。需要注意的是,默认按钮的宽度是根据内容来的,因此为了让按钮撑满屏幕,我们设置了 container 的宽度为 double.infinity。代码如下所示:
widget _getloginbutton() { return container( height: 50, width: double.infinity, margin: edgeinsets.all(10), decoration: boxdecoration( color: theme.of(context).primarycolor, borderradius: borderradius.circular(4.0), ), child: textbutton( style: buttonstyle( foregroundcolor: materialstateproperty.all<color>(colors.white), backgroundcolor: materialstateproperty.all<color>(theme.of(context).primarycolor), ), child: text( '登录', ), onpressed: () { print( 'login: username=${_username.trim()}, password=${_password.trim()}'); }, ), ); }
按钮点击回调事件为 onpressed,这里只是简单地打印了表单的内容。
textfield 文本框
textfield 是 flutter 提供的文本输入框,textfield 的属性非常多,常用的属性如下:
- keyboardtype:键盘类型,可以指定是数字、字母、电话号码、邮箱、日期等多种方式,通过与表单内容匹配的键盘类型可以提供输入效率,进而改善用户体验。
- controller:texteditingcontroller 对象,texteditingcontroller 主要用于控制文本框的初始值,清除内容的操作。
- obscuretext:是否需要隐藏输入内容,如果为 true,则输入内容会使用圆点显示,通常用与密码。
- decoration:文本框的装饰,属性也很多,可以指定前置图标,边框类型、后置组件等多种属性,因此可以通过 decoration 获得想要的文本框样式。
- focusnode:聚焦点,可以通过这个来控制文本框是否获取焦点,从而实现类似上一个下一个的输入控制。
- onchanged:输入值改变事件回调,通常用这个方法实现双向绑定。
在这个案例中,我们使用了一个前置图标用来表示输入内容的类型,比如使用手机图标代表输入手机号,使用锁代表代表密码。同时使用了一个 offstage作为后置的组件,用于在输入内容后可以点击清除内容。offstage 组件是通过一个属性offstage来控制组件是否显示,这样我们可以在没有内容的时候隐藏它,有输入内容的时候再显示。
为了提高代码复用性,使用了一个方法获取通用的文本框,这里主要是使用了 container包裹以控制边距和文本框下的分隔线:
widget _getinputtextfield( textinputtype keyboardtype, { focusnode focusnode, controller: texteditingcontroller, onchanged: function, inputdecoration decoration, bool obscuretext = false, height = 50.0, }) { return container( height: height, margin: edgeinsets.all(10.0), child: column( children: [ textfield( keyboardtype: keyboardtype, focusnode: focusnode, obscuretext: obscuretext, controller: controller, decoration: decoration, onchanged: onchanged, ), divider( height: 1.0, color: colors.grey[400], ), ], ), ); }
完整代码
class _loginpagestate extends state<loginpage> { //texteditingcontroller可以使用 text 属性指定初始值 texteditingcontroller _usernamecontroller = texteditingcontroller(); texteditingcontroller _passwordcontroller = texteditingcontroller(); string _username = '', _password = ''; @override widget build(buildcontext context) { return scaffold( appbar: appbar( title: text('登录'), brightness: brightness.dark, ), body: center( child: column( crossaxisalignment: crossaxisalignment.center, mainaxisalignment: mainaxisalignment.center, children: <widget>[ _getroundimage('images/logo.png', 100.0), sizedbox( height: 60, ), _getusernameinput(), _getpasswordinput(), sizedbox( height: 10, ), _getloginbutton(), ], ), ), ); } widget _getusernameinput() { return _getinputtextfield( textinputtype.number, controller: _usernamecontroller, decoration: inputdecoration( hinttext: "输入手机号", icon: icon( icons.mobile_friendly_rounded, size: 20.0, ), border: inputborder.none, //使用 gesturedetector 实现手势识别 suffixicon: gesturedetector( child: offstage( child: icon(icons.clear), offstage: _username == '', ), //点击清除文本框内容 ontap: () { this.setstate(() { _username = ''; _usernamecontroller.clear(); }); }, ), ), //使用 onchanged 完成双向绑定 onchanged: (value) { this.setstate(() { _username = value; }); }, ); } widget _getpasswordinput() { return _getinputtextfield( textinputtype.text, obscuretext: true, controller: _passwordcontroller, decoration: inputdecoration( hinttext: "输入密码", icon: icon( icons.lock_open, size: 20.0, ), suffixicon: gesturedetector( child: offstage( child: icon(icons.clear), offstage: _password == '', ), ontap: () { this.setstate(() { _password = ''; _passwordcontroller.clear(); }); }, ), border: inputborder.none, ), onchanged: (value) { this.setstate(() { _password = value; }); }, ); } //省略了上述列举的代码 }
页面跳转
在上层面的登录按钮上,我们增加了一个点击事件,点击后再跳到登录页,按钮的响应代码如下所示。这是页面跳转的最简单的方式,使用 navigator 导航器的 push方法实现页面跳转,后续会介绍如何通过路由实现页面跳转,那种方式更为优雅。
//... onpressed: () { navigator.of(context).push( materialpageroute(builder: (context) => loginpage()), ); }, //...
总结
从代码上看,功能虽然实现了,但是构建用户名和密码的代码十分相似,有没有办法进一步提高代码复用率,构建一个更为通用的表单组件呢?下篇我们将介绍如何来封装。
以上就是flutter 开发一个登录页面的详细内容,更多关于flutter 开发登录页面的资料请关注其它相关文章!
上一篇: 你吃饭的时候能不能不说这么恶心的事
下一篇: 小米Civi如何开启实时网速显示