一. 为什么需要状态管理？
1.1. 认识状态管理
很多从命令式编程框架（Android或iOS原生开发者）转成声明式编程（Flutter、Vue、React等）刚开始并不适应，因为需要一个新的角度来考虑APP的开发模式。
Flutter作为一个现代的框架，是声明式编程的：
在编写一个应用的过程中，我们有大量的State需要来进行管理，而正是对这些State的改变，来更新界面的刷新。
1.2. 不同状态管理分类
1.2.1. 短时状态Ephemeral state
某些状态只需要在自己的Widget中使用即可
- 比如我们之前做的简单计数器counter
- 比如一个PageView组件记录当前的页面
- 比如一个动画记录当前的进度
- 比如一个BottomNavigationBar中当前被选中的tab
这种状态我们只需要使用StatefulWidget对应的State类自己管理即可，Widget树中的其它部分并不需要访问这个状态。
这种方式在之前的学习中，我们已经应用过非常多次了。
1.2.2. 应用状态App state
开发中也有非常多的状态需要在多个部分进行共享
- 比如用户一个个性化选项
- 比如用户的登录状态信息
- 比如一个电商应用的购物车
- 比如一个新闻应用的已读消息或者未读消息
这种状态我们如果在Widget之间传递来、传递去，那么是无穷尽的，并且代码的耦合度会变得非常高，牵一发而动全身，无论是代码编写质量、后期维护、可扩展性都非常差。
这个时候我们可以选择全局状态管理的方式，来对状态进行统一的管理和应用。
1.2.3. 如何选择不同的管理方式
开发中，没有明确的规则去区分哪些状态是短时状态，哪些状态是应用状态。
- 某些短时状态可能在之后的开发维护中需要升级为应用状态。
但是我们可以简单遵守下面这幅流程图的规则：
针对React使用setState还是Redux中的Store来管理状态哪个更好的问题，Redux的issue上，Redux的作者Dan Abramov，它这样回答的：
The rule of thumb is: Do whatever is less awkward
经验原则就是：选择能够减少麻烦的方式。
二. 共享状态管理
2.1. InheritedWidget
InheritedWidget和React中的context功能类似，可以实现跨组件数据的传递，（Inherited是继承的意思）。
定义一个共享数据的InheritedWidget，需要继承自InheritedWidget。
- 我们想要达到的效果是，HYShowData01和HYShowData02都使用公共的数据counter，所以HYCounterWidget要包裹住HYShowData01和HYShowData02。
- 点击按钮的时候counter+1，所以HYCounterWidget里面的counter不能写死，要在我们创建HYCounterWidget的时候传进去。
- 这里定义了一个of方法，该方法通过context开始去查找祖先的HYDataWidget（可以查看源码查找过程）。
- updateShouldNotify方法是对比新旧HYDataWidget，是否需要对更新相关依赖的Widget。
代码如下：根据1-9步骤查看即可
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
// 共享数据的widget
class HYCounterWidget extends InheritedWidget {
// 1.想要共享的数据
final int counter;
// 2.定义构造方法
HYCounterWidget({this.counter, Widget child}): super(child: child);
// 3. 创建静态方法，通过类名来调用，一般约定起名of
// 方法的作用是获取组件父级最近的InheritedWidget
static HYCounterWidget of(BuildContext context) {
// 下面一行代码的作用：沿着Element树, 去找到最近的HYCounterElement, 从Element中取出Widget对象
return context.dependOnInheritedWidgetOfExactType();
}
// 必须实现这个方法
// 4.决定要不要回调State中的didChangeDependencies方法
// 如果返回true: 执行依赖的InheritedWidget的State中的didChangeDependencies方法
@override
bool updateShouldNotify(HYCounterWidget oldWidget) {
return oldWidget.counter != counter;
}
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue, splashColor: Colors.transparent),
home: HYHomePage(),
);
}
}
class HYHomePage extends StatefulWidget {
@override
_HYHomePageState createState() => _HYHomePageState();
}
class _HYHomePageState extends State<HYHomePage> {
int _counter = 100;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("InheritedWidget"),
),
// 5. 我们想要在HYShowData01和HYShowData02里面使用共享的数据，所以需要用HYCounterWidget来包裹子组件
body: HYCounterWidget(
// 6. 创建HYCounterWidget的时候我们传进去一个counter
// 然后点击按钮的时候改变这个counter的值，就可以了使界面上显示的数据发生变化
counter: _counter,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
HYShowData01(),
HYShowData02()
],
),
),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {
setState(() {
_counter++;
});
},
),
);
}
}
// StatefulWidget
class HYShowData01 extends StatefulWidget {
@override
_HYShowData01State createState() => _HYShowData01State();
}
class _HYShowData01State extends State<HYShowData01> {
// 9. 当构建的widget依赖某个InheritedWidget，当InheritedWidget里面的数据发生改变，就会执行didChangeDependencies这个方法
@override
void didChangeDependencies() {
super.didChangeDependencies();
print("执行了_HYShowData01State中的didChangeDependencies");
}
@override
Widget build(BuildContext context) {
// 7. 取出共享的数据
// 内部是沿着Element树, 去找到最近的HYCounterElement, 从Element中取出Widget对象
int counter = HYCounterWidget.of(context).counter;
return Card(
color: Colors.red,
// 8. 使用共享的数据
child: Text("当前计数: $counter", style: TextStyle(fontSize: 30),),
);
}
}
// StatelessWidget
class HYShowData02 extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 取出共享的数据
int counter = HYCounterWidget.of(context).counter;
return Container(
color: Colors.blue,
child: Text("当前计数: $counter", style: TextStyle(fontSize: 30),),
);
}
}
这样我们就达到了在某个Widget中使用共享的数据，并且监听数据的改变。
补充：context.dependOnInheritedWidgetOfExactType()的源码分析
@override
T? dependOnInheritedWidgetOfExactType<T extends InheritedWidget>({Object? aspect}) {
assert(_debugCheckStateIsActiveForAncestorLookup());
// 1. 先在map中找_inheritedWidgets
final InheritedElement? ancestor = _inheritedWidgets == null ? null : _inheritedWidgets![T];
if (ancestor != null) {
// 2. 调用
return dependOnInheritedElement(ancestor, aspect: aspect) as T;
}
_hadUnsatisfiedDependencies = true;
return null;
}
@override
InheritedWidget dependOnInheritedElement(InheritedElement ancestor, { Object? aspect }) {
assert(ancestor != null);
_dependencies ??= HashSet<InheritedElement>();
_dependencies!.add(ancestor);
// 2.1 这里决定数据刷新的时候要不要调用didChangeDependencies方法
ancestor.updateDependencies(this, aspect);
// 2.2 最后返回我们需要的InheritedWidget
return ancestor.widget as InheritedWidget;
}
2.2. Provider
Provider是目前官方推荐的全局状态管理工具，由社区作者Remi Rousselet 和 Flutter Team共同编写。
使用之前，我们需要先引入对它的依赖，截止这篇文章，Provider的最新版本为4.0.4：
dependencies:
provider: ^4.0.4
2.2.1. Provider的基本使用
在使用Provider的时候，我们主要关心三个概念：
- ChangeNotifier：真正数据（状态）存放的地方
- ChangeNotifierProvider：Widget树中提供数据（状态）的地方，会在其中创建对应的ChangeNotifier
- Consumer：Widget树中需要使用数据（状态）的地方
我们先来完成一个简单的案例，将官方计数器案例使用Provider来实现：
第一步：创建自己的ChangeNotifier
我们需要一个ChangeNotifier来保存我们的状态，所以创建它
- 这里我们可以使用继承自ChangeNotifier，也可以使用混入，这取决于概率是否需要继承自其它的类
- 我们使用一个私有的_counter，并且提供了getter和setter
- 在setter中我们监听到_counter的改变，就调用notifyListeners方法，通知所有的Consumer进行更新
counter_view_model.dart代码如下：
import 'package:flutter/material.dart';
// 1.创建自己需要共享的数据
// 为了实现数据改变通知view刷新，我们需要继承(extends)或者混入(with)ChangeNotifier
class HYCounterViewModel extends ChangeNotifier {
int _counter = 100;
// command+n快捷键，可以快速生成重写set、get方法
int get counter => _counter;
set counter(int value) {
_counter = value;
// 数据改变，通知widget刷新数据
notifyListeners();
}
}
第二步：在Widget Tree中插入ChangeNotifierProvider
我们需要在Widget Tree中插入ChangeNotifierProvider，以便Consumer可以获取到数据：
- 将ChangeNotifierProvider放到了顶层，这样方便在整个应用的任何地方可以使用CounterProvider
void main() {
runApp(
// 2.在应用程序的顶层ChangeNotifierProvider
ChangeNotifierProvider(
// 返回刚才创建的ViewModel
create: (ctx) => HYCounterViewModel(),
child: MyApp(),
)
);
}
第三步：在首页使用和修改共享数据
具体如下：
2.2.2. 使用Provider.of
事实上，因为Provider是基于InheritedWidget，所以我们在使用ChangeNotifier中的数据时，我们可以通过Provider.of的方式来使用，比如下面的代码：
class HYHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
print("调用了HYHomePage的build方法");
return Scaffold(
appBar: AppBar(
title: Text("Provider"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("当前计数:${Provider.of<HYCounterViewModel>(context).counter}",
style: TextStyle(fontSize: 30, color: Colors.purple),
)
],
),
),
);
}
}
这种方式不好，因为当数据发生改变的时候，会重新调用Widget的build方法，非常消耗性能，开发中我们几乎不用。
2.2.3. 使用Consumer
- 引入位置一：在body中使用Consumer，Consumer需要传入一个builder回调函数，当数据发生变化时，就会通知依赖数据的Consumer重新调用builder方法来构建（这样就不会调用整个Widget的build方法，节省了性能）。
- 引入位置二：在floatingActionButton中使用Consumer，当点击按钮时，修改CounterNotifier中的counter数据；
class HYHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("列表测试"),
),
body: Center(
child: Consumer<HYCounterViewModel>(
builder: (ctx, counterVM, child) {
return Text("当前计数:${counterVM.counter}", style: TextStyle(fontSize: 20, color: Colors.red),);
}
),
),
// 将FloatingActionButton包裹一层，这样才能拿到HYCounterViewModel，从而修改里面的数据
floatingActionButton: Consumer<HYCounterViewModel>(
builder: (ctx, counterVM, child) { // 这里的第三个参数child就是下面的child: Icon(Icons.add)
return FloatingActionButton(
child: child,
onPressed: () {
// 修改HYCounterViewModel里面的数据，界面也会刷新
counterVM.counter += 1;
},
);
},
child: Icon(Icons.add),
),
);
}
}
Consumer的builder方法解析：
- 参数一：context，每个build方法都会有上下文，目的是知道当前树的位置
- 参数二：ChangeNotifier对应的实例，也是我们在builder函数中主要使用的对象
- 参数三：child，目的是进行优化，如果builder下面有一颗庞大的子树，当模型发生改变的时候，我们并不希望重新build这颗子树，那么就可以将这颗子树放到Consumer的child中，在这里直接引入即可（注意上面代码的Icon所放的位置，这也是优化的第一点）
2.2.4. 使用Selector
Consumer是否是最好的选择呢？并不是，它也会存在弊端。
如下代码，有两行打印。
当数据发生改变的时候，这两行都会打印，第一个可以理解，因为要刷新界面，但是floatingActionButton没必要重新构建，因为它是否在操作数据，并没有展示。如何可以做到让它不要重新build了？使用Selector来代替Consumer。
我们先直接实现代码，再解释其中的含义：
floatingActionButton: Selector<HYCounterViewModel, HYCounterViewModel>(
// Selector有两个泛型<A, S>，会在selector的函数里面将A修改一下，最后返回S，我们不做修改
selector: (ctx,countVM) => countVM,
// 要不要重新构建？如果返回false就不用重新构建，这样我们点击+的时候数据发生改变，但是下面的builder不会重新构建
shouldRebuild: (pre, next) => false,
builder: (ctx, countVM, child) {
print("floatingActionButton展示的位置builder被调用");
return FloatingActionButton(
child: child,
onPressed: () {
countVM.counter += 1;
},
);
},
child: Icon(Icons.add),
),
Selector和Consumer对比，不同之处主要是三个关键点：
- 关键点1：泛型参数是两个<A, S>
- 泛型参数一：我们这次要使用的Provider
- 泛型参数二：转换之后的数据类型，比如我这里转换之后依然是使用HYCounterViewModel，那么他们两个就是一样的类型
- 关键点2：selector回调函数
- 转换的回调函数，你希望如何进行转换
- S Function(BuildContext, A) selector
- 我这里没有进行转换，所以直接将A实例返回即可
- 关键点3：是否希望重新rebuild
- 这里也是一个回调函数，我们可以拿到转换前后的两个实例；
- bool Function(T previous, T next);
- 因为这里我不希望它重新rebuild，无论数据如何变化，所以这里我直接return false；
这个时候，我们重新测试点击floatingActionButton，floatingActionButton中的代码并不会进行rebuild操作。
所以在某些情况下，我们可以使用Selector来代替Consumer，性能会更高。
总结：
- 创建自己需要共享的数据
- 在应用程序的顶层ChangeNotifierProvider
- 在其它位置使用共享的数据
方式一：Provider.of：当Provider中的数据发生改变时, Provider.of所在的Widget整个build方法都会重新构建
方式二：Consumer(相对推荐)：当Provider中的数据发生改变时, 执行重新执行Consumer的builder
方式三：Selector：1.selector方法(对原有的数据进行转换) 2.shouldRebuild(要不要重新构建) - 开发中如果只是单纯的使用数据，就使用Consumer，如果要对数据进行修改，就使用Selector
2.2.5. MultiProvider
在开发中，我们需要共享的数据肯定不止一个，并且数据之间我们需要组织到一起，所以一个Provider必然是不够的。
我们再增加一个新的ChangeNotifier。
import 'package:flutter/material.dart';
class UserInfo {
String nickname;
int level;
UserInfo(this.nickname, this.level);
}
class UserProvider extends ChangeNotifier {
UserInfo _userInfo = UserInfo("why", 18);
set userInfo(UserInfo info) {
_userInfo = info;
notifyListeners();
}
get userInfo {
return _userInfo;
}
}
如果在开发中我们有多个Provider需要提供应该怎么做呢？
方式一：多个Provider之间嵌套
- 这样做有很大的弊端，如果嵌套层级过多不方便维护，扩展性也比较差
runApp(ChangeNotifierProvider(
create: (context) => CounterProvider(),
child: ChangeNotifierProvider(
create: (context) => UserProvider(),
child: MyApp()
),
));
方式二：使用MultiProvider
runApp(MultiProvider(
providers: [
ChangeNotifierProvider(create: (ctx) => CounterProvider()),
ChangeNotifierProvider(create: (ctx) => UserProvider()),
],
child: MyApp(),
));
开发中，我们一般将providers数组抽取到一个文件里面，如下：
import 'package:provider/provider.dart';
import 'package:provider/single_child_widget.dart';
import 'counter_view_model.dart';
import 'user_view_model.dart';
import '../model/user_info.dart';
List<SingleChildWidget> providers = [
ChangeNotifierProvider(create: (ctx) => HYCounterViewModel(),),
ChangeNotifierProvider(create: (ctx) => HYUserViewModel(UserInfo("why", 29, "abc")),),
];
如果我们需要使用两个vm的数据，咋办呢？嵌套的确是可以的，但是太麻烦的，一般我们使用Consumer2、Consumer3、Consumer4，等等。
class HYShowData03 extends StatelessWidget {
@override
Widget build(BuildContext context) {
// Provider.of Consumer Selector Consumer2
return Consumer2<HYUserViewModel, HYCounterViewModel>(
builder: (ctx, userVM, counterVM, child) {
return Text(
"nickname:${userVM.user.nickname} counter:${counterVM.counter}",
style: TextStyle(fontSize: 30),
);
},
);
}
}
