文章結構：
- bloc+rxdart的幾大優點
- 示例程式碼簡單實現呼叫網路介面，然後重新整理頁面顯示
- bloc+rxdart實現原理
- bloc+rxdart經典使用場景，解決了業務場景中的兩個問題。
1.bloc+rxdart的幾大優點
1).實現MVC模式
widget只做UI展示，bloc實現控制邏輯，model做資料封裝。 我在運營線的新需求開發中實際使用了bloc做了一個新的頁面，就是商機敗北頁面。 這個頁面有三級的敗北原因選擇，敗北原因是級聯的，還有每次選擇裝置後要重新請求庫存，提交敗北等操作。
2).實現跨層級model訪問和方法呼叫
在同一個頁面中跨widget資料獲取資料和操作比較多，例如提交敗北的時候，需要獲取多個子widget中的數值，如果沒有使用bloc的話，就需要在子widget的構造方法中傳遞model或回撥方法。
如果頁面層級較多，這種model和回撥方法就需要逐級傳遞。 例如在下圖左邊，需要把submiModel或回撥方法從最上層一直傳遞到最底部，才能做到收集所有的子widget中的資訊，最終集合所有的widget中的引數到submitModel中，提交敗北請求。
下面右邊的程式碼就是這樣逐層傳遞引數的方法，如果層級很多的話會非常頭疼，不僅要重複的宣告變數，而且如果修改的話要每個地方都改。
而使用了bloc的話，建構函式就特別乾淨，不需要逐層傳遞model或者回撥方法。
下面的兩塊程式碼都是頁面widget結構中最下層的兩個widget，不需要在構造方法中傳遞任何引數或回撥方法，但是同樣能呼叫拿到model和呼叫回撥方法。怎麼實現的繼續往下看。：）
3).不直接使用setState方法（StreamController）
之前在專案中直接使用setState會產生一些問題，例如當前State是unmounted狀態，這時直接呼叫setState會拋異常。
而使用bloc的話重新整理頁面是使用如下方式。關鍵的程式碼是_requestController.add
4). 更加簡潔的區域性重新整理（StreamBuilder）
我們現有專案中有一些非常複雜的頁面，但是隻使用了一個檔案，所有的業務邏輯和widget元件都在這個頁面裡面。
下面是一段這種混雜網路請求、widget顯示的程式碼示例。
這樣相比於多個子widget的方式就不用逐層傳遞資料和回撥方法。但是破壞了物件導向開發的基本原則：資訊隱藏，比如修改某個widget的一個小功能，因為在一個很大的檔案中修改，其中業務邏輯錯綜複雜，改一個小功能可能就會影響其他邏輯，產生意料不到的後果，這一塊的程式碼就變得非常難以維護。
同時直接呼叫setState重新整理整個頁面的效能也有問題，也會產生拋異常的問題。
而使用bloc的方式會更加自由，可以像第二點中的圖中一樣使用多個子widget，在子widget中進行重新整理。
也可以直接改造上圖的程式碼，在一個widget中實現區域性重新整理。
第四個優點其實和第三個是一併實現的，都是通過streamBuidler和streamController，這兩者是配套使用的。其實bloc就是streamBuilder+streamController+ancestorWidgetOfExactType，和web端的ajax比較類似，幾項現有技術整合出了新的東西。
StreamBuilder要傳入一個stream物件才能實現重新整理，而這個stream要從streamController中獲取的。
當在上面的程式碼中呼叫_requestController.add(deviceModel)後，下面的StreamBuilder就會自動呼叫builder方法，實現區域性重新整理StreamBuilder，而不是重新整理外層的InkWell。
StreamBuilder是一個Widget，可以在任意地方插入，實現區域性重新整理非常簡單。
2.簡單示例程式碼
要實現一個BlocProvider，現有專案中已經整合，整個專案只需要一個BlocProvider，可以放在Utils目錄中。
實現Bloc其實就只用這一個類和flutter自帶的方法就行了，程式碼非常簡單，並不需要在yaml檔案中引入第三方庫。
所有的bloc都需要繼承BlocBase,通常一個bloc對應一個會重新整理頁面的業務邏輯（如網路請求、切換tab）。
下面是bloc建立和blocProvider的程式碼。
3.bloc+rxdart實現原理
1).bloc實現原理
bloc觸發重新整理的方式就是使用StreamBuilder+StreamController，但是直接使用StreamController有一個很大的缺點就是隻能進行一對一的listen，且模式非常單一。所以需要使用到rxdart，下面會講到。
bloc另一重要特性就是跨層級獲取bloc，在bloc可以獲取到model或者呼叫方法。
其中使用了ancestorWidgetOfExactType，因為flutter widget是樹狀結構的，結構層次儲存在BuildContext中，可以從子節點依次往父節點找符合型別的widget，所以所有使用了BlocProvider包裹的widget都可以通過of方法找到，再返回widget中的bloc。（bloc最終是儲存在外一層的state中）。
final type = _typeOf<BlocProvider<T>>();
BlocProvider<T> provider = context.ancestorWidgetOfExactType(type);
複製程式碼在下圖中，最下層的widget呼叫of方法後，可以直接獲取到頂層頁面的submitBloc，因為flutter widget是樹狀結構的，結構層次儲存在BuildContext中，可以從子節點依次往父節點找符合型別的widget，所以所有使用了BlocProvider包裹的widget都可以通過of方法找到，再返回widget中的bloc。（bloc最終是儲存在外一層的state中）。
2).rxdart實現原理
StreamController實現了觀察者模式，監聽者不是直接被呼叫，而是處於觀察狀態，當event加入streamController後，監聽者獲得非同步回撥。
var obs = Observable(Stream.fromIterable([1,2,3,4,5]))
.map((item)=>++item);
obs.listen(print);
輸出:2 3 4 5 6
複製程式碼Subject是對StreamController的擴充套件，常用的有以下幾種。
PublishSubject：StreamController廣播版，streamController只能有一個listener，PublishSubject可以多次listen。下面的其他幾種Subject也都是廣播版。
BehaviorSubject: 快取最近一次的事件。如果先發生event，後listen，也能收到快取的event。
ReplaySubject: 快取所有的事件，之前加入的所有event，listen後，都會順序傳送過來。
4.經典使用場景
1).多個網路圖片元件共用一個http下載。
發現這是由於每次都建立新的bloc導致的，通過使用一個bloc list解決了這個問題。
static ZNImageBLocList _getInstance() {
if (_instance == null) {
_instance = new ZNImageBLocList._internal();
}
return _instance;
}
List<ZNImageBloc> blocList;
ZNImageBloc getBloc(String url,ZNImageConfig config){
for(ZNImageBloc bloc in blocList){
if(bloc.imageUrl==url){
return bloc;
}
}
ZNImageBloc bloc = new ZNImageBloc(url, config);
blocList.add(bloc);
return bloc;
}
複製程式碼class ZnWebImageState extends State<ZnWebImage> {
ZNImageBloc bloc;
@override
void dispose() {
// TODO: implement dispose
bloc.dispose();
super.dispose();
}
@override
void initState() {
// TODO: implement initState
super.initState();
bloc = ZNImageBLocList.instance.getBloc(widget.url, widget.config);
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return BlocProvider<ZNImageBloc>(
bloc: bloc,
child: ZNImageContainer(),
);
}
}
複製程式碼這樣多個zn_web_image的widget就能共用同一個bloc，在下載過程中同步顯示進度條，下載完成後同時收到通知顯示下載好的圖片。
2).tabBarView中多個頁面共用一個是否通過認證屬性。
bloc在徵信專案中也解決了一個很頭疼的問題，就是否通過認證的狀態，這個狀態全域性共用，且有多個變更入口，認證狀態變更後要求所有頁面更新顯示。
1.第一個tab中的首頁頂部。
2.確認訂單頁面，可以從第一個tab首頁進入，也可以從第二個tab的訂單列表進入。
3.第四個tab的個人中心頁面。
最開始沒有使用bloc的時候，寫了多個網路請求獲取認證狀態，isAuth屬性也在每個頁面分別儲存。
1.首頁通過requestAuth從伺服器端獲取isAuth屬性。
2.確認訂單頁面也需要從requestAuth獲取isAuth屬性。雖然首頁通過請求獲取到了isAuth屬性，從首頁進入確認訂單頁面可以傳遞isAuth屬性。但是從訂單列表進入時沒有這個屬性，訂單列表是和首頁同時初始化的，還是需要網路請求。
3.個人中心頁面也需要從requestAuth獲取isAuth屬性。雖然首頁通過請求獲取到了isAuth屬性，但是個人中心頁面是和首頁同時在tabbarView中初始化的，不能通過構造方法傳遞isAuth屬性。
這樣非常的麻煩，而且工作量大很多。
使用bloc之後，isAuth這樣全域性共用的屬性，只需要在MaterialApp外面加一層BlocProvider就行了，任何一個子頁面都能直接獲取isAuth，並且能同步isAuth的狀態更新，重新整理UI顯示。
//個人認證bloc
CreditAuthBloc authBloc;
@override
void dispose() {
authBloc.dispose();
super.dispose();
}
@override
void initState() {
super.initState();
authBloc = CreditAuthBloc();
}
@override
Widget build(BuildContext context) {
return BlocProvider<CreditAuthBloc>(bloc: authBloc,child: MaterialApp(
title: '',
initialRoute:'/',
home: Scaffold(
body: Column(
children: <Widget>[
Expanded(
child: TabBarView(physics: NeverScrollableScrollPhysics(),controller: tabController, children: [
ZNMarketPage(),//首頁
ZNOrderList(),//訂單列表
ZNBill(),
ZNMyCenter(),//個人中心
]),
),
],
)),
),);
}
複製程式碼子頁面獲取bloc
//使用bloc中的auth
// int userAuthStatus = 0; //個人認證 0: 未認證, 1: 已認證
CreditAuthBloc authBloc;
@override
void didChangeDependencies() {
// TODO: implement didChangeDependencies
super.didChangeDependencies();
authBloc = BlocProvider.of<CreditAuthBloc>(context);
}
複製程式碼通過streamBuilder使用bloc