項目概述
使用flutter對《玩Android》APP客戶端進行重構，採用flutter官方組件進行開發，實現了與kotlin開發的原生APP一致的功能模塊。
工程介紹
分包層級
代碼整體包結構如下圖：
其中，資源文件統一放res/images目錄下。
代碼位於lib目錄中：
- model：存放數據實體類，和數據庫存儲相關類
- network：統一放網絡請求封裝的類
- page：各路由頁面
- resource：存放Color、Dimens、Selector、字符串常量等資源值
- util：通用工具類
- widget：抽象出來的通用UI組件
- main：APP主入口
主要頁面
一、主界面
return Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(MediaQueryData.fromWindow(window).padding.top),
child: SafeArea(top: true, child: Offstage()),
),
body: IndexedStack(
index: _selectedIndex,
children: pages,
),
bottomNavigationBar: BottomNavigationBar(
showUnselectedLabels: true,
items: bottomItems,
currentIndex: _selectedIndex,
type: BottomNavigationBarType.fixed,
selectedFontSize: textTheme.caption.fontSize,
unselectedFontSize: textTheme.caption.fontSize - 2,
onTap: (index) {
setState(() {
_selectedIndex = index;
});
},
),
);
主界面使用BottomNavigationBar+IndexedStack進行佈局，從而避免每次切換tab都會導致頁面重新刷新。需要注意的是，使用這種組合進行佈局會一次將三個tab頁面全部加載，因此需要自行處理子頁面的懶加載實現。
（完整源碼見：main_page.dart）
二、首頁
首頁佈局通過RefreshIndicator嵌套CustomScrollView實現下拉刷新，通過設置ScrollController監聽滾動到底部實現上拉加載。
return RefreshIndicator(
onRefresh: _onRefresh,
child: CustomScrollView(
controller: _scrollController,
slivers: <Widget>[
SliverToBoxAdapter(child: _buildSearchBarView()),
SliverToBoxAdapter(child: _buildBannerView(_bannerList)),
_buildArticleListView(_articleList),
],
),
);
重寫initState函數，在這裏加載首頁數據，加載完成後通過setState函數更新頁面。需要注意異步返回調用setState前要先判斷this.mounted。
@override
void initState() {
super.initState();
···
_loadFreshBanners();
_loadFreshArticles();
···
}
(完整源碼見：home_page.dart)
三、體系
體系佈局由兩個TabBar和一個TabBarView組合實現。通過註冊TabController監聽tab切換，手動設置各級Tab的索引，一級TabBar聯動刷新二級TabBar，二級TabBar聯動刷新TabBarView。
（完整源碼見：category_page.dart）
源碼地址
github鏈接：Wandroid-APP-lite-flutter
kotlin版本
Android Architecture Components+MVVM+Androidx+kotlin APP開發實踐
