使用Flutter撸一个登录页面

最新推荐文章于 2024-04-17 08:52:46 发布

cyt_victory

最新推荐文章于 2024-04-17 08:52:46 发布

阅读量1.6k

点赞数 3

分类专栏： Android demo 文章标签： Flutter Android 控件

本文链接：https://blog.csdn.net/qq_34163551/article/details/89531760

版权

Android demo 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

自从谷歌发布了Flutter正式版之后，Flutter也慢慢热了起来，以前也没怎么接触Dart,刚接触Flutter的时候说实话一脸懵逼，二脸懵逼，三脸还是懵逼，差点都自杀谢罪再也不看这玩意了；；；

初次接触Flutter你可能会非常不习惯，因为Flutter从使用习惯到架构模式，再到编程逻辑什么都不一样，熟悉的XML布局没有了，熟悉的Activity也没有了，常常一脸懵逼进来，然后一脸懵逼出去，真特么想唱一首凉凉给自己；；；

但是，作为瞎长类动物，程序员的任务不就是迎难而上吗。尝试着去学习，去理解，然后尝试写写。当界面出来时，又找到了当初学Android的激情。终于等到你，还好我没放弃。。。

不多说了，先上代码吧，我比较喜欢用代码说话

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

//程序入口
void main() {
  runApp(new MaterialApp(
    home: new LoginActivity(),
  ));
}

//登录页面
class LoginActivity extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        //顶部的导航栏
        appBar: new AppBar(
          //导航栏名称
          title: new Text("登录页面"),
          //在中间显示 默认左对齐
          centerTitle: true,
          //导航栏颜色
          backgroundColor: Colors.blue,
        ),
        //body是指导航栏以下部分 除导航栏外的整个屏幕
        body: new Container(
          //距离上下左右的位置，顺序可以打乱，现设置为距离顶部50
          margin: const EdgeInsets.only(left: 0, right: 0, bottom: 0, top: 50),
          //垂直布局 类似与Android中的LinearLayout且属性为vertical
          child: new Column(
            children: <Widget>[
              new Container(
                margin: new EdgeInsets.fromLTRB(15, 0, 15, 0),
                //输入框
                child: new TextField(
                  //键盘首先选择文字输入
                  keyboardType: TextInputType.text,
                  decoration: InputDecoration(
                    contentPadding: EdgeInsets.all(10),
//                    icon:Icon(Icons.text_fields),
                    icon: new Image.asset("images/user.png"),
                    labelText: "请输入您的姓名",
                  ),
                ),
              ),
              new Container(
                margin: new EdgeInsets.fromLTRB(15, 0, 15, 0),
                child: new TextField(
                  //键盘首先选择数字输入
                  keyboardType: TextInputType.number,
                  decoration: InputDecoration(
                    contentPadding: EdgeInsets.all(10),
                    icon: new Image.asset("images/password.png"),
                    labelText: "请输入您的密码",
                  ),
                ),
              ),
              //横向布局 类似与Android中的LinearLayout且属性为horizontal
              new Row(
                children: <Widget>[
                  //盒子控件
                  new Expanded(
                      child: new Container(
                    child: new RaisedButton(
                      onPressed: () {
                        //Flutter好像没有自己的Toast，我在网上找了个框架
                        Fluttertoast.showToast(msg: "测试");
                      },
                      //padding 向内填充跟Android padding类似
                      child: new Padding(
                        padding: new EdgeInsets.fromLTRB(0, 7, 0, 7),
                        //文本控件
                        child: new Text(
                          "登录",
                          style: new TextStyle(fontSize: 18),
                        ),
                      ),
                      color: Colors.blue,
                      textColor: Colors.white,
                    ),
                    margin: EdgeInsets.all(15),
                  ))
                ],
              ),
              new Row(
                children: <Widget>[
                  new Expanded(
                    child: new Container(
                      margin: EdgeInsets.all(15),
                      child: new Text(
                        "用户注册",
                        textAlign: TextAlign.left,
                        style: new TextStyle(fontSize: 16, color: Colors.blue),
                      ),
                    ),
                    flex: 1,
                  ),
                  new Expanded(
                    child: new Container(
                      child: new Text(
                        "忘记密码",
                        textAlign: TextAlign.right,
                        style: new TextStyle(fontSize: 16, color: Colors.blue),
                      ),
                      margin: EdgeInsets.all(15),
                    ),
                    flex: 1,
                  )
                ],
              ),
            ],
          ),
        ));
  }
}

在代码中我已经有很多注释了，就不解释了，我就介绍以下用到的这些控件吧

StatelessWidget

在程序之初我们继承了StatelessWidget，说明我们当前的LoginActivity是StatelessWidget子类，也就算Flutter的控件类。而在Flutter框架中又分为有状态控件类（继承StatefulWidget抽象类）和无状态控件类继承StatelessWidget抽象类），而我们继承的就是无状态控件类。然后重写build方法，就算完成了初步工作

AppBar

appbar是顶部的导航栏控件，主要作用是对顶部的导航栏做一些布置和规划，例如代码中我对导航栏的命名（title）,位置（centertitle）,背景（backgroundColor）,返回图标（leading）等等

Text

看到Text应该不陌生，对的，这个就是文本控件，只显示文本内容，当然你也可以对文本进行操作(style)，例如更改文本字体大小（fontsize），字体颜色（color）等等，要操作的有很多

Container

这个控件是控制内部控件显示位置的，官方介绍是：A convenience widget that combines common painting, positioning, and sizing widgets.足以说明它的强大，它集合了padding ,位置，尺寸，等等

我这里就简单使用了距离控制子控件的位置显示，如果要想知道的更多，需要自己去查资料，这个是很非常常用的一个控件。

Column

垂直布局，这个类似与LinearLayout，它的子控件（children）是一个控件数组，你可以在它的子控件内部使用多个控件，以,连接。

TextField

输入框控件，作用与Android中的Edittext一样，同样可以默认文字输入/数字输入(keyboardType),还可以在输入框增加一些其他操作/装饰(decoration)，例如上下距离（contentpadding）,增加图标（Icon），增加默认提示语（labelText）等等

Row

横向布局，作用跟Column类似

Expanded

个人感觉这就是个盒子，跟Android中的group类似，把控件包围在内部，然后进行操作，具体作用还待研究

RaisedButton

突出按钮控件，唔。。。不太好用，感觉比Android的Button麻烦很多，高度和宽度没法直接设置，只能绕着圈才可以，不过功能还是很强大的

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------

好像差不多就这些东西了，学东西还是要多动手，先不要想多复杂，现做个简单的东西，有效果在一点一点往上堆，这样效果会更好。

Over