前言

Flutter的很多靈感來自于React玻募，它的設(shè)計思想是數(shù)據(jù)與視圖分離蚓再，由數(shù)據(jù)映射渲染視圖滑肉。所以在Flutter中，它的Widget是immutable的摘仅，而它的動態(tài)部分全部放到了狀態(tài)(State)中靶庙。

在之前的文章中，我們已經(jīng)介紹了scoped model與redux兩種狀態(tài)管理方案在flutter中的應(yīng)用娃属。他們似乎都還不錯惶洲，但都還是美中不足。今天我將介紹Google提出的一種全新的解決方案——BLoC膳犹。

在正式開始介紹前恬吕，我希望您已經(jīng)閱讀并理解了stream的相關(guān)知識，后面的內(nèi)容都基于此须床。如果您還未了解過dart:stream 的話铐料，我建議您先閱讀這篇文章：Dart:什么是Stream。

BLoC

為什么需要狀態(tài)管理

我們一直在找尋強大的狀態(tài)管理方式豺旬。也許你并沒有想過钠惩，flutter自身已經(jīng)為我們提供了狀態(tài)管理，而且你經(jīng)常都在用到族阅。

沒錯篓跛，它就是 Stateful widget。當我們接觸到flutter的時候坦刀，首先需要了解的就是有些小部件是有狀態(tài)的愧沟，有些則是無狀態(tài)的。stateless widget 與 stateful widget鲤遥。

在stateful widget中沐寺，我們widget的描述信息被放進了State，而stateful widget只是持有一些immutable的數(shù)據(jù)以及創(chuàng)建它的狀態(tài)而已盖奈。它的所有成員變量都應(yīng)該是final的混坞，當狀態(tài)發(fā)生變化的時候，我們需要通知視圖重新繪制,這個過程就是setState。

這看上去很不錯究孕，我們改變狀態(tài)的時候setState一下就可以了啥酱。
在我們一開始構(gòu)建應(yīng)用的時候，也許很簡單厨诸，我們這時候可能并不需要狀態(tài)管理懈涛。

image

但是隨著功能的增加，你的應(yīng)用程序?qū)袔资畟€甚至上百個狀態(tài)泳猬。這個時候你的應(yīng)用應(yīng)該會是這樣批钠。

image

一旦當app的交互變得復(fù)雜，setState出現(xiàn)的次數(shù)便會顯著增加得封，每次setState都會重新調(diào)用build方法埋心，這勢必對于性能以及代碼的可閱讀性帶來一定的影響。

能不能不使用setState就能刷新頁面呢忙上？如何在多個頁面中共享狀態(tài)拷呆？我們希望有一種更加強大的方式，來管理我們的狀態(tài)疫粥。

BLoC是什么

BLoC是一種利用reactive programming方式構(gòu)建應(yīng)用的方法茬斧，這是一個由流構(gòu)成的完全異步的世界。

image

• 用StreamBuilder包裹有狀態(tài)的部件梗逮，streambuilder將會監(jiān)聽一個流
• 這個流來自于BLoC
• 有狀態(tài)小部件中的數(shù)據(jù)來自于監(jiān)聽的流项秉。
• 用戶交互手勢被檢測到，產(chǎn)生了事件慷彤。例如按了一下按鈕娄蔼。
• 調(diào)用bloc的功能來處理這個事件
• 在bloc中處理完畢后將會吧最新的數(shù)據(jù)add進流的sink中
• StreamBuilder監(jiān)聽到新的數(shù)據(jù)，產(chǎn)生一個新的snapshot底哗，并重新調(diào)用build方法
• Widget被重新構(gòu)建

BLoC能夠允許我們完美的分離業(yè)務(wù)邏輯岁诉！再也不用考慮什么時候需要刷新屏幕了,一切交給StreamBuilder和BLoC!和StatefulWidget說拜拜！跋选！

BLoC代表業(yè)務(wù)邏輯組件（Business Logic Component）涕癣，由來自Google的兩位工程師 Paolo Soares和Cong Hui設(shè)計，并在2018年DartConf期間（2018年1月23日至24日）首次展示前标。點擊觀看Youtube視頻坠韩。。

Lets do it候生！

這里我們以一個最簡單的CountApp舉例同眯。簡單介紹BLoC的用法。該項目完整代碼已上傳Github唯鸭。

