dio网络框架封装_Flutter fish_redux+dio+TabBarView实践

先上图

说下用到的技术：

网络请求：dio，数据状态管理：fish_redux，基本UI架构TabView，TabBarView

网络请求dio

封装比较简单，用的github的api接口，而且只用到了get请求

class NetUtil { static Future get(String url, {Map params}) async { var response = await dio.get(url, queryParameters: params); return response.data; }}

可以看看原来关于Dio的介绍的文章：

微信公众号：Flutter入门

数据状态管理fish_redux

原来有一篇关于fish_redux的入门介绍可以先看下，基础知识不做过多介绍

微信公众号：Flutter入门

基本和redux的原理一样，

1. dispatch一个Action，同时数据数据带过去；
2. 在reducer中接收到对应type的Action和数据后，可能需要处理后，返回数据，数据会到state中；
3. 在page中会绑定reducer，effect，view，state，这样在view中就会拿到数据，更新到UI中；

说说遇到的问题：

1. 网络请求时机

在effect中进行网络请求；

因为这里边有对生命周期的处理，在不同的生命周期做不同的事情。

2. 使用Widget

因为在fish_redux中创建的是Page或Component，而TabBarView中的children接收Widget[]。

fish_redux的Page提供了buildPage(null)方法，Component也有相同功能方法，这样就能拿到对应的Widget了

TabView，TabBarView使用

@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: new TabBar( controller: _topController, tabs: _topTabs, ), ), body: TabBarView( controller: _topController, children: [ RepoListPage().buildPage(null), Text('second'), ], ), ); }

使用了两层TabBr，TabBarView嵌套，使用上比较简单，但是目前来看，只能放到Scaffold中使用(但不影响外观设计)，TabBr，TabBarView使用同一个controller，分别在tabs和children中加入子Widget。

TabBr，TabBarView使用同一个controller的目的是让上下联动，或者也可以包裹在同一个DefaultTabController或其子类中。根据实际使用场景使用。

以上；

P.S. 后续关注点：

1. Flutter使用的v1.5.4-hotfixes，因为Flutter升到1.7之后，为了支持web开发，添加了Action，和fish_redux的冲突了。fish_redux官方GitHub提供了hide方法，但是我这没有成功。故降低了flutter版本，后续会继续查找问题。
2. 后续页面会继续丰富，second页面会添加相关功能，页面UI会优化(原谅一个我这个开发没有审美)。
3. 会更加关注生命周期相关，比如左右切换页面不会重新请求数据，同时添加下拉刷新。

项目地址：https://github.com/damengzai/github_flutter