作為系列文章的第二篇，本篇將為你著重展示：如何搭建一個通用的Flutter App 常用功能腳手架，快速開發一個完整的 Flutter 應用。
友情提示：本文所有代碼均在 GSYGithubAppFlutter ，文中示例代碼均可在其中找到，看完本篇相信你應該可以輕松完成如下效果。相關基礎還請看篇章一。
文章匯總地址：
前言
本篇內容結構如下圖，主要分為： 基礎控件、數據模塊、其他功能 三部分。每大塊中的小模塊，除了涉及的功能實現外，對于實現過程中筆者遇到的問題，會一并展開闡述，本系列的最終目的是： 讓你感受 Flutter 的愉悅！ 那么就讓我們愉悅的往下開始吧！
一、基礎控件
所謂的基礎，大概就是砍柴功了吧！
1、Tabbar控件實現
Tabbar 頁面是常有需求，而在Flutter中： Scaffold + AppBar + Tabbar + TabbarView 是 Tabbar 頁面的最簡單實現，但在加上 AutomaticKeepAliveClientMixin 用于頁面 keepAlive 之后，早期諸如#11895的問題便開始成為Crash的元兇，直到 flutter v0.5.7 sdk 版本修復后，問題依舊沒有完全解決，所以無奈最終修改了實現方案。（1.9.1 stable 中已經修復）
目前筆者是通過 Scaffold + Appbar + Tabbar + PageView 來組合實現效果，從而解決上述問題。下面我們直接代碼走起，首先作為一個Tabbar Widget，它肯定是一個 StatefulWidget ，所以我們先實現它的 State ：
class _GSYTabBarState extends State<GSYTabBarWidget> with SingleTickerProviderStateMixin {
///···省略非關鍵代碼
@override
void initState() {
super.initState();
///初始化時創建控制器
///通過 with SingleTickerProviderStateMixin 實現動畫效果。
_tabController = new TabController(vsync: this, length: _tabItems.length);
}
@override
void dispose() {
///頁面銷毀時，銷毀控制器
_tabController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
///底部TAbBar模式
return new Scaffold(
///設置側邊滑出 drawer，不需要可以不設置
drawer: _drawer,
///設置懸浮按鍵，不需要可以不設置
floatingActionButton: _floatingActionButton,
///標題欄
appBar: new AppBar(
backgroundColor: _backgroundColor,
title: _title,
),
///頁面主體，PageView，用于承載Tab對應的頁面
body: new PageView(
///必須有的控制器，與tabBar的控制器同步
controller: _pageController,
///每一個 tab 對應的頁面主體，是一個List<Widget>
children: _tabViews,
onPageChanged: (index) {
///頁面觸摸作用滑動回調，用于同步tab選中狀態
_tabController.animateTo(index);
},
),
///底部導航欄，也就是tab欄
bottomNavigationBar: new Material(
color: _backgroundColor,
///tabBar控件
child: new TabBar(
///必須有的控制器，與pageView的控制器同步
controller: _tabController,
///每一個tab item，是一個List<Widget>
tabs: _tabItems,
///tab底部選中條顏色
indicatorColor: _indicatorColor,
),
));
}
}
如上代碼所示，這是一個 底部 TabBar 的頁面的效果。TabBar 和 PageView 之間通過 _pageController 和 _tabController 實現 Tab 和頁面的同步，通過 SingleTickerProviderStateMixin 實現 Tab 的動畫切換效果 (ps 如果有需要多個嵌套動畫效果，你可能需要TickerProviderStateMixin)，從代碼中我們可以看到：
手動左右滑動
PageView時，通過onPageChanged回調調用_tabController.animateTo(index);同步TabBar狀態。_tabItems 中，監聽每個 TabBarItem 的點擊，通過
_pageController實現PageView的狀態同步。
而上面代碼還缺少了 TabBarItem 的點擊，因為這塊被放到了外部實現。當然你也可以直接在內部封裝好控件，直接傳遞配置數據顯示，這個可以根據個人需要封裝。
外部調用代碼如下：每個 Tabbar 點擊時，通過pageController.jumpTo 跳轉頁面，每個頁面需要跳轉坐標為：當前屏幕大小乘以索引 index 。
class _TabBarBottomPageWidgetState extends State<TabBarBottomPageWidget> {
final PageController pageController = new PageController();
final List<String> tab = ["動態", "趨勢", "我的"];
///渲染底部Tab
_renderTab() {
List<Widget> list = new List();
for (int i = 0; i < tab.length; i++) {
list.add(new FlatButton(onPressed: () {
///每個 Tabbar 點擊時，通過jumpTo 跳轉頁面
///每個頁面需要跳轉坐標為：當前屏幕大小 * 索引index。
topPageControl.jumpTo(MediaQuery
.of(context)
.size
.width * i);
}, child: new Text(
tab[I],
maxLines: 1,
)));
}
return list;
}
///渲染Tab 對應頁面
_renderPage() {
return [
new TabBarPageFirst(),
new TabBarPageSecond(),
new TabBarPageThree(),
];
}
@override
Widget build(BuildContext context) {
///帶 Scaffold 的Tabbar頁面
return new GSYTabBarWidget(
type: GSYTabBarWidget.BOTTOM_TAB,
///渲染tab
tabItems: _renderTab(),
///渲染頁面
tabViews: _renderPage(),
topPageControl: pageController,
backgroundColor: Colors.black45,
indicatorColor: Colors.white,
title: new Text("GSYGithubFlutter"));
}
}
如果到此結束，你會發現頁面點擊切換時，StatefulWidget 的子頁面每次都會重新調用initState。這肯定不是我們想要的，所以這時你就需要AutomaticKeepAliveClientMixin 。
每個 Tab 對應的 StatefulWidget 的 State ，需要通過with AutomaticKeepAliveClientMixin ，然后重寫 @override bool get wantKeepAlive => true; ，就可以實不重新構建的效果了，效果如下圖。
既然底部Tab頁面都實現了，干脆頂部tab頁面也一起完成。如下代碼，和底部Tab頁的區別在于：
- 底部tab是放在了
Scaffold的bottomNavigationBar中。 - 頂部tab是放在
AppBar的bottom中，也就是標題欄之下。
同時我們在頂部 TabBar 增加 isScrollable: true 屬性，實現常見的頂部Tab的效果，如下方圖片所示。
return new Scaffold(
///設置側邊滑出 drawer，不需要可以不設置
drawer: _drawer,
///設置懸浮按鍵，不需要可以不設置
floatingActionButton: _floatingActionButton,
///標題欄
appBar: new AppBar(
backgroundColor: _backgroundColor,
title: _title,
///tabBar控件
bottom: new TabBar(
///頂部時，tabBar為可以滑動的模式
isScrollable: true,
///必須有的控制器，與pageView的控制器同步
controller: _tabController,
///每一個tab item，是一個List<Widget>
tabs: _tabItems,
///tab底部選中條顏色
indicatorColor: _indicatorColor,
),
),
///頁面主體，PageView，用于承載Tab對應的頁面
body: new PageView(
///必須有的控制器，與tabBar的控制器同步
controller: _pageController,
///每一個 tab 對應的頁面主體，是一個List<Widget>
children: _tabViews,
///頁面觸摸作用滑動回調，用于同步tab選中狀態
onPageChanged: (index) {
_tabController.animateTo(index);
},
),
);
在 TabBar 頁面中，一般還會出現：父頁面需要控制 PageView 中子頁的需求，這時候就需要用到GlobalKey了，比如 GlobalKey<PageOneState> stateOne = new GlobalKey<PageOneState>(); ，通過 globalKey.currentState 對象，你就可以調用到 PageOneState 中的公開方法，這里需要注意 GlobalKey 實例需要全局唯一。
2、上下刷新列表
毫無爭議，必備控件。
Flutter 中 為我們提供了 RefreshIndicator 作為內置下拉刷新控件；同時我們通過給 ListView 添加 ScrollController 做滑動監聽，在最后增加一個 Item， 作為上滑加載更多的 Loading 顯示。
如下代碼所示，通過 RefreshIndicator 控件可以簡單完成下拉刷新工作，這里需要注意一點是：可以利用 GlobalKey<RefreshIndicatorState> 對外提供 RefreshIndicator 的 RefreshIndicatorState，這樣外部就 可以通過 GlobalKey 調用 globalKey.currentState.show();，主動顯示刷新狀態并觸發 onRefresh 。
上拉加載更多在代碼中是通過 _getListCount() 方法，在原本的數據基礎上，增加實際需要渲染的 item 數量給 ListView 實現的，最后通過 ScrollController 監聽到底部，觸發 onLoadMore。
如下代碼所示，通過 _getListCount() 方法，還可以配置空頁面，頭部等常用效果。其實就是在內部通過改變實際item數量與渲染Item，以實現更多配置效果。
class _GSYPullLoadWidgetState extends State<GSYPullLoadWidget> {
///···
final ScrollController _scrollController = new ScrollController();
@override
void initState() {
///增加滑動監聽
_scrollController.addListener(() {
///判斷當前滑動位置是不是到達底部，觸發加載更多回調
if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent) {
if (this.onLoadMore != null && this.control.needLoadMore) {
this.onLoadMore();
}
}
});
super.initState();
}
///根據配置狀態返回實際列表數量
///實際上這里可以根據你的需要做更多的處理
///比如多個頭部，是否需要空頁面，是否需要顯示加載更多。
_getListCount() {
///是否需要頭部
if (control.needHeader) {
///如果需要頭部，用Item 0 的 Widget 作為ListView的頭部
///列表數量大于0時，因為頭部和底部加載更多選項，需要對列表數據總數+2
return (control.dataList.length > 0) ? control.dataList.length + 2 : control.dataList.length + 1;
} else {
///如果不需要頭部，在沒有數據時，固定返回數量1用于空頁面呈現
if (control.dataList.length == 0) {
return 1;
}
///如果有數據,因為部加載更多選項，需要對列表數據總數+1
return (control.dataList.length > 0) ? control.dataList.length + 1 : control.dataList.length;
}
}
///根據配置狀態返回實際列表渲染Item
_getItem(int index) {
if (!control.needHeader && index == control.dataList.length && control.dataList.length != 0) {
///如果不需要頭部，并且數據不為0，當index等于數據長度時，渲染加載更多Item（因為index是從0開始）
return _buildProgressIndicator();
} else if (control.needHeader && index == _getListCount() - 1 && control.dataList.length != 0) {
///如果需要頭部，并且數據不為0，當index等于實際渲染長度 - 1時，渲染加載更多Item（因為index是從0開始）
return _buildProgressIndicator();
} else if (!control.needHeader && control.dataList.length == 0) {
///如果不需要頭部，并且數據為0，渲染空頁面
return _buildEmpty();
} else {
///回調外部正常渲染Item，如果這里有需要，可以直接返回相對位置的index
return itemBuilder(context, index);
}
}
@override
Widget build(BuildContext context) {
return new RefreshIndicator(
///GlobalKey，用戶外部獲取RefreshIndicator的State，做顯示刷新
key: refreshKey,
///下拉刷新觸發，返回的是一個Future
onRefresh: onRefresh,
child: new ListView.builder(
///保持ListView任何情況都能滾動，解決在RefreshIndicator的兼容問題。
physics: const AlwaysScrollableScrollPhysics(),
///根據狀態返回子孔健
itemBuilder: (context, index) {
return _getItem(index);
},
///根據狀態返回數量
itemCount: _getListCount(),
///滑動監聽
controller: _scrollController,
),
);
}
///空頁面
Widget _buildEmpty() {
///···
}
///上拉加載更多
Widget _buildProgressIndicator() {
///···
}
}
3、Loading框
在上一小節中，我們實現上滑加載更多的效果，其中就需要展示 Loading 狀態的需求。默認系統提供了CircularProgressIndicator等，但是有追求的我們怎么可能局限于此，這里推薦一個第三方 Loading 庫 ：flutter_spinkit ，通過簡單的配置就可以使用豐富的 Loading 樣式。
繼續上一小節中的 _buildProgressIndicator方法實現，通過 flutter_spinkit 可以快速實現更不一樣的 Loading 樣式。
///上拉加載更多
Widget _buildProgressIndicator() {
///是否需要顯示上拉加載更多的loading
Widget bottomWidget = (control.needLoadMore)
? new Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
///loading框
new SpinKitRotatingCircle(color: Color(0xFF24292E)),
new Container(
width: 5.0,
),
///加載中文本
new Text(
"加載中···",
style: TextStyle(
color: Color(0xFF121917),
fontSize: 14.0,
fontWeight: FontWeight.bold,
),
)
])
/// 不需要加載
: new Container();
return new Padding(
padding: const EdgeInsets.all(20.0),
child: new Center(
child: bottomWidget,
),
);
}
4、矢量圖標庫
矢量圖標對筆者是必不可少的，比起一般的 png 圖片文件，矢量圖標在開發過程中：可以輕松定義顏色，并且任意調整大小不模糊。矢量圖標庫是引入 ttf 字體庫文件實現，在 Flutter 中通過 Icon 控件，加載對應的 IconData 顯示即可。
Flutter 中默認內置的 Icons 類就提供了豐富的圖標，直接通過 Icons 對象即可使用，同時個人推薦阿里爸爸的 iconfont 。如下代碼，通過在 pubspec.yaml 中添加字體庫支持，然后在代碼中創建 IconData 指向字體庫名稱引用即可。
fonts:
- family: wxcIconFont
fonts:
- asset: static/font/iconfont.ttf
··················
///使用Icons
new Tab(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[new Icon(Icons.list, size: 16.0), new Text("趨勢")],
),
),
///使用iconfont
new Tab(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[new Icon(IconData(0xe6d0, fontFamily: "wxcIconFont"), size: 16.0), new Text("我的")],
),
)
5、路由跳轉
Flutter 中的頁面跳轉是通過 Navigator 實現的，路由跳轉又分為：帶參數跳轉和不帶參數跳轉。不帶參數跳轉比較簡單，默認可以通過 MaterialApp 的路由表跳轉；而帶參數的跳轉，參數通過跳轉頁面的構造方法傳遞。常用的跳轉有如下幾種使用：
新版本開始可以給
pushNamed設置arguments參數，然后在新頁面通過ModalRoute.of(context).settings.arguments獲取。
///不帶參數的路由表跳轉
Navigator.pushNamed(context, routeName);
///跳轉新頁面并且替換，比如登錄頁跳轉主頁
Navigator.pushReplacementNamed(context, routeName);
///跳轉到新的路由，并且關閉給定路由的之前的所有頁面
Navigator.pushNamedAndRemoveUntil(context, '/calendar', ModalRoute.withName('/'));
///帶參數的路由跳轉，并且監聽返回
Navigator.push(context, new MaterialPageRoute(builder: (context) => new NotifyPage())).then((res) {
///獲取返回處理
});
同時我們可以看到，Navigator 的 push 返回的是一個 Future，這個Future 的作用是在頁面返回時被調用的。也就是你可以通過 Navigator 的 pop 時返回參數，之后在 Future 中可以的監聽中處理頁面的返回結果。
@optionalTypeArgs
static Future<T> push<T extends Object>(BuildContext context, Route<T> route) {
return Navigator.of(context).push(route);
}
二、數據模塊
數據為王，不過應該不是隔壁老王吧。
1、網絡請求
當前 Flutter 網絡請求封裝中，國內最受歡迎的就是 Dio 了，Dio 封裝了網絡請求中的數據轉換、攔截器、請求返回等。如下代碼所示，通過對 Dio 的簡單封裝即可快速網絡請求，真的很簡單，更多的可以查 Dio 的官方文檔，這里就不展開了。
///創建網絡請求對象，主要最好吧 dio 實例全局單里
Dio dio = new Dio();
Response response;
try {
///發起請求
///url地址，請求數據，一般為Map或者FormData
///options 額外配置，可以配置超時，頭部，請求類型，數據響應類型，host等
response = await dio.request(url, data: params, options: option);
} on DioError catch (e) {
///http錯誤是通過 DioError 的catch返回的一個對象
}
2、Json序列化
在 Flutter 中，json 序列化是有些特殊的，不同與 JS ，比如使用上述 Dio 網絡請求返回，如果配置了返回數據格式為 json ，實際上的到會是一個Map。而 Map 的 key-value 使用，在開發過程中并不是很方便，所以你需要對Map 再進行一次轉化，轉為實際的 Model 實體。
所以 json_serializable 插件誕生了， 中文網Json 對其已有一段教程，這里主要補充說明下具體的使用邏輯。
dependencies:
# Your other regular dependencies here
json_annotation: ^0.2.2
dev_dependencies:
# Your other dev_dependencies here
build_runner: ^0.7.6
json_serializable: ^0.3.2
如下發代碼所示：
創建你的實體 Model 之后，繼承 Object 、然后通過
@JsonSerializable()標記類名。通過
with _$TemplateSerializerMixin，將fromJson方法委托到Template.g.dart的實現中。 其中*.g.dart、_$* SerializerMixin、_$*FromJson這三個的引入， 和 Model 所在的 dart 的文件名與 Model 類名有關，具體可見代碼注釋和后面圖片。最后通過
flutter packages pub run build_runner build編譯自動生成轉化對象。（個人習慣完成后手動編譯）
import 'package:json_annotation/json_annotation.dart';
///關聯文件、允許Template訪問 Template.g.dart 中的私有方法
///Template.g.dart 是通過命令生成的文件。名稱為 xx.g.dart，其中 xx 為當前 dart 文件名稱
///Template.g.dart中創建了抽象類_$TemplateSerializerMixin，實現了_$TemplateFromJson方法
part 'Template.g.dart';
///標志class需要實現json序列化功能
@JsonSerializable()
///'xx.g.dart'文件中，默認會根據當前類名如 AA 生成 _$AASerializerMixin
///所以當前類名為Template，生成的抽象類為 _$TemplateSerializerMixin
class Template extends Object with _$TemplateSerializerMixin {
String name;
int id;
///通過JsonKey重新定義參數名
@JsonKey(name: "push_id")
int pushId;
Template(this.name, this.id, this.pushId);
///'xx.g.dart'文件中，默認會根據當前類名如 AA 生成 _$AAeFromJson方法
///所以當前類名為Template，生成的抽象類為 _$TemplateFromJson
factory Template.fromJson(Map<String, dynamic> json) => _$TemplateFromJson(json);
}
上述操作生成后的 Template.g.dart 下的代碼如下，這樣我們就可以通過 Template.fromJson 和toJson 方法對實體與map進行轉化，再結合json.decode 和 json.encode，你就可以愉悅的在string 、map、實體間相互轉化了。
part of 'Template.dart';
Template _$TemplateFromJson(Map<String, dynamic> json) => new Template(
json['name'] as String, json['id'] as int, json['push_id'] as int);
abstract class _$TemplateSerializerMixin {
String get name;
int get id;
int get pushId;
Map<String, dynamic> toJson() =>
<String, dynamic>{'name': name, 'id': id, 'push_id': pushId};
}
注意：新版json序列化中做了部分修改，代碼更簡單了，詳見demo 。
3、Redux
相信在前端領域、Redux 并不是一個陌生的概念，作為全局狀態管理機，用于 Flutter 中再合適不過。如果你沒聽說過，Don't worry，簡單來說就是：它可以跨控件管理、同步State 。所以 flutter_redux 等著你征服它。
大家都知道在 Flutter 中 ，是通過實現 State 與 setState 來渲染和改變 StatefulWidget 的，如果使用了flutter_redux 會有怎樣的效果？
比如把用戶信息存儲在 redux 的 store 中， 好處在于: 比如某個頁面修改了當前用戶信息，所有綁定的該 State 的控件將由 Redux 自動同步修改，State 可以跨頁面共享。
更多 Redux 的詳細就不再展開，后續會有詳細介紹，接下來我們講講 flutter_redux 的使用，在 redux 中主要引入了 action、reducer、store 概念。
- action 用于定義一個數據變化的請求。
- reducer 用于根據 action 產生新狀態
- store 用于存儲和管理 state，監聽 action，將 action 自動分配給 reducer 并根據 reducer 的執行結果更新 state。
? 所以如下代碼，我們先創建一個 State 用于存儲需要保存的對象，其中關鍵代碼在于 UserReducer。
///全局Redux store 的對象，保存State數據
class GSYState {
///用戶信息
User userInfo;
///構造方法
GSYState({this.userInfo});
}
///通過 Reducer 創建 用于store 的 Reducer
GSYState appReducer(GSYState state, action) {
return GSYState(
///通過 UserReducer 將 GSYState 內的 userInfo 和 action 關聯在一起
userInfo: UserReducer(state.userInfo, action),
);
}
下面是上方使用的 UserReducer 的實現，這里主要通過 TypedReducer 將 reducer 的處理邏輯與定義的 Action 綁定，最后通過 combineReducers 返回 Reducer<State> 對象應用于上方 Store 中。
/// redux 的 combineReducers, 通過 TypedReducer 將 UpdateUserAction 與 reducers 關聯起來
final UserReducer = combineReducers<User>([
TypedReducer<User, UpdateUserAction>(_updateLoaded),
]);
/// 如果有 UpdateUserAction 發起一個請求時
/// 就會調用到 _updateLoaded
/// _updateLoaded 這里接受一個新的userInfo，并返回
User _updateLoaded(User user, action) {
user = action.userInfo;
return user;
}
///定一個 UpdateUserAction ，用于發起 userInfo 的的改變
///類名隨你喜歡定義，只要通過上面TypedReducer綁定就好
class UpdateUserAction {
final User userInfo;
UpdateUserAction(this.userInfo);
}
下面正式在 Flutter 中引入 store，通過 StoreProvider 將創建 的 store 引用到 Flutter 中。
void main() {
runApp(new FlutterReduxApp());
}
class FlutterReduxApp extends StatelessWidget {
/// 創建Store，引用 GSYState 中的 appReducer 創建的 Reducer
/// initialState 初始化 State
final store = new Store<GSYState>(appReducer, initialState: new GSYState(userInfo: User.empty()));
FlutterReduxApp({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
/// 通過 StoreProvider 應用 store
return new StoreProvider(
store: store,
child: new MaterialApp(
home: DemoUseStorePage(),
),
);
}
}
在下方 DemoUseStorePage 中，通過 StoreConnector 將State 綁定到 Widget；通過 StoreProvider.of 可以獲取 state 對象；通過 dispatch 一個 Action 可以更新State。
class DemoUseStorePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
///通過 StoreConnector 關聯 GSYState 中的 User
return new StoreConnector<GSYState, User>(
///通過 converter 將 GSYState 中的 userInfo返回
converter: (store) => store.state.userInfo,
///在 userInfo 中返回實際渲染的控件
builder: (context, userInfo) {
return new Text(
userInfo.name,
style: Theme.of(context).textTheme.display1,
);
},
);
}
}
·····
///通過 StoreProvider.of(context) （帶有 StoreProvider 下的 context）
/// 可以任意的位置訪問到 state 中的數據
StoreProvider.of(context).state.userInfo;
·····
///通過 dispatch UpdateUserAction，可以更新State
StoreProvider.of(context).dispatch(new UpdateUserAction(newUserInfo));
看到這是不是有點想靜靜了？先不管靜靜是誰，但是Redux的實用性是應該比靜靜更吸引人，作為一個有追求的程序猿，多動手擼擼還有什么拿不下的山頭是不？更詳細的實現請看：GSYGithubAppFlutter 。
4、數據庫
在 GSYGithubAppFlutter 中，數據庫使用的是 sqflite 的封裝，其實就是 sqlite 語法的使用而已，有興趣的可以看看完整代碼 DemoDb.dart 。 這里主要提供一種思路，按照 sqflite 文檔提供的方法，重新做了一小些修改，通過定義 Provider 操作數據庫：
在 Provider 中定義表名與數據庫字段常量，用于創建表與字段操作；
提供數據庫與數據實體之間的映射，比如數據庫對象與User對象之間的轉化；
在調用 Provider 時才先判斷表是否創建，然后再返回數據庫對象進行用戶查詢。
如果結合網絡請求，通過閉包實現，在需要數據庫時先返回數據庫，然后通過 next 方法將網絡請求的方法返回，最后外部可以通過調用next方法再執行網絡請求。如下所示：
UserDao.getUserInfo(userName, needDb: true).then((res) {
///數據庫結果
if (res != null && res.result) {
setState(() {
userInfo = res.data;
});
}
return res.next;
}).then((res) {
///網絡結果
if (res != null && res.result) {
setState(() {
userInfo = res.data;
});
}
});
三、其他功能
其他功能，只是因為想不到標題。
1、返回按鍵監聽
Flutter 中 ，通過WillPopScope 嵌套，可以用于監聽處理 Android 返回鍵的邏輯。其實 WillPopScope 并不是監聽返回按鍵，如名字一般，是當前頁面將要被pop時觸發的回調。
通過onWillPop回調返回的Future，判斷是否響應 pop 。下方代碼實現按下返回鍵時，彈出提示框，按下確定退出App。
class HomePage extends StatelessWidget {
/// 單擊提示退出
Future<bool> _dialogExitApp(BuildContext context) {
return showDialog(
context: context,
builder: (context) => new AlertDialog(
content: new Text("是否退出"),
actions: <Widget>[
new FlatButton(onPressed: () => Navigator.of(context).pop(false), child: new Text("取消")),
new FlatButton(
onPressed: () {
Navigator.of(context).pop(true);
},
child: new Text("確定"))
],
));
}
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () {
///如果返回 return new Future.value(false); popped 就不會被處理
///如果返回 return new Future.value(true); popped 就會觸發
///這里可以通過 showDialog 彈出確定框，在返回時通過 Navigator.of(context).pop(true);決定是否退出
return _dialogExitApp(context);
},
child: new Container(),
);
}
}
2、前后臺監聽
WidgetsBindingObserver 包含了各種控件的生命周期通知，其中的 didChangeAppLifecycleState 就可以用于做前后臺狀態監聽。
/// WidgetsBindingObserver 包含了各種控件的生命周期通知
class _HomePageState extends State<HomePage> with WidgetsBindingObserver {
///重寫 WidgetsBindingObserver 中的 didChangeAppLifecycleState
@override
void didChangeAppLifecycleState(AppLifecycleState state) {
///通過state判斷App前后臺切換
if (state == AppLifecycleState.resumed) {
}
}
@override
Widget build(BuildContext context) {
return new Container();
}
}
3、鍵盤焦點處理
一般觸摸收起鍵盤也是常見需求，如下代碼所示， GestureDetector + FocusScope 可以滿足這一需求。
class _LoginPageState extends State<LoginPage> {
@override
Widget build(BuildContext context) {
///定義觸摸層
return new GestureDetector(
///透明也響應處理
behavior: HitTestBehavior.translucent,
onTap: () {
///觸摸手氣鍵盤
FocusScope.of(context).requestFocus(new FocusNode());
},
child: new Container(
),
);
}
}
4、啟動頁
IOS啟動頁，在ios/Runner/Assets.xcassets/LaunchImage.imageset/下， 有 Contents.json 文件和啟動圖片，將你的啟動頁放置在這個目錄下，并且修改 Contents.json 即可，具體尺寸自行谷歌即可。
Android啟動頁，在 android/app/src/main/res/drawable/launch_background.xml 中已經有寫好的啟動頁，<item><bitmap> 部分被屏蔽，只需要打開這個屏蔽，并且將你啟動圖修改為launch_image并放置到各個 mipmap 文件夾即可，記得各個文件夾下提供相對于大小尺寸的文件。
自此，第二篇終于結束了！(//////)
資源推薦
- Github ： https://github.com/CarGuo/
- 開源 Flutter 完整項目：https://github.com/CarGuo/GSYGithubAppFlutter
- 開源 Flutter 多案例學習型項目: https://github.com/CarGuo/GSYFlutterDemo
- 開源 Fluttre 實戰電子書項目：https://github.com/CarGuo/GSYFlutterBook
完整開源項目推薦：
