介紹
最近學習了Flutter的一些控件使用，然后在Github上面看見了一個挺漂亮的登錄界面，于是就用Flutter自己模仿地實現了一下。原作者做得比較好看，不過只是單純實現界面。所以自己加了些東西，比如Key的使用和InheritedWidget的使用。
下面是一些總結，如果有說錯的地方，還請各位指出來，謝謝。
最終的展示界面
代碼結構
image
每個類的名字，相信大家一看就知道對應的作用類。每個類的作用，我在代碼里面都有注釋，可以去看下代碼。
主要用到的控件
- 利用Row，Column沿水平方向或者垂直方向排列子布局
- 利用Stack實現布局層疊，利用Positioned控件實現絕對定位
- 利用Container實現裝飾效果
- 利用TextFormField實現文本輸入，利用Form來管理這些TextFormField
- 利用Key來獲取widget的狀態
- 利用InheritedWidget可以把數據傳遞給子控件
- 利用PageView和PageController實現頁面滑動切換
在pubspec.yaml中添加依賴
- font_awesome_flutter，這個一個Flutter的圖標庫
- 添加一張登錄界面的頂部圖片，并聲明資源路徑。下面的這種寫法，會之間把整個文件夾下面的資源都導入應用程序，可以不用一個一個資源地進行聲明。
- random_pk。這里說一下這個庫的作用，一方面是為容器提供隨機顏色。另一方面，我覺得可以這個有顏色的容器進行調試布局，這個RandomContainer的用法是跟Container一樣的，只需包裹child就可以了。然后你可以通過容器的背景的大小，來判斷是否所繪制布局的大小是不是對的，看起來比較直觀一些，而且自己可以不用手動的去寫container+color的那種寫法。當你不需要用的時候，再把這一層RandomContainer給去掉就可以了。我自己在平時用的時候，發現確實挺有作用的，大家可以拿去試試。
random_pk: any
font_awesome_flutter: any
//省略部分代碼
assets:
- assets/
代碼實現
1.利用代碼模板生成代碼，新建一個空頁面（如果手動打出一段stateful的代碼是真的麻煩）
class LoginPage extends StatefulWidget {
@override
_LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
@override
Widget build(BuildContext context) {
return Container();
}
}
2.根據布局編寫代碼
這部分沒什么好說的，主要是要熟悉一些控件的使用，根據UI稿一步一步寫出布局就可以了。
例如，輸入賬號和密碼的TextForm的實現
/**
* 創建登錄界面的TextForm
*/
Widget buildSignInTextForm() {
return new Container(
decoration:
new BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(8))
, color: Colors.white
),
width: 300,
height: 190,
/**
* Flutter提供了一個Form widget，它可以對輸入框進行分組，
* 然后進行一些統一操作，如輸入內容校驗、輸入框重置以及輸入內容保存。
*/
child: new Form(
key: _SignInFormKey,
//開啟自動檢驗輸入內容，最好還是自己手動檢驗，不然每次修改子孩子的TextFormField的時候，其他TextFormField也會被檢驗，感覺不是很好
// autovalidate: true,
child: new Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Flexible(
child: Padding(
padding: const EdgeInsets.only(
left: 25, right: 25, top: 20, bottom: 20),
child: new TextFormField(
//關聯焦點
focusNode: emailFocusNode,
onEditingComplete: () {
if (focusScopeNode == null) {
focusScopeNode = FocusScope.of(context);
}
focusScopeNode.requestFocus(passwordFocusNode);
},
decoration: new InputDecoration(
icon: new Icon(Icons.email, color: Colors.black,),
hintText: "Email Address",
border: InputBorder.none
),
style: new TextStyle(fontSize: 16, color: Colors.black),
//驗證
validator: (value) {
if (value.isEmpty) {
return "Email can not be empty!";
}
},
onSaved: (value) {
},
),
),
),
new Container(
height: 1,
width: 250,
color: Colors.grey[400],
),
Flexible(
child: Padding(
padding: const EdgeInsets.only(
left: 25, right: 25, top: 20),
child: new TextFormField(
focusNode: passwordFocusNode,
decoration: new InputDecoration(
icon: new Icon(Icons.lock, color: Colors.black,),
hintText: "Password",
border: InputBorder.none,
suffixIcon: new IconButton(icon: new Icon(
Icons.remove_red_eye, color: Colors.black,),
onPressed: showPassWord)
),
//輸入密碼，需要用*****顯示
obscureText: !isShowPassWord,
style: new TextStyle(fontSize: 16, color: Colors.black),
validator: (value) {
if (value == null || value.isEmpty || value.length < 6) {
return "Password'length must longer than 6!";
}
},
onSaved: (value) {
},
),
),
),
],
),),
);
}
例如，PageView的實現
PageController _pageController;
PageView _pageView;
int _currentPage = 0;
@override
void initState() {
super.initState();
_pageController = new PageController();
_pageView = new PageView(
controller: _pageController,
children: <Widget>[
new SignInPage(),
new SignUpPage(),
],
onPageChanged: (index) {
setState(() {
_currentPage = index;
});
},
);
}
3. InheritedWidget的使用
例如，我想在任意一個地方的子控件，想獲得用戶的數據User，就可以利用InheritedWidget來實現。比如我們平時用的Theme.of(context)在任何地方來獲取應用的主題，或者用MediaQuery.of(context)來獲取應用的屏幕數據，其實本質上都是用了InheritedWidget來實現數據的共享。
具體的用法，后面再寫一篇文章來解釋吧（最近剛弄懂）
/**
* 利用InheritedWidget用于子節點向祖先節點獲取數據
當依賴的InheritedWidget rebuild,會觸發子控件的didChangeDependencies()接口
*/
class UserProvider extends InheritedWidget {
final Widget child;
final User user;//在子樹中共享的數據
UserProvider({this.user, this.child}) : super(child: child);
/**
* 該回調決定當數據發生變化時，是否通知子樹中依賴數據的Widget
*/
@override
bool updateShouldNotify(InheritedWidget oldWidget) {
return true;
}
}
/**
* 需要一個StatefulWidget作為外層的組件，
將我們的繼承于InheritateWidget的組件build出去
*/
class UserContainer extends StatefulWidget {
//給子控件分享的數據
final User user;
final Widget child;
UserContainer({Key key, this.user, this.child}) : super(key: key);
@override
_UserContainerState createState() => _UserContainerState();
static UserProvider of(BuildContext context) {
return context.inheritFromWidgetOfExactType(UserProvider);
}
}
class _UserContainerState extends State<UserContainer> {
@override
Widget build(BuildContext context) {
return new UserProvider(user: widget.user, child: widget.child);
}
}
4.Key的使用
在Flutter中，每個Widget的構建方法都會有一個key的參數可選，如果沒有傳key，那么應用會自動幫忙生成一個key值。這個key值在整個應用程序里面是唯一的，并且一個key唯一對應一個widget，所以你可以利用key來獲取到widget的state，進而對widget進行控制。
例如，利用key來獲取Form的狀態FormState,當我點擊登錄按鈕的時候，利用key來獲取widget的狀態FormState，再利用FormState對Form的子孫FromField進行統一的操作。
//定義一個key，并關聯到對應的widget
GlobalKey<FormState> _SignInFormKey = new GlobalKey();
new Form(
key: _SignInFormKey,
child: .........)
/**利用key來獲取widget的狀態FormState
可以用過FormState對Form的子孫FromField進行統一的操作
*/
if (_SignInFormKey.currentState.validate()) {
//如果輸入都檢驗通過，則進行登錄操作
Scaffold.of(context).showSnackBar(
new SnackBar(content: new Text("執行登錄操作")));
//調用所有自孩子的save回調，保存表單內容
_SignInFormKey.currentState.save();
}
遇到的問題
1.一些布局方面的坑 利用SafeArea可以讓內容顯示在安全的可見區域。 利用SingleChildScrollView可以避免彈出鍵盤的時候，出現overFlow的現象。
image
2.理解context，state，key，widget的一些概念和之間的關系，這篇文章我覺得寫得很不錯： https://user-gold-cdn.xitu.io/2018/12/8/1678bb83bcdb5f6d
下一步計劃
繼續整理自己學習Flutter中的收獲和遇到的一些問題
Demo地址（代碼我都加了挺多注釋的地方）
https://github.com/LXD312569496/flutter-learing/tree/master/login_demo
歡迎大家關注我的公眾號，會推送關于Flutter和Android學習的一些文章
image
