文章介绍
这篇文章主要是实现了一个简单的登录界面，效果可以看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: <Widget>[]里面就可以了。
图片
//上面的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，所以就这么任性的写了。请忽略这一点小瑕疵，加和不加都是可以的哈。
网友评论