为了弄懂Flutter的状态管理, 我用10种方法改造了counter app

Posted 2022-02-25 一叶飘舟

本文通过改造flutter的counter app, 展示不同的状态管理方法的用法.

可以直接去demo地址看代码: https://github.com/mengdd/counter_state_management 切换分支对应不同的实现方式.

长文预警: 本文比较长, 可能不太适合手机阅读, 建议电脑打开. 底部阅读原文有掘金链接.

Contents

•Flutter中的状态管理•Counter sample默认实现: StatefulWidget•InheritedWidget•Scoped Model•Provider•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[1] 目前官方比较推荐的是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[2]的主要作用是在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[3].

核心概念:

•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都比较简单, 可能实际上并不需要用上一些复杂的状态管理方法, 有种杀鸡用牛刀的感觉. 只是为了保持简单来突出状态管理的实现, 说明用法.