Flutter fish_redux+dio+TabBarView實踐

先上圖

說下用到的技術：

網絡請求：dio，數據狀態管理：fish_redux，基本UI架構TabView，TabBarView

網絡請求dio

封裝比較簡單，用的github的api接口，並且只用到了get請求

class NetUtil {
  static Future get(String url, {Map<String, dynamic> 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. 會更加關注生命週期相關，好比左右切換頁面不會從新請求數據，同時添加下拉刷新。

項目地址：github.com/damengzai/g…