写点什么

Flutter 入门与实战(九),android 软件开发前景

用户头像
Android架构
关注
发布于: 刚刚

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 = '';


@overrideWidget 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) {t


《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开:qq.cn.hn/FTe 免费领取
复制代码


his.setState(() {_password = value;});},);}


//省略了上述列举的代码


}

页面跳转

在上层面的登录按钮上,我们增加了一个点击事件,点击后再跳到登录页,按钮的响应代码如下所示。这是页面跳转的最简单的方式,使用 Navigator 导航器的 push 方法实现页面跳转,后续会介绍如何通过路由实现页面跳转,那种方式更为优雅。//...onPressed: () {Navigator.of(context).push(MaterialPageRoute(builder: (context) => LoginPage()),);},//...

总结

从代码上看,功能虽然实现了,但是构建用户名和密码的代码十分相似,有没有办法进一步提高代码复用率,构建一个更为通用的表单组件呢?下篇我们将介绍如何来封装。

用户头像

Android架构

关注

还未添加个人签名 2021.10.31 加入

还未添加个人简介

评论

发布
暂无评论
Flutter 入门与实战(九),android软件开发前景