flutter学习系列一:编写一个登录界面

写在前面

flutter貌似最近越来越火热了,为了紧跟潮流,参考学习flutter实战试着编写了一个登录界面。

学习目标

可以熟练编写基本界面,总结相关控件widget的使用技巧

登录界面的实现:

一、界面逻辑和内容

界面很简单:一个logo,一个账号输入框、一个密码输入框、一个登录按钮

flutter学习系列一:编写一个登录界面_第1张图片

拆解开页面和功能:

  • appbar(title和返回键);
  • body(账号输入框、密码输入框、登录按钮)
  • 密码输入框控制密码的显示与隐藏

二、具体实现

2.1、由于整个页面是需要变动的,所以我们使用StatefulWidget,在State的build方法中,我们开始进行页面构建

2.2、页面布局,一个column布局,内嵌三个padding分别包含icon、登录框、密码框;一个container包含着登录按钮

2.3、交互逻辑:

  1. 定义一个bool类型的_showPwd 变量,用来控制密码的hide与show
  2. 在TextField中,obscureText属性为输入内容的hide和show,当为true,则输入内容为······,否则输入内容正常显示
  3. InputDecoration的suffixIcon为输入框右侧的图标,onPressed方法中通过setState改变_showPwd变量的值,来达到控制密码框的目的

2.4、_nameCtrl = TextEditingController();通过_nameCtrl.text获取输入的内容,即可用来进行相应的登录操作

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State {
  var _nameCtrl = TextEditingController();
  var _pwdCtrl = TextEditingController();
  bool _showPwd = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("登录"),
        centerTitle: true,
      ),
      body: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.max,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            pd(
                ClipOval(
                  child: Image.asset(
                    "assets/imgs/avatar.png",
                    width: 150,
                  ),
                ),
                l: 50,
                t: 50,
                r: 50,
                b: 20),
            pdlr(
                TextField(
                  controller: _nameCtrl,
                  style: hintTips,
                  decoration: InputDecoration(
                    hintText: "phone or email",
                    labelText: "username",
                    prefixIcon: Icon(Icons.phone_android),
                  ),
                ),
                ver: 10,
                hor: 30),
            pdlr(
                TextField(
                  controller: _pwdCtrl,
                  style: hintTips,
                  decoration: InputDecoration(
                      hintText: "password",
                      labelText: "pwd",
                      prefixIcon: Icon(Icons.lock),
                      suffixIcon: IconButton(
                        icon: Icon(_showPwd ? Icons.visibility : Icons.visibility_off),
                        onPressed: () {
                          setState(() {
                            _showPwd = !_showPwd;
                          });
                        },
                      )),
                  obscureText: !_showPwd,
                ),
                ver: 10,
                hor: 30),
            Container(
              width: 300,
              margin: EdgeInsets.all(10),
              padding: EdgeInsets.all(20),
              child: Card(
                color: Theme.of(context).primaryColor,
                child: FlatButton(
                  onPressed: () {
                    onLogin();
                    debugPrint("点击了登录");
                  },
                  child: Text(
                    "登录",
                    style: TextStyle(fontSize: 18, color: Colors.white),
                  ),
                ),
                elevation: 10,
              ),
            ),
          ],
        ),
      ),
    );
  }

  void onLogin() {
    if (_nameCtrl.text != null && _pwdCtrl.text != null && _pwdCtrl.text.length >= 6) {
      debugPrint("去登录");
    } else {
//      AlertDialog(
//        content: Text("请检查你的用户名和密码"),
//      );
    }
  }
}

后记

当输入内容不符合规则时,提示内容的显示,目前还未实现。验证输入内容的合法性也未实现,待后续实现。

编外话:

对于上面的未实现提示框,百度了一下flutter toast,网上一大推方法,最简单的就是flutter自己提供了toast的依赖库,那么既然flutter官方有提供,那就使用官方的来实现呗。

一、引入库

# add this line to your dependencies
toast: ^0.1.5
import 'package:toast/toast.dart';

二、使用

Toast.show("Toast plugin app", context, duration: Toast.LENGTH_SHORT, gravity:  Toast.BOTTOM);

如此简单,因此得出总结:

遇到不会的问题,多上网搜一下,别放过了,放过就是对自己的不负责。自勉!!!

 

 

 

 

 

 

你可能感兴趣的:(flutter爬坑系列)