上一部分构造了主页面，这一部分主要完成主页面三个tab的数据获取，下一步的点击事件目前都未处理。

先看下效果：

使用的库

这部分接入了几个三方库，分别是：

• 网络库：Dio，这部分封装了一个单例出来，负责网络请求
• 首页轮播图：BannerView
• json序列化：json-serializable，这部分需要注意如何生成辅助代码，可以参考后面的example
• 首页下拉刷新、上拉加载：pull_to_refresh

state管理

对于首页tab，使用了pull_to_refresh控件；对于知识体系和公众号tab，都使用了自身的管理，定义了三种状态，LOAD、SHOW以及ERROR，根据不同state加载不同内容。
大体结构如下代码：

@override
  Widget build(BuildContext context) {
    return Container(
      child: _createBody(),
    );
  }

  Widget _createBody() {
    switch (_page_state) {
      case PAGE_STATE.STATE_LOAD:
        return Center(
          child: CircularProgressIndicator(),
        );
      case PAGE_STATE.STATE_ERROR:
        return Center(
          child: RaisedButton(
            onPressed: () {
              _fetchWeChat();
            },
            child: Text('出错了，请重试'),
          ),
        );

      case PAGE_STATE.STATE_SHOW:
        return _createShowBody();
    }
  }

代码

关于代码，可以参考：
github.com/wangli135/w…

参考

• json-serializable example
• pull to refresh

关注我的技术公众号，不定期会有技术文章推送，不敢说优质，但至少是我自己的学习心得。微信扫一扫下方二维码即可关注：