项目概述
使用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开发实践