這是一個在不同頁面使用BLoC共享狀態(tài)信息的app。這兩個頁面都依賴于一個數(shù)字硅确，這個數(shù)字會隨著我們按下按鈕的次數(shù)而增加目溉。

image

第一步：創(chuàng)建BLoC

我們這里的要求很簡單明肮，僅僅只是輸出一個數(shù)字而已，然后有一個方法能夠讓數(shù)字加一缭付。所以我們需要創(chuàng)建一條能夠通過int類型數(shù)據(jù)的流柿估。

import 'dart:async';

class CountBLoC {
 int _count;
 StreamController<int> _countController;

 CountBLoC() {
   _count = 0;
   _countController = StreamController<int>();
 }
 
 Stream<int> get value => _countController.stream;

 increment() {
   _countController.sink.add(++_count);
 }

 dispose() {
   _countController.close();
 }
}

為什么要使用私有變量“_”

一個應(yīng)用需要大量開發(fā)人員參與，你寫的代碼也許在幾個月之后被另外一個開發(fā)看到了陷猫，這時候假如你的變量沒有被保護的話秫舌，也許同樣是讓count++，他會用countController.sink.add(++_count)這種方法绣檬，而不是調(diào)用 increment方法足陨。

雖然兩種方式的效果完全一樣，但是第二種方式將會讓我們的business logic零散的混入其他代碼中娇未，提高了代碼耦合程度墨缘，非常不利于代碼的維護以及閱讀，所以為了讓BLoC完全分離我們的業(yè)務(wù)邏輯零抬，請務(wù)必使用私有變量镊讼。

第二步：創(chuàng)建BLoC實例

這里有三種方式創(chuàng)建bloc

• 全局單例創(chuàng)建
• 局部創(chuàng)建
• scoped

由于我們需要在兩個屏幕中訪問同一個bloc，所以我們只能選擇全局單例模式或者scoped模式平夜。

全局單例模式

全局單例我們只需要在bloc類的文件中創(chuàng)建一個bloc實例即可蝶棋。不過我并不推薦這種做法，因為不需要用這個bloc的時候忽妒，我們應(yīng)該釋放它嚼松。

但是為了讓我解釋的盡量簡單，后面我將會基于全局單例模式來介紹锰扶。

Scoped模式

創(chuàng)建一個bloc provider類,這里我們需要借助InheritWidget,實現(xiàn)of方法并讓updateShouldNotify返回true献酗。

class BlocProvider extends InheritedWidget {
  CountBLoC bLoC = CountBLoC();

  BlocProvider({Key key, Widget child}) : super(key: key, child: child);

  @override
  bool updateShouldNotify(_) => true;

  static CountBLoC of(BuildContext context) =>
      (context.inheritFromWidgetOfExactType(BlocProvider) as BlocProvider).bLoC;
}

小提示： 這里updateShouldNotify需要傳入一個InheritedWidget oldWidget，但是我們強制返回true坷牛，所以傳一個“_”占位罕偎。

第三步：在頁面中使用StreamBuilder

這里以第一個頁面為例，僅僅顯示文字+數(shù)字京闰。

StreamBuilder<int>(
            stream: bloc.value,
            initialData: 0,
            builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
              return Text(
                'You hit me: ${snapshot.data} times',
                style: Theme.of(context).textTheme.display1,
              );
            })

• StreamBuilder中stream參數(shù)代表了這個stream builder監(jiān)聽的流颜及，我們這里監(jiān)聽的是countBloc的value（它是一個stream）。
• initData代表初始的值蹂楣，因為當這個控件首次渲染的時候俏站，還未與用戶產(chǎn)生交互，也就不會有事件從流中流出痊土。所以需要給首次渲染一個初始值肄扎。
• builder函數(shù)接收一個位置參數(shù)BuildContext 以及一個snapshot。snapshot就是這個流輸出的數(shù)據(jù)的一個快照。我們可以通過snapshot.data訪問快照中的數(shù)據(jù)犯祠。也可以通過snapshot.hasError判斷是否有異常旭等，并通過snapshot.error獲取這個異常。
• StreamBuilder中的builder是一個AsyncWidgetBuilder衡载，它能夠異步構(gòu)建widget搔耕，當檢測到有數(shù)據(jù)從流中流出時，將會重新構(gòu)建痰娱。

