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: <Widget>[]
)

一个垂直布局就出来啦,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: <Widget>[
                      //对话框里面的两个按钮
                      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,所以就这么任性的写了。请忽略这一点小瑕疵,加和不加都是可以的哈。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值