本文通過改造flutter的counter app, 展示不同的狀態管理方法的用法.

可以直接去demo地址看程式碼:https://github.com/mengdd/counter_state_management切換分支對應不同的實現方式.

ContentsFlutter中的狀態管理狀態分類狀態管理方法概述Counter sample預設實現: StatefulWidgetInheritedWidgetScoped ModelProviderBLoCBLoC手動實現BLoC + InheritedWidget做傳遞BLoC rxdart實現BLoC用庫實現rxdartReduxMobXFlutter HooksDemo說明及感想Flutter State Management

Flutter是描述性的(declarative), UI反映狀態.

UI = f(state)

其中f代表了build方法.

狀態的改變會直接觸發UI的重新繪製.

UI reacts to the changes.

相對的, Android, iOS等都是命令式的(imperative), 會有setText()之類的方法來改變UI.

狀態分類

狀態分兩種:

Ephemeral state: 有時也叫UI state或local state. 這種可以包含在單個widget裡.比如: PageView的當前頁, 動畫的當前進度, BottomNavigationBar的當前選中tab.這種狀態不需要使用複雜的狀態管理手段, 只要用一個StatefulWidget就可以了.App state: 需要在很多地方共享的狀態, 也叫shared state或global state.比如: 使用者設定, 登入資訊, 通知, 購物車, 新聞app中的已讀/未讀狀態等.

這種狀態分類其實沒有一個清晰的界限.在簡單的app裡, 可以用setState()來管理所有的狀態; 在app需要的時候, tab的index也可能被抽取到外部作為一個需要儲存和管理的app state.

狀態管理方法

官方提供了一些options: Flutter官方文件 options目前官方比較推薦的是provider.

各種狀態管理方法要解決的幾個問題:

狀態儲存哪裡?狀態如何獲取?UI如何更新?如何改變狀態?Counter Sample預設實現: StatefulWidget

新建Flutter app, 是一個counter app, 自動使用了StatefulWidget來管理狀態.對這個簡單的app來說, 這是很合理的.

我們對這個app進行一個簡單的改造, 再增加一個button用來減數字.同樣的方式, 只需要新增一個方法來做減法就可以了.

這種方法的一個變體是, 用StatefulBuilder, 主要好處是少寫一些程式碼.

StatefulWidget對簡單的Widget內部狀態來說是合理的.

對於複雜的狀態, 這種方式的缺點:

狀態屬性多了以後, 可能有很多地方都在呼叫setState().不能把狀態和UI分開管理.不利於跨元件/跨頁面的狀態共享. (如何呼叫另一個Widget的setState()? 把方法通過構造傳遞過來? No, don't do this!)

千萬不要用全域性變數法來解決問題.

如果企圖用這種方式來管理跨元件的狀態, 就難免會用這些Anti patterns:

緊耦合. Strongly coupling widgets.全域性儲存的state. Globally tracking state.從外部呼叫setState方法. Calling setState from outside.

所以這種方法只適用於local state的管理.

程式碼分支1: starter-code.程式碼分支2: stateful-builder.InheritedWidget

InheritedWidget的主要作用是在Widget樹中有效地傳遞資訊.

如果沒有InheritedWidget, 我們想把一個數據從widget樹的上層傳到某一個child widget, 要利用途中的每一個建構函式, 一路傳遞下來.

Flutter中常用的Theme, Style, MediaQuery等就是inherited widget, 所以在程式裡的各種地方都可以訪問到它們.

InheritedWidget也會用在其他狀態管理模式中, 作為傳遞資料的方法.

InheritedWidget狀態管理實現

當用InheritedWidget做狀態管理時, 基本思想就是把狀態提上去.當子widgets之間需要共享狀態, 那麼就把狀態儲存在它們共有的parent中.

首先定義一個InheritedWidget的子類, 包含狀態資料.覆寫兩個方法:

提供一個靜態方法給child用於獲取自己. (命名慣例of(BuildContext)).判斷是否發生了資料更新.

class CounterStateContainer extends InheritedWidget {  final CounterModel data;  CounterStateContainer({    Key key,    @required Widget child,    @required this.data,  }) : super(key: key, child: child);  @override  bool updateShouldNotify(CounterStateContainer oldWidget) {    return data.counter.value != oldWidget.data.counter.value;  }  static CounterModel of(BuildContext context) {    return context        .dependOnInheritedWidgetOfExactType<CounterStateContainer>()        .data;  }}

之後用這個CounterStateContainer放在上層, 包含了資料和所有狀態相關的widgets.child widget不論在哪一層都可以方便地獲取到狀態資料.

  Text(    '${CounterStateContainer.of(context).counter.value}',  ),

程式碼分支: inherited-widget.

InheritedWidget缺點

InheritedWidget解決了訪問狀態和根據狀態更新的問題, 但是改變state卻不太行.

accessing stateupdating on changemutating state -> X

首先, 不支援跨頁面(route)的狀態, 因為widget樹變了, 所以需要進行跨頁面的資料傳遞.

其次, InheritedWidget它包含的資料是不可變的, 如果想讓它跟蹤變化的資料:

把它包在一個StatefulWidget裡.在InheritedWidget中使用ValueNotifier, ChangeNotifier或steams.

這個方案也是了解一下, 實際的全域性狀態管理還是用更成熟的方案.但是它的原理會被用到其他方案中作為物件傳遞的方式.

Scoped Model

scoped model是一個外部package: https://pub.dev/packages/scoped_modelScoped Model是基於InheritedWidget的. 思想仍然是把狀態提到上層去, 並且封裝了狀態改變的通知部分.

Scoped Model實現

它官方提供例子就是改造counter: https://pub.dev/packages/scoped_model#-example-tab-

新增scoped_model依賴.建立資料類, 繼承Model.

import 'package:scoped_model/scoped_model.dart';class CounterModel extends Model {  int _counter = 0;  int get counter => _counter;  void increment() {    _counter++;    notifyListeners();  }  void decrement() {    _counter--;    notifyListeners();  }}

其中資料變化的部分會通知listeners, 它們收到通知後會rebuild.

在上層初始化並提供資料類, 用ScopeModel.

訪問資料有兩種方法:

用ScopedModelDescendant包裹widget.用ScopedModel.of靜態方法.

使用的時候注意要提供泛型型別, 會幫助我們找到離得最近的上層ScopedModel.

  ScopedModelDescendant<CounterModel>(      builder: (context, child, model) {    return Text(      model.counter.toString(),    );  }),

資料改變後, 只有ScopedModelDescendant會收到通知, 從而rebuild.

ScopedModelDescendant有一個rebuildOnChange屬性, 這個值預設是true.對於button來說, 它只是控制改變, 自身並不需要重繪, 可以把這個屬性置為false.

  ScopedModelDescendant<CounterModel>(    rebuildOnChange: false,    builder: (context, child, model) {      return FloatingActionButton(        onPressed: model.increment,        tooltip: 'Increment',        child: Icon(Icons.add),      );    },  ),

scoped model這個庫幫我們解決了資料訪問和通知的問題, 但是rebuild範圍需要自己控制.

access statenotify other widgetsminimal rebuild -> X -> 因為需要開發者自己來決定哪一部分是否需要被重建, 容易被忘記.

程式碼分支: scoped-model

Provider

Provider是官方文件的例子用的方法.去年的Google I/O 2019也推薦了這個方法.和BLoC的流式思想相比, Provider是一個觀察者模式, 狀態改變時要notifyListeners().

有一個counter版本的sample: https://github.com/flutter/samples/tree/master/provider_counter

Provider的實現在內部還是利用了InheritedWidget.Provider的好處: dispose指定後會自動被呼叫, 支援MultiProvider.

Provider實現model類繼承ChangeNotifer, 也可以用with.

class CounterModel extends ChangeNotifier {  int value = 0;  void increment() {    value++;    notifyListeners();  }  void decrement() {    value--;    notifyListeners();  }}

資料提供者: ChangeNotifierProvider.

void main() => runApp(ChangeNotifierProvider(      create: (context) => CounterModel(),      child: MyApp(),    ));

資料消費者/操縱者, 有兩種方式: Consumer包裹, 用Provider.of.

  Consumer<CounterModel>(    builder: (context, counter, child) => Text(      '${counter.value}',    ),  ),

FAB:

  FloatingActionButton(    onPressed: () =>        Provider.of<CounterModel>(context, listen: false).increment(),  ),

這裡listen置為false表明狀態變化時並不需要rebuild FAB widget.

Provider效能相關的實現細節Consumer包裹的範圍要儘量小.listen變數.child的處理. Consumer中builder方法的第三個引數.

可以用於快取一些並不需要重建的widget:

return Consumer<CartModel>(  builder: (context, cart, child) => Stack(        children: [          // Use SomeExpensiveWidget here, without rebuilding every time.          child,          Text("Total price: ${cart.totalPrice}"),        ],      ),  // Build the expensive widget here.  child: SomeExpensiveWidget(),);

程式碼分支: provider.

BLoC

BLoC模式的全稱是: business logic component.

所有的互動都是a stream of asynchronous events.Widgets + Streams = Reactive.

BLoC的實現的主要思路: Events in -> BloC -> State out.

Google I/O 2018上推薦的還是這個, 2019就推薦Provider了.當然也不是說這個模式不好, 架構模式本來也沒有對錯之分, 只是技術選型不同.

BLoC手動實現

不新增任何依賴可以手動實現BLoC, 利用:

Dart SDK > dart:async > Stream.Flutter的StreamBuilder: 輸入是一個stream, 有一個builder方法, 每次stream中有新值, 就會rebuild.

可以有多個stream, UI只在自己感興趣的資訊發生變化的時候重建.

BLoC中:

輸入事件: Sink<Event> input.輸出資料: Stream<Data> output.

CounterBloc類:

class CounterBloc {  int _counter = 0;  final _counterStateController = StreamController<int>();  StreamSink<int> get _inCounter => _counterStateController.sink;  Stream<int> get counter => _counterStateController.stream;  final _counterEventController = StreamController<CounterEvent>();  Sink<CounterEvent> get counterEventSink => _counterEventController.sink;  CounterBloc() {    _counterEventController.stream.listen(_mapEventToState);  }  void _mapEventToState(CounterEvent event) {    if (event is IncrementEvent) {      _counter++;    } else if (event is DecrementEvent) {      _counter--;    }    _inCounter.add(_counter);  }  void dispose() {    _counterStateController.close();    _counterEventController.close();  }}

有兩個StreamController, 一個控制state, 一個控制event.

讀取狀態值要用StreamBuilder:

  StreamBuilder(    stream: _bloc.counter,    initialData: 0,    builder: (BuildContext context, AsyncSnapshot<int> snapshot) {      return Text(        '${snapshot.data}',      );    },  )

而改變狀態是傳送事件:

  FloatingActionButton(    onPressed: () => _bloc.counterEventSink.add(IncrementEvent()),  ),

實現細節:

每個螢幕有自己的BLoC.每個BLoC必須有自己的dispose()方法. -> BLoC必須和StatefulWidget一起使用, 利用其生命週期釋放.

程式碼分支: bloc

BLoC傳遞: 用InheritedWidget

手動實現的BLoC模式, 可以結合InheritedWidget, 寫一個Provider, 用來做BLoC的傳遞.

程式碼分支: bloc-with-provider

BLoC rxdart實現

用了rxdart package之後, bloc模組的實現可以這樣寫:

class CounterBloc {  int _counter = 0;  final _counterSubject = BehaviorSubject<int>();  Stream<int> get counter => _counterSubject.stream;  final _counterEventController = StreamController<CounterEvent>();  Sink<CounterEvent> get counterEventSink => _counterEventController.sink;  CounterBloc() {    _counterEventController.stream.listen(_mapEventToState);  }  void _mapEventToState(CounterEvent event) {    if (event is IncrementEvent) {      _counter++;    } else if (event is DecrementEvent) {      _counter--;    }    _counterSubject.add(_counter);  }  void dispose() {    _counterSubject.close();    _counterEventController.close();  }}

BehaviorSubject也是一種StreamController, 它會記住自己最新的值, 每次註冊監聽, 會立即給你最新的值.

程式碼分支: bloc-rxdart.

BLoC Library

可以用這個package來幫我們簡化程式碼: https://pub.dev/packages/flutter_bloc

自己只需要定義Event和State的型別並傳入, 再寫一個邏輯轉化的方法:

class CounterBloc extends Bloc<CounterEvent, CounterState> {  @override  CounterState get initialState => CounterState.initial();  @override  Stream<CounterState> mapEventToState(CounterEvent event) async* {    if (event is IncrementEvent) {      yield CounterState(counter: state.counter + 1);    } else if (event is DecrementEvent) {      yield CounterState(counter: state.counter - 1);    }  }}

用BlocProvider來做bloc的傳遞, 從而不用在建構函式中一傳到底.

訪問的時候用BlocBuilder或BlocProvider.of<CounterBloc>(context).

  BlocBuilder(    bloc: BlocProvider.of<CounterBloc>(context),    builder: (BuildContext context, CounterState state) {      return Text(        '${state.counter}',      );    },  ),

這裡bloc引數如果沒有指定, 會自動向上尋找.

BlocBuilder有一個引數condition, 是一個返回bool的函式, 用來精細控制是否需要rebuild.

  FloatingActionButton(    onPressed: () =>        BlocProvider.of<CounterBloc>(context).add(IncrementEvent()),  ),

程式碼分支: bloc-library.

rxdart

這是個原始版本的流式處理.

和BLoC相比, 沒有專門的邏輯模組, 只是改變了資料的形式.

利用rxdart, 把資料做成流:

class CounterModel {  BehaviorSubject _counter = BehaviorSubject.seeded(0);  get stream$ => _counter.stream;  int get current => _counter.value;  increment() {    _counter.add(current + 1);  }  decrement() {    _counter.add(current - 1);  }}

獲取資料用StreamBuilder, 包圍的範圍儘量小.

    StreamBuilder(      stream: counterModel.stream$,      builder: (BuildContext context, AsyncSnapshot snapshot) {        return Text(          '${snapshot.data}',        );      },    ),

Widget dispose的時候會自動解綁.

資料傳遞的部分還需要進一步處理.

程式碼分支: rxdart.

Redux

Redux是前端流行的, 一種單向資料流架構.

概念:

Store: 用於儲存State物件, 代表整個應用的狀態.Action: 事件操作.Reducer: 用於處理和分發事件的方法, 根據收到的Action, 用一個新的State來更新Store.View: 每次Store接到新的State, View就會重建.

Reducer是唯一的邏輯處理部分, 它的輸入是當前State和Action, 輸出是一個新的State.

Flutter Redux狀態管理實現

首先定義好action, state:

enum Actions {  Increment,  Decrement,}class CounterState {  int _counter;  int get counter => _counter;  CounterState(this._counter);}

reducer方法根據action和當前state產生新的state:

CounterState reducer(CounterState prev, dynamic action) {  if (action == Actions.Increment) {    return new CounterState(prev.counter + 1);  } else if (action == Actions.Decrement) {    return new CounterState(prev.counter - 1);  } else {    return prev;  }}

資料提供者: StoreProvider.放在上層:

   StoreProvider(    store: store,    child: MaterialApp(      title: 'Flutter Demo',      theme: ThemeData(        primarySwatch: Colors.blue,      ),      home: MyHomePage(title: 'Flutter Demo Home Page'),    ),  );

資料消費者: StoreConnector, 可讀可寫.

讀狀態:

    StoreConnector<CounterState, String>(      converter: (store) => store.state.counter.toString(),      builder: (context, count) {        return Text(          '$count',        );      },    )

改變狀態: 傳送action:

    StoreConnector<CounterState, VoidCallback>(      converter: (store) {        return () => store.dispatch(action.Actions.Increment);      },      builder: (context, callback) {        return FloatingActionButton(          onPressed: callback,        );      },    ),

程式碼分支: redux.

MobX

MobX本來是一個JavaScript的狀態管理庫, 它遷移到dart的版本: mobxjs/mobx.dart.

核心概念:

ObservablesActionsReactionsMobX狀態管理實現

官網提供了一個counter的指導: /file/2020/03/22/20200322032824_11164.jpg 'package:mobx/mobx.dart';part 'counter.g.dart';class Counter = _Counter with _$Counter;abstract class _Counter with Store { @observable int value = 0; @action void increment() { value++; } @action void decrement() { value--; }}

執行命令flutter packages pub run build_runner build, 生成counter.g.dart.

改完之後就不需要再使用StatefulWidget了.

找一個合適的地方初始化資料物件並儲存:

final counter = Counter();

讀取值的地方用Observer包裹:

Observer(  builder: (_) => Text(    '${counter.value}',    style: Theme.of(context).textTheme.display1,  ),),

改變值的地方:

  FloatingActionButton(    onPressed: counter.increment,    tooltip: 'Increment',    child: Icon(Icons.add),  ),

程式碼分支: mobx.

Flutter hooks

React hooks的Flutter實現.package: https://pub.dev/packages/flutter_hooks

Hooks存在的目的是為了增加widgets之間的程式碼共享, 取代StatefulWidget.

首頁的例子是: 對一個使用了AnimationController的StatefulWidget的簡化.

flutter_hooks包中已經內建了一些已經寫好的hooks.

Flutter hooks useState

counter demo一個最簡單的改法, 就是將StatefulWidget改為HookWidget.

在build方法裡:

final counter = useState(0);

呼叫useState方法設定一個變數, 並設定初始值, 每次值改變的時候widget會被rebuild.

使用值:

  Text(    '${counter.value}',  ),

改變值:

  FloatingActionButton(    onPressed: () => counter.value++,  ),

實際上是把StatefulWidget包裝了一下, 在初始化Hook的時候註冊了listener, 資料改變的時候呼叫setState()方法.只是把這些操作藏在hook裡, 不需要開發者手動呼叫而已.

所以本質上還是StatefulWidget, 之前解決不了的問題它依然解決不了.

程式碼分支: flutter-hooks.

Demo

本文demo地址: https://github.com/mengdd/counter_state_management每個分支對應一種實現. 切換不同分支檢視不同的狀態管理方法.

對於程式碼的說明:這是counter app用不同的狀態管理模式進行的改造.因為這個demo的邏輯和UI都比較簡單, 可能實際上並不需要用上一些複雜的狀態管理方法, 有種殺雞用牛刀的感覺.只是為了保持簡單來突出狀態管理的實現, 說明用法.

一些自己的感想

老實說, 做了這麼多年Android, 各種構架MVP, MVVM, MVI, 目的就是資料和邏輯分離, 邏輯和UI分離,所以初識Flutter的時候對這種萬物皆widget, 一個樹裡面包含一切的方式有點懷疑, UI邏輯資料寫成一堆, 程式功能複雜後, 肯定會越寫越亂.

但是了解了它的狀態管理之後, 發現Flutter的狀態管理就是它的程式構架, 並且也是百家爭鳴各取所需.只是Flutter的構架是服務於Flutter framework的設計思想的, 要遵從利用它, 而不是與之反抗.愛它如是, 而不是如我所願.

印證了一些道理:

不要只喜歡自己熟悉的東西.了解之後才有發言權.參考Flutter官方文件Flutter官方文件 optionsFlutter Architecture SamplesFlutter State Management - The Grand TourGoogle I/OBuild reactive mobile apps with Flutter (Google I/O'18)Pragmatic State Management in Flutter (Google I/O'19)InheritedWidgetInheritedWidgetFlutter實戰 7.2 資料共享（InheritedWidget）Scoped Modelscoped_model packageproviderFlutter guideFlutter samples: provider shopperFlutter實戰 7.3 跨元件狀態共享（Provider）BlocBuild reactive mobile apps in Flutter — companion articlefiliph/state_experimentsFlutter BLoC PatternGetting Started with the BLoC PatternEffective BLoC patternReduxIntroduction to Redux in Flutterflutter redux packageflutter redux githubMobXmobx github