Flutter开发实践-《玩Android》APP客户端重构

项目概述

使用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开发实践