背景
Flutter 常用的状态管理框架 Bloc、 Provider，Bloc 架构中使用了 Provide，而 Provider 是基于 InheritedWidget 组件的。所以本节我们通过自实现 InheritedWidget 来了解 Provider 的原理。
setState
当不依赖状态管理框架时，更新组件状态的方法就是 setState(fn)，调用该方法后，会重新调用 StatefulWidget 的 build 方法重新构建组件，达到刷新界面的效果。
InheritedWidget
- 简介
InheritedWidget 是 Flutter 中非常重要的一个功能型组件，它提供了一种在 widget 树中从上到下共享数据的方式，比如我们在应用的根 widget 中通过InheritedWidget共享了一个数据，那么我们便可以在任意子widget 中来获取该共享的数据！
class CountInheritedWidget extends InheritedWidget {
CountInheritedWidget({
Key? key,
required this.data,
required Widget child,
}) : super(key: key, child: child);
final CountModel data; // 需要在子树中共享的数据，保存点击次数
//定义一个便捷方法，方便子树中的widget获取共享数据
static CountInheritedWidget? of(BuildContext context) {
return context.dependOnInheritedWidgetOfExactType<CountInheritedWidget>();
}
//该回调决定当data发生变化时，是否通知子树中依赖data的Widget重新build
@override
bool updateShouldNotify(CountInheritedWidget old) {
return old.data != data;
}
}
class ChildText extends StatefulWidget {
@override
State<ChildText> createState() => _ChildTextState();
}
class _ChildTextState extends State<ChildText> {
@override
Widget build(BuildContext context) {
return Text(
CountInheritedWidget.of(context)?.data.count.toString() ?? '',
);
}
@override
void didChangeDependencies() {
super.didChangeDependencies();
//父或祖先widget中的InheritedWidget改变(updateShouldNotify返回true)时会被调用。
//如果build中没有依赖InheritedWidget，则此回调不会被调用。
print("ChildText Dependencies change");
}
}
- didChangeDependencies
State对象有一个 didChangeDependencies 回调，它会在“依赖”发生变化时被 Flutter 框架调用。而这个“依赖”指的就是子 widget 是否使用了父 widget 中 InheritedWidget 的数据！如果使用了，则代表子 widget 有依赖；如果没有使用则代表没有依赖。这种机制可以使子组件在所依赖的InheritedWidget 变化时来更新自身！
建立依赖：dependOnInheritedWidgetOfExactType()->dependOnInheritedElement()->
InheritedElement.updateDependencies()->_dependents[dependent] = value;(往依赖表里添加依赖的子组件)
通知依赖更新：
InheritedElement.update->ProxyElement.notifyClients->InheritedElement.notifyClients(遍历_dependents更新依赖)-InheritedElement.notifyDependent>dependent.didChangeDependencies();
- 通知数据发生变化
为了更贴近 Flutter 开发，我们使用Flutter SDK中提供的ChangeNotifier 类 ，它实现了一个 Flutter 风格的发布者-订阅者模式。我们将要共享的状态放到一个 Model 类中，然后让它继承自 ChangeNotifier，这样当共享的状态改变时，我们只需要调用 notifyListeners() 来通知订阅者，然后由订阅者来重新构建 InheritedWidget，而依赖该InheritedWidget 的子孙 Widget 就会更新。
class CountModel extends ChangeNotifier {
int count = 0;
void add() {
count++;
notifyListeners();
}
}
class _ChangeCountProviderState extends State<ChangeCountProvider> {
void update() {
setState(() {});
}
@override
void initState() {
// 给data添加监听器
widget.data.addListener(update);
super.initState();
}
@override
void dispose() {
// 移除data的监听器
widget.data.removeListener(update);
super.dispose();
}
@override
Widget build(BuildContext context) {
return CountInheritedWidget(
data: widget.data,
child: widget.child,
);
}
}
- 优化
如果我们只想在子组件中引用 CountInheritedWidget 中共享的数据，但却不希望在 CountInheritedWidget 发生变化时调用子组件的 didChangeDependencies 方法重新构建子组件怎么办？因为子组件和 CountInheritedWidget 建立了依赖关系，当 CountInheritedWidget 更新时，依赖它的子组件也会更新，所以只要我们解除这种依赖关系就可以了。通过 getElementForInheritedWidgetOfExactType 方法即可。dependOnInheritedWidgetOfExactType 和 getElementForInheritedWidgetOfExactType 的区别就是前者会注册依赖关系，而后者不会。
//添加一个listen参数，表示是否建立依赖关系
static CountModel? of(BuildContext context, {bool listen = true}) {
final provider = listen
? context.dependOnInheritedWidgetOfExactType<CountInheritedWidget>()
: context.getElementForInheritedWidgetOfExactType<CountInheritedWidget>()?.widget as CountInheritedWidget;
return provider?.data;
}
至此我们计数器版的状态管理器就实现了，它具备 Provider Package 中的核心功能，但是这个 demo 的功能并不全面，实现这个迷你 Provider 的主要目的是为了帮助大家了解 Provider Package 底层的原理，所以在实战中还是使用 Provider Package。
Provider
class _ProviderCountViewState extends State<ProviderCountView> {
@override
Widget build(BuildContext context) {
return ChangeNotifierProvider(
create: (ctx) => _CountChangeNotifier(),
child: Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: const Text('Provider'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Consumer<_CountChangeNotifier>(builder: (ctx, value, child) {
return Text(
"${value.count}",
style: const TextStyle(
fontWeight: FontWeight.w500, fontSize: 20),
);
}),
ChildHint(),
Padding(
padding: const EdgeInsets.only(top: 50),
child: Builder(builder: (ctx) {
return FloatingActionButton(
onPressed: () {
var model = ctx.read<_CountChangeNotifier>();
model.add();
},
child: const Icon(Icons.add),
);
}),
)
],
),
),
),
);
}
}
class _CountChangeNotifier extends ChangeNotifier {
int count = 0;
void add() {
count++;
notifyListeners();
}
}
