文章介紹
這篇文章主要是實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的登錄界面，效果可以看gif，主要是了解一些常用控件以及布局的樣式，還有界面跳轉(zhuǎn)，數(shù)據(jù)傳遞。跳轉(zhuǎn)后的界面就是之前的Flutter實(shí)現(xiàn)常用底部欄
界面控件
頭部的appBar
這個(gè)沒什么好介紹的，一個(gè)很簡(jiǎn)單的
appBar: new AppBar(
title: new Text('Login'),
iconTheme: new IconThemeData(color: Colors.red),
//文字title居中
centerTitle: true,
)
body里面的整體容器布局
很明顯是一個(gè)垂直的線性布局，在Flutter里面橫向和縱向的布局分別應(yīng)該用row和column。
child: new Column(
//MainAxisSize在主軸方向占有空間的值，默認(rèn)是max。還有一個(gè)min
mainAxisSize: MainAxisSize.max,
//MainAxisAlignment：主軸方向上的對(duì)齊方式，會(huì)對(duì)child的位置起作用，默認(rèn)是start。
mainAxisAlignment: MainAxisAlignment.start,
//[]里面填入子元素，也就是控件
children: <Widget>[]
)
一個(gè)垂直布局就出來啦，mainAxisSize和mainAxisAlignment這兩個(gè)屬性一兩句話也說不清楚，不懂的話直接百度吧。接下來圖上的圖片，輸入框，登錄按鈕就放到這個(gè) 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,
)),
這里設(shè)置padding的方式，我一開始也是覺得很奇怪。是先創(chuàng)建padding，然后把控件在放到padding的child里面去的。
new Image.asset()這個(gè)是從本地加載圖片的寫法，這里要注意的是除了要在根目錄下創(chuàng)建一個(gè)images文件夾把timg.jpg放到里面之外，還要在pubspec.yaml的flutter下面加入 assets:- images/timg.jpg，要不然圖片也是識(shí)別不出來的。
flutter:
...
assets:
- images/timg.jpg
...
輸入框
Padding(
padding: EdgeInsets.all(10.0),
//用戶名輸入框
child: TextField(
//控制器
controller: usernameController,
maxLength: 11,
maxLines: 1,
//是否自動(dòng)更正
autocorrect: true,
//是否自動(dòng)對(duì)焦
// autofocus: true,
decoration: new InputDecoration(
// hintText: "請(qǐng)輸入用戶名",
labelText: "請(qǐng)輸入用戶名",
helperText: "用戶名",
icon: new Icon(Icons.account_box),
),
onChanged: (text) {
//內(nèi)容改變的回調(diào)
print('change $text');
},
onSubmitted: (text) {
//內(nèi)容提交(按回車)的回調(diào)
print('submit $text');
},
),
),
這里的controller，是一個(gè)TextEditingController變量，通過這個(gè)可以做獲取輸入框文本，清空輸入框文本，還有一些監(jiān)聽等操作。
var usernameController = new TextEditingController();
其他的屬性我都在代碼里面注釋里面寫的很清楚了，也沒有啥需要特別注意的，就是熟悉控件的用法就好了。還有一些其他的屬性可以按Ctrl + P去查看（開發(fā)工具：AndroidStudio）。
密碼輸入框類似，就多了兩個(gè)屬性
//是否是密碼
obscureText: true,
//輸入類型(這個(gè)屬性不一定非要這樣，這里寫出來只是說有這個(gè)東西)
keyboardType: TextInputType.number,
登錄按鈕
Container(
//這里寫800已經(jīng)超出屏幕了，可以理解為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 {
//彈出對(duì)話框，里面寫著賬號(hào)和密碼
showDialog(
context: context,
builder: (_) {
return AlertDialog(
title: Text("對(duì)話框"),
content: Text(usernameController.text +
"\n" +
userPwdController.text),
actions: <Widget>[
//對(duì)話框里面的兩個(gè)按鈕
FlatButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text("取消")),
FlatButton(
//點(diǎn)擊確定跳轉(zhuǎn)到下一個(gè)界面，也就是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官方給出的解釋是一個(gè)結(jié)合了繪制（painting）、定位（positioning）以及尺寸（sizing）widget的widget，可以設(shè)置寬高，margin，padding等值的。
我感覺比較困惑的地方是，如果我想給任意一個(gè)控件設(shè)置padding，可以使用上面那種Padding(...)的方式。Padding()也是算做一個(gè)控件的，類似的還有Align和Center。
但是我想給任意一個(gè)控件設(shè)置margin呢，除了Container帶有margin屬性之外（我目前只發(fā)現(xiàn)這個(gè)，可能有遺漏哈），普通組件一般是沒有這個(gè)東西的。然后從源碼里面點(diǎn)進(jìn)去看看Container里面margin是怎么實(shí)現(xiàn)的。
if (margin != null)
current = Padding(padding: margin, child: current);
在container.dart里面可以找到這么一段代碼，明顯看到margin也是由Padding(...)來實(shí)現(xiàn)的，所以可以理解成，F(xiàn)lutter有意去弱化margin的概念，用Padding去取代它。
問題
界面比較簡(jiǎn)單，都是一些常規(guī)的問題。
有個(gè)比較嚴(yán)重的沒解決的問題是，軟鍵盤彈起會(huì)擋住輸入框，目前找到的辦法太麻煩了，所以沒解決。
還有個(gè)就是軟鍵盤彈起的時(shí)候會(huì)提示BOTTOM OVERFLOWED BY xxx PIXELS。我這里采用的是SingleChildScrollView在最外層包裹一層的解決辦法，也許有更好的解決辦法。
最后要提到的一點(diǎn)是我在寫的時(shí)候沒有刻意的去區(qū)分加new還是不加new，所以就這么任性的寫了。請(qǐng)忽略這一點(diǎn)小瑕疵，加和不加都是可以的哈。
