Meng's pages

Android developer and maybe other intersting things.

0%

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

Posted on Edited on In Views: Disqus:

为了弄懂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反映状态.

1
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的管理.

InheritedWidget

InheritedWidget的主要作用是在Widget树中有效地传递信息.

如果没有InheritedWidget, 我们想把一个数据从widget树的上层传到某一个child widget, 要利用途中的每一个构造函数, 一路传递下来.

Flutter中常用的Theme, Style, MediaQuery等就是inherited widget, 所以在程序里的各种地方都可以访问到它们.

InheritedWidget也会用在其他状态管理模式中, 作为传递数据的方法.

InheritedWidget状态管理实现

当用InheritedWidget做状态管理时, 基本思想就是把状态提上去.
当子widgets之间需要共享状态, 那么就把状态保存在它们共有的parent中.

首先定义一个InheritedWidget的子类, 包含状态数据.
覆写两个方法:

  • 提供一个静态方法给child用于获取自己. (命名惯例of(BuildContext)).
  • 判断是否发生了数据更新.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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不论在哪一层都可以方便地获取到状态数据.

1
2
3
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. 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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.

1
2
3
4
5
6
ScopedModelDescendant<CounterModel>(
    builder: (context, child, model) {
  return Text(
    model.counter.toString(),
  );
}),

数据改变后, 只有ScopedModelDescendant会收到通知, 从而rebuild.

ScopedModelDescendant有一个rebuildOnChange属性, 这个值默认是true.
对于button来说, 它只是控制改变, 自身并不需要重绘, 可以把这个属性置为false.

1
2
3
4
5
6
7
8
9
10
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
class CounterModel extends ChangeNotifier {
  int value = 0;

  void increment() {
    value++;
    notifyListeners();
  }

  void decrement() {
    value--;
    notifyListeners();
  }
}
  • 数据提供者: ChangeNotifierProvider.
1
2
3
4
void main() => runApp(ChangeNotifierProvider(
      create: (context) => CounterModel(),
      child: MyApp(),
    ));
  • 数据消费者/操纵者, 有两种方式: Consumer包裹, 用Provider.of.
1
2
3
4
5
Consumer<CounterModel>(
  builder: (context, counter, child) => Text(
    '${counter.value}',
  ),
),

FAB:

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

这里listen置为false表明状态变化时并不需要rebuild FAB widget.

Provider性能相关的实现细节

  • Consumer包裹的范围要尽量小.
  • listen变量.
  • child的处理. Consumer中builder方法的第三个参数.

可以用于缓存一些并不需要重建的widget:

1
2
3
4
5
6
7
8
9
10
11
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类:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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:

1
2
3
4
5
6
7
8
9
StreamBuilder(
  stream: _bloc.counter,
  initialData: 0,
  builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
    return Text(
      '${snapshot.data}',
    );
  },
)

而改变状态是发送事件:

1
2
3
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模块的实现可以这样写:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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的类型并传入, 再写一个逻辑转化的方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
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).

1
2
3
4
5
6
7
8
BlocBuilder(
  bloc: BlocProvider.of<CounterBloc>(context),
  builder: (BuildContext context, CounterState state) {
    return Text(
      '${state.counter}',
    );
  },
),

这里bloc参数如果没有指定, 会自动向上寻找.

BlocBuilder有一个参数condition, 是一个返回bool的函数, 用来精细控制是否需要rebuild.

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

代码分支: bloc-library.

rxdart

这是个原始版本的流式处理.

和BLoC相比, 没有专门的逻辑模块, 只是改变了数据的形式.

利用rxdart, 把数据做成流:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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, 包围的范围尽量小.

1
2
3
4
5
6
7
8
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:

1
2
3
4
5
6
7
8
9
10
11
12
enum Actions {
  Increment,
  Decrement,
}

class CounterState {
  int _counter;

  int get counter => _counter;

  CounterState(this._counter);
}

reducer方法根据action和当前state产生新的state:

1
2
3
4
5
6
7
8
9
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.
    放在上层:
1
2
3
4
5
6
7
8
9
10
 StoreProvider(
  store: store,
  child: MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    home: MyHomePage(title: 'Flutter Demo Home Page'),
  ),
);
  • 数据消费者: StoreConnector, 可读可写.

读状态:

1
2
3
4
5
6
7
8
StoreConnector<CounterState, String>(
  converter: (store) => store.state.counter.toString(),
  builder: (context, count) {
    return Text(
      '$count',
    );
  },
)

改变状态: 发送action:

1
2
3
4
5
6
7
8
9
10
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

这个库的实现需要先生成一些代码.
先写类:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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了.

找一个合适的地方初始化数据对象并保存:

1
final counter = Counter();

读取值的地方用Observer包裹:

1
2
3
4
5
6
Observer(
  builder: (_) => Text(
    '${counter.value}',
    style: Theme.of(context).textTheme.display1,
  ),
),

改变值的地方:

1
2
3
4
5
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方法里:

1
final counter = useState(0);

调用useState方法设定一个变量, 并设定初始值, 每次值改变的时候widget会被rebuild.

使用值:

1
2
3
Text(
  '${counter.value}',
),

改变值:

1
2
3
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的设计思想的, 要遵从利用它, 而不是与之反抗.
爱它如是, 而不是如我所愿.

印证了一些道理:

  • 不要只喜欢自己熟悉的东西.
  • 了解之后才有发言权.

参考

Google I/O

InheritedWidget

Scoped Model

provider

Bloc

Redux

MobX

Welcome to my other publishing channels