文章介紹

這篇文章主要是實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的登錄界面，效果可以看gif，主要是了解一些常用控件以及布局的樣式，還有界面跳轉(zhuǎn)，數(shù)據(jù)傳遞。跳轉(zhuǎn)后的界面就是之前的Flutter實(shí)現(xiàn)常用底部欄

效果預(yù)覽

界面控件

頭部的appBar

這個(gè)沒(méi)什么好介紹的，一個(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è)垂直布局就出來(lái)啦，mainAxisSize和mainAxisAlignment這兩個(gè)屬性一兩句話也說(shuō)不清楚，不懂的話直接百度吧。接下來(lái)圖上的圖片，輸入框，登錄按鈕就放到這個(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的方式，我一開(kāi)始也是覺(jué)得很奇怪。是先創(chuàng)建padding，然后把控件在放到padding的child里面去的。
new Image.asset()這個(gè)是從本地加載圖片的寫(xiě)法，這里要注意的是除了要在根目錄下創(chuàng)建一個(gè)images文件夾把timg.jpg放到里面之外，還要在pubspec.yaml的flutter下面加入 assets:- images/timg.jpg，要不然圖片也是識(shí)別不出來(lái)的。

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變量，通過(guò)這個(gè)可以做獲取輸入框文本，清空輸入框文本，還有一些監(jiān)聽(tīng)等操作。

var usernameController = new TextEditingController(); 

其他的屬性我都在代碼里面注釋里面寫(xiě)的很清楚了，也沒(méi)有啥需要特別注意的，就是熟悉控件的用法就好了。還有一些其他的屬性可以按Ctrl + P去查看（開(kāi)發(fā)工具：AndroidStudio）。
密碼輸入框類似，就多了兩個(gè)屬性

 //是否是密碼 obscureText: true, //輸入類型(這個(gè)屬性不一定非要這樣，這里寫(xiě)出來(lái)只是說(shuō)有這個(gè)東西) keyboardType: TextInputType.number, 

登錄按鈕

Container( //這里寫(xiě)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ì)話框，里面寫(xiě)著賬號(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等值的。
我感覺(jué)比較困惑的地方是，如果我想給任意一個(gè)控件設(shè)置padding，可以使用上面那種Padding(...)的方式。Padding()也是算做一個(gè)控件的，類似的還有Align和Center。
但是我想給任意一個(gè)控件設(shè)置margin呢，除了Container帶有margin屬性之外（我目前只發(fā)現(xiàn)這個(gè)，可能有遺漏哈），普通組件一般是沒(méi)有這個(gè)東西的。然后從源碼里面點(diǎn)進(jìn)去看看Container里面margin是怎么實(shí)現(xiàn)的。

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

在container.dart里面可以找到這么一段代碼，明顯看到margin也是由Padding(...)來(lái)實(shí)現(xiàn)的，所以可以理解成，F(xiàn)lutter有意去弱化margin的概念，用Padding去取代它。

問(wèn)題

界面比較簡(jiǎn)單，都是一些常規(guī)的問(wèn)題。
有個(gè)比較嚴(yán)重的沒(méi)解決的問(wèn)題是，軟鍵盤(pán)彈起會(huì)擋住輸入框，目前找到的辦法太麻煩了，所以沒(méi)解決。
還有個(gè)就是軟鍵盤(pán)彈起的時(shí)候會(huì)提示BOTTOM OVERFLOWED BY xxx PIXELS。我這里采用的是SingleChildScrollView在最外層包裹一層的解決辦法，也許有更好的解決辦法。
最后要提到的一點(diǎn)是我在寫(xiě)的時(shí)候沒(méi)有刻意的去區(qū)分加new還是不加new，所以就這么任性的寫(xiě)了。請(qǐng)忽略這一點(diǎn)小瑕疵，加和不加都是可以的哈。

本頁(yè)內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過(guò)網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁(yè)中由涉嫌抄襲的內(nèi)容，請(qǐng)及時(shí)與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會(huì)在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://jstctz.cn/17567.html