iT邦幫忙

2021 iThome 鐵人賽

DAY 27
0
Modern Web

30天學網頁設計系列 第 27

Day27 Flutter—BLoC介紹

BLoC

BLoC全稱為 Business Logic Component,表示為業務邏輯組件。是獨立處理業務邏輯,網絡數據請求等等邏輯的一個模塊,通過流的Sinks,Streams發布監聽業務處理後的數據結果,其只關心業務處理,而Widget著重看中業務處理後的結果顯示。可見Bloc使得業務邏輯和UI相分離。其優點有以下三點:

  • 當業務邏輯內部改動時,盡可能的減少UI程序的改動。
  • 當改動UI時不會對業務邏輯產生影響
  • 方便測試業務邏輯功能

BlocBuilder

BlocBuilder是一個Flutter widget,它需要一個Bloc和一個builder函數。BlocBuilder處理構建小部件以響應新狀態。BlocBuilder非常像StreamBuilder,但有一個更簡單的API,以減少所需的樣板代碼量。builder函數可能會被多次調用,並且應該是一個純函數,它返回一個小部件以響應狀態。如果響應狀態變化實現想法,例如導航,顯示對話框等,就需要BlocListener。在沒有bloc參數時,BlocBuilder將使用BlocProvider和當前BuildContext來自動查找bloc。

BlocBuilder<BlocA, BlocAState>( 
builder: (context, state) {

如果想當構造器函數被調用時實現精細粒度的控制,可以提供一個可選的condition和BlocBuilder。condition使用前一個bloc狀態和當前bloc狀態,並返回一個布爾值。如果condition返回true,builder將攜帶currentState被調用,從而重建小部件。如condition返回false,builder不會被調用,也不會發生重建。

BlocBuilder<BlocA, BlocAState>( 
condition: (previousState, currentState) { 
builder: (context, state) { 

BlocProvider

BlocProvider是一個Flutter widget,通過BlocProvider.of為子級提供一個bloc。它用作依賴注入(DI)小部件,以便單個bloc實例可以在子樹中被提供給多個部件。在大多數情況下,BlocProvider應該用於構建新的blocs,其在子樹的其餘部分可用。在這種情況下,由於BlocProvider負責創建bloc,它將自動處理銷毀bloc。

BlocProvider( 
builder: (BuildContext context) => BlocA(), 
child: ChildA(), 
);

MultiBlocProvider

MultiBlocProvider是一個Flutter小部件,可將多個BlocProvider小部件合併為一個小部件。 MultiBlocProvider提高了可讀性並消除了嵌套多個BlocProviders的要求。通過使用MultiBlocProvider可以從:

BlocProvider<BlocA>( 
builder: (BuildContext context) => BlocA(), 
child: BlocProvider<BlocB>( 
builder: (BuildContext context) => BlocB(), 
child: BlocProvider<BlocC>( 
builder: (BuildContext context) => BlocC(), 
child: ChildA(), 
) 
) 
)

變為:

MultiBlocProvider( 
providers: [ 
BlocProvider<BlocA>( 
builder: (BuildContext context) => BlocA(), 
), 
BlocProvider<BlocB>( 
builder: (BuildContext context) => BlocB(), 
), 
BlocProvider<BlocC>( 
builder: (BuildContext context) => BlocC(), 
), 
], child: ChildA(), 
)

BlocListener

BlocListener是一個Flutter小部件,接受一個BlocWidgetListener和一個可選的Bloc並在bloc流出的狀態發生變化時調用listener。它應該用於那些每次狀態變化都需要響應一次的場景,例如導航、顯示一個SnackBar、顯示一個Dialog等,不像BlocBuilder中的builder,listener只在每次狀態變化時被調用一次,並且它是一個void函數。如果不提供bloc參數,BlocListener將使用BlocProvider和當前BuildContext自動查找。


上一篇
Day26 如何使用bootstrap
下一篇
Day28 Flutter—BLoC介紹(二)
系列文
30天學網頁設計30

尚未有邦友留言

立即登入留言