在第二個頁面中調(diào)用increment

floatingActionButton: FloatingActionButton(
          onPressed: ()=> bloc.increment(),
          child: Icon(Icons.add),
      )

由于這里并不涉及widget的重構(gòu)弃榨，我們只需要調(diào)用bloc的功能即可。

處理廣播流

我們構(gòu)建好ui后梨睁，運行程序?qū)l(fā)現(xiàn)這件奇怪的事鲸睛。

image

第二個頁面的數(shù)字無法顯示，而且控制臺拋出了這個異常而姐。

flutter: Bad state: Stream has already been listened to.

這是由于流被重復(fù)監(jiān)聽導(dǎo)致的腊凶。 兩個頁面中都需要顯示這個數(shù)字，那么就使用了兩個StreamBuilder拴念。而StreamBuilder都監(jiān)聽的同一個流钧萍，所以導(dǎo)致了流被重復(fù)監(jiān)聽了。

還記得我們在Dart|什么是Stream中說的兩種流嗎政鼠。沒錯风瘦，我們創(chuàng)建StreamController的時候，默認是創(chuàng)建的單訂閱流公般。所以我們需要將流改成廣播流万搔。

    _countController = StreamController.broadcast<int>();

只需要在創(chuàng)建StreamController的時候調(diào)用broadcast方法即可。

來看看效果

image

Q&A

為什么第二次進入UnderPage的時候，計數(shù)器顯示為0刽虹，按了一下才好

這是由于我們在第一次pop UnderPage的時候酗捌，這個頁面已經(jīng)被銷毀了。當我們再push進去的時候涌哲，StreamBuilder無法收聽到最后一次事件（已經(jīng)流過去了）胖缤，只能顯示initiaData。而再次點擊時阀圾，正確的數(shù)字被add進了流哪廓，StreamController收聽到了它，所以又能顯示正確的數(shù)據(jù)了初烘。

這個問題能夠解決嗎涡真？

答案是肯定的分俯，使用rxdart！rxdart極大的增強了流的功能综膀，解決方法將會在后續(xù)rxdart篇介紹澳迫。

大型應(yīng)用中應(yīng)該如何組織BLoC

大型應(yīng)用程序需要多個BLoC局齿。一個好的模式是為每個屏幕使用一個頂級組件剧劝，并為每個復(fù)雜足夠的小部件使用一個。但是抓歼，太多的BLoC會變得很麻煩讥此。此外，如果您的應(yīng)用中有數(shù)百個可觀察量（流）谣妻，則會對性能產(chǎn)生負面影響萄喳。換句話說：不要過度設(shè)計你的應(yīng)用程序。

——Filip Hracek

一個更加復(fù)雜的app

image

了解更多

下面有一些優(yōu)秀的文章能夠給您更多參考

• [譯]Flutter響應(yīng)式編程：Streams和BLoC
• Build reactive mobile apps in Flutter?—?companion article
• Technical Debt and Streams/BLoC (The Boring Flutter Development Show, Ep. 4)
• Using the BloC Pattern to Build Reactive Applications with Streams in Dart's Flutter Framework

寫在最后

本次所用到的代碼已經(jīng)上傳Github:https://github.com/OpenFlutter/Flutter-Notebook/tree/master/mecury_project/example/bloc_demo

bloc是一個優(yōu)秀的狀態(tài)管理方式份企，它能夠幫助我們更好的構(gòu)建復(fù)雜的大型應(yīng)用。但是他還不是完美的（至少目前不是）巡莹。它在處理大量異步事件以及分離業(yè)務(wù)邏輯上表現(xiàn)很優(yōu)秀司志，但是在共享狀態(tài)上還有一些缺陷。

有人嘗試將redux與bloc結(jié)合使用降宅，試圖找到突破口骂远。這里有一個專門為它編寫的庫：rebloc。感興趣的朋友可以自行了解一下腰根。

如果你在使用bloc進行狀態(tài)管理的時候有任何好的點子激才，或者是疑問，歡迎在下方評論區(qū)以及我的郵箱1652219550a@gmail.com留言唠雕，我會在24小時內(nèi)與您聯(lián)系贸营！

下一篇文章將會為大家介紹Reactive Programming的最佳庫RxDart在BLoC上的實踐，敬請期待岩睁。