Flutter实现一个简单的登录界面

文章介绍

这篇文章主要是实现了一个简单的登录界面，效果可以看gif，主要是了解一些常用控件以及布局的样式，还有界面跳转，数据传递。跳转后的界面就是之前的Flutter实现常用底部栏

效果预览

界面控件

头部的appBar

这个没什么好介绍的，一个很简单的

appBar: new AppBar(
        title: new Text('Login'),
        iconTheme: new IconThemeData(color: Colors.red),
        //文字title居中
        centerTitle: true,
      )

body里面的整体容器布局

很明显是一个垂直的线性布局，在Flutter里面横向和纵向的布局分别应该用row和column。

child: new Column(
      //MainAxisSize在主轴方向占有空间的值，默认是max。还有一个min
      mainAxisSize: MainAxisSize.max,
      //MainAxisAlignment：主轴方向上的对齐方式，会对child的位置起作用，默认是start。
      mainAxisAlignment: MainAxisAlignment.start,
      //[]里面填入子元素，也就是控件
      children: []
)

一个垂直布局就出来啦，mainAxisSize和mainAxisAlignment这两个属性一两句话也说不清楚，不懂的话直接百度吧。接下来图上的图片，输入框，登录按钮就放到这个 children: []里面就可以了。

图片

 //上面的logo图
Padding(
    padding: new EdgeInsets.fromLTRB(10.0, 30.0, 10.0, 10.0),
    child: Container(
      //本地图片
      child: new Image.asset(
        'images/timg.jpg',
        scale: 1.0,
      ),
      width: 300.0,
      height: 200.0,
      //                color: Colors.lightBlue,
    )),

这里设置padding的方式，我一开始也是觉得很奇怪。是先创建padding，然后把控件在放到padding的child里面去的。
new Image.asset()这个是从本地加载图片的写法，这里要注意的是除了要在根目录下创建一个images文件夹把timg.jpg放到里面之外，还要在pubspec.yaml的flutter下面加入 assets:- images/timg.jpg，要不然图片也是识别不出来的。

flutter:
  ...

  assets:
    - images/timg.jpg

  ...

输入框

Padding(
  padding: EdgeInsets.all(10.0),
  //用户名输入框
  child: TextField(
    //控制器
    controller: usernameController,
    maxLength: 11,
    maxLines: 1,
    //是否自动更正
    autocorrect: true,
    //是否自动对焦
    //              autofocus: true,
    decoration: new InputDecoration(
      //                hintText: "请输入用户名",
      labelText: "请输入用户名",
      helperText: "用户名",
      icon: new Icon(Icons.account_box),
    ),
    onChanged: (text) {
      //内容改变的回调
      print('change $text');
    },
    onSubmitted: (text) {
      //内容提交(按回车)的回调
      print('submit $text');
    },
  ),
),

这里的controller，是一个TextEditingController变量，通过这个可以做获取输入框文本，清空输入框文本，还有一些监听等操作。

var usernameController = new TextEditingController();

其他的属性我都在代码里面注释里面写的很清楚了，也没有啥需要特别注意的，就是熟悉控件的用法就好了。还有一些其他的属性可以按Ctrl + P去查看（开发工具：AndroidStudio）。
密码输入框类似，就多了两个属性

 //是否是密码
obscureText: true,
//输入类型(这个属性不一定非要这样，这里写出来只是说有这个东西)
keyboardType: TextInputType.number,

登录按钮

Container(
  //这里写800已经超出屏幕了，可以理解为match_parent
  width: 800.0,
  margin: new EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),
  padding: new EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),
  //类似cardview
  child: new Card(
    color: Colors.blueAccent,
    elevation: 5.0,
    //按钮
    child: new FlatButton(
        disabledColor: Colors.grey,
        disabledTextColor: Colors.black,
        onPressed: () {
          if (usernameController.text.isEmpty) {
            //第三方的插件Toast，https://pub.dartlang.org/packages/fluttertoast
            Fluttertoast.showToast(
                msg: "用户名不能为空哦",
                toastLength: Toast.LENGTH_SHORT,
                gravity: ToastGravity.BOTTOM,
                timeInSecForIos: 1,
                backgroundColor: Colors.white,
                textColor: Colors.black);
          } else if (userPwdController.text.isEmpty) {
            Fluttertoast.showToast(
                msg: "密码不能为空哦",
                toastLength: Toast.LENGTH_SHORT,
                gravity: ToastGravity.BOTTOM,
                timeInSecForIos: 1,
                backgroundColor: Colors.white,
                textColor: Colors.black);
          } else {
            //弹出对话框，里面写着账号和密码
            showDialog(
                context: context,
                builder: (_) {
                  return AlertDialog(
                    title: Text("对话框"),
                    content: Text(usernameController.text +
                        "\n" +
                        userPwdController.text),
                    actions: [
                      //对话框里面的两个按钮
                      FlatButton(
                          onPressed: () {
                            Navigator.of(context).pop();
                          },
                          child: Text("取消")),
                      FlatButton(
                          //点击确定跳转到下一个界面，也就是HomePage
                          onPressed: () {
                            Navigator.push(
                                context,
                                MaterialPageRoute(
                                    builder: (context) =>
                                        new HomePage()));
                          },
                          child: Text("确定")),
                    ],
                  );
                });
          }
        },
        child: new Padding(
          padding: new EdgeInsets.all(10.0),
          child: new Text(
            '登录',
            style: new TextStyle(
                color: Colors.white, fontSize: 16.0),
          ),
        )),
  ),
)

这里为了样式更好看一些，用了Container包裹Card再包裹按钮FlatButton。
Container官方给出的解释是一个结合了绘制（painting）、定位（positioning）以及尺寸（sizing）widget的widget，可以设置宽高，margin，padding等值的。
我感觉比较困惑的地方是，如果我想给任意一个控件设置padding，可以使用上面那种Padding(...)的方式。Padding()也是算做一个控件的，类似的还有Align和Center。
但是我想给任意一个控件设置margin呢，除了Container带有margin属性之外（我目前只发现这个，可能有遗漏哈），普通组件一般是没有这个东西的。然后从源码里面点进去看看Container里面margin是怎么实现的。

if (margin != null)
      current = Padding(padding: margin, child: current);

在container.dart里面可以找到这么一段代码，明显看到margin也是由Padding(...)来实现的，所以可以理解成，Flutter有意去弱化margin的概念，用Padding去取代它。

问题

界面比较简单，都是一些常规的问题。
有个比较严重的没解决的问题是，软键盘弹起会挡住输入框，目前找到的办法太麻烦了，所以没解决。
还有个就是软键盘弹起的时候会提示BOTTOM OVERFLOWED BY xxx PIXELS。我这里采用的是SingleChildScrollView在最外层包裹一层的解决办法，也许有更好的解决办法。
最后要提到的一点是我在写的时候没有刻意的去区分加new还是不加new，所以就这么任性的写了。请忽略这一点小瑕疵，加和不加都是可以的哈。