文章介紹

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

效果預覽

界面控件

頭部的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的方式，我一開始也是覺得很奇怪。是先創(chuàng)建padding，然后把控件在放到padding的child里面去的。
new Image.asset()這個是從本地加載圖片的寫法，這里要注意的是除了要在根目錄下創(chuàng)建一個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變量，通過這個可以做獲取輸入框文本，清空輸入框文本，還有一些監(jiān)聽等操作。

var usernameController = new TextEditingController(); 

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

 //是否是密碼 obscureText: true, //輸入類型(這個屬性不一定非要這樣，這里寫出來只是說有這個東西) 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 { //彈出對話框，里面寫著賬號和密碼 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屬性之外（我目前只發(fā)現(xiàn)這個，可能有遺漏哈），普通組件一般是沒有這個東西的。然后從源碼里面點進去看看Container里面margin是怎么實現(xiàn)的。

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

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

問題

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

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