為了弄懂Flutter的狀態管理, 我用10種方法改造了counter app. ...
為了弄懂Flutter的狀態管理, 我用10種方法改造了counter app
本文通過改造flutter的counter app, 展示不同的狀態管理方法的用法.
可以直接去demo地址看代碼:
https://github.com/mengdd/counter_state_management
切換分支對應不同的實現方式.
Contents
- Flutter中的狀態管理
- 狀態分類
- 狀態管理方法概述
- Counter sample預設實現: StatefulWidget
- InheritedWidget
- Scoped Model
- Provider
- BLoC
- BLoC手動實現
- BLoC + InheritedWidget做傳遞
- BLoC rxdart實現
- BLoC用庫實現
- rxdart
- Redux
- MobX
- Flutter Hooks
- Demo說明及感想
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 state
- updating on change
- mutating state -> X
首先, 不支持跨頁面(route)的狀態, 因為widget樹變了, 所以需要進行跨頁面的數據傳遞.
其次, InheritedWidget
它包含的數據是不可變的, 如果想讓它跟蹤變化的數據:
- 把它包在一個
StatefulWidget
里. - 在
InheritedWidget
中使用ValueNotifier
,ChangeNotifier
或steams.
這個方案也是瞭解一下, 實際的全局狀態管理還是用更成熟的方案.
但是它的原理會被用到其他方案中作為對象傳遞的方式.
Scoped Model
scoped model是一個外部package: https://pub.dev/packages/scoped_model
Scoped 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 state
- notify other widgets
- minimal 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.
核心概念:
- Observables
- Actions
- Reactions
MobX狀態管理實現
官網提供了一個counter的指導: https://mobx.netlify.com/getting-started
這個庫的實現需要先生成一些代碼.
先寫類:
import '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官方文檔 options
- Flutter Architecture Samples
- Flutter State Management - The Grand Tour
Google I/O
- Build reactive mobile apps with Flutter (Google I/O'18)
- Pragmatic State Management in Flutter (Google I/O'19)
InheritedWidget
Scoped Model
provider
Bloc
- Build reactive mobile apps in Flutter — companion article
- filiph/state_experiments
- Flutter BLoC Pattern
- Getting Started with the BLoC Pattern
- Effective BLoC pattern