状态管理

Catalogue

1. 概述
2. setState
3. scoped_model
4. provider
1. 4.1. 获取信息
5. flutter_bloc
1. 5.1. 参考
6. flutter_redux
7. flutter_mobx
8. flutter_hooks
9. 参考

概述

什么是状态管理？

这里的状态指的是UI的状态，不同的场景下展示不同的UI，所以需要一种方式来管理UI不同的状态。flutter的很多设计都借鉴来React，而React中就有专门用来进行状态管理的方案。
比如redux、bloc等，所以到了flutter这里，就有了flutter_redux、flutter_bloc。

状态管理解决的问题：

状态保存哪里
状态如何获取
UI如何更新
如何改变状态

如何选择开源方案

上手程度
性能比较
高扩展性

flutter本身支持状态管理的方式

State
- 缺点：
  - 无法做到跨组件共享数据
  - 处理数据逻辑和视图混合在一起，违反代码设计原则
InheritedWidget：向下共享数据
- 缺点：
  - 容易造成不必要的刷新
  - 不支持跨页面(route)的状态
  - 数据是不可变的，必须结合StatefulWidget、ChangeNotifier或者Steam使用
Notification：向上共享数据
- 缺点：
  - 不支持跨页面(route)的状态，准备的说不支持NotificationListener同级或者父级Widget的状态通知
  - 本身不支持刷新UI，需要结合State使用
  - 如果结合State，会导致整个UI的重绘
Stream：Dart的异步API，flutter中有StreamBuilder的封装
ChangeNotifier：属性绑定刷新

setState

优点：

简单场景下特别适用，逻辑简单，易懂易实现
所见即所得，效率比较高

缺点:

逻辑与视图耦合严重，复杂逻辑下可维护性很差
数据传输基于依赖传递，层级较深情况下不易维护，可读性差

使用场景：

Widget内部的状态管理

scoped_model

provider

flutter提供的的状态管理方案

获取信息


///使用Provider.of
Widget build(BuildContext context) {
    return Container(child: MyText());
}

class MyText extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        final text = Provider.of<String>(context);
        return Text(text);
    }
}

///使用Consumer
Widget getWidget2(BuildContext context) {
return Consumer<BusinessPattern>(builder: (context, businessModel, child) {
  switch (businessModel.currentState) {
    case PatternState.none:
      return  Text("无模式");
      break;
    case PatternState.normal:
      return Text("正常模式");
      break;
    case PatternState.small:
      return Text("小屏模式");
      break;
    case PatternState.overview:
      return Text("全屏模式");
      break;
    default:
      return Text("其他模式");
      return SizedBox();
  }
});
}

///使用Selector
Widget getWidget4(BuildContext context) {
return Selector<BusinessPattern, PatternState>(
selector: (context, businessPattern) =>
businessPattern.currentState,
builder: (context, state, child) {
  switch (state) {
    case PatternState.none:
      return  Text("无模式");
      break;
    case PatternState.normal:
      return Text("正常模式");
      break;
    case PatternState.small:
      return Text("小屏模式");
      break;
    case PatternState.overview:
      return Text("全屏模式");
      break;
    default:
      return Text("其他模式");
      return SizedBox();
  }
}
);

flutter_bloc

bloc是基于RxDart开发的纯dart库

参考

flutter_redux

为了解决组件间的通信，Facebook提出了Flux的概念，随后出现Redux，其基于函数式编程实现。

flutter_mobx

https://mobx.netlify.com/getting-started

概述