--- highlight: androidstudio theme: channing-cyan --- ### 链接扩展 > 1. 初学 InheritedWidget 的同学可以先看这篇文章 [Flutter使用InheritedWidget](https://juejin.cn/post/7007676491605475358) > 2. 进阶篇，InheritedWidget + Notifier 实现状态管理模式 [自定义InheritedProvider](https://juejin.cn/post/7007676764138766344) > 3. 进阶篇，[状态管理刷新构思RxBinder](https://juejin.cn/post/7012537281726644254) ### 基于`setState`进行状态管理刷新之前写过两篇状态管理的文章(`如上链接扩展2，3`)。总体思想：使用 `StatefulWidget`作为父节点，监听 *Notifier* 数据源变动，触发更新后，使用 *setState()* 重走 *build*。中间部件使用 *Inherited* 实现数据共享及局部刷新能力。 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c68894546fc14aeb823b1cc206365556~tplv-k3u1fbpfcp-watermark.image#?w=451\&h=333\&s=17237\&e=png\&b=bcdff9) ### 绕开`Stateful`，直接通过Element刷新在进入正题之前，我们首先要明确两个提高页面性能的优化点： * 能使用`StatelessWidget`的地方就不使用`StatefulWidget` * `flutter`整体为树状结构进行绘制，能采用局部刷新的地方，不采用全量刷新闲话不多说，我们直接上代码： ```dart ///自定义的状态管理工具 class RxInheritedProvider extends StatelessWidget { final T create; final Widget Function(BuildContext context) builder; const RxInheritedProvider({ Key? key, required this.create, required this.builder, }) : super(key: key); @override Widget build(BuildContext context) { return RxInheritedWidget( child: Builder(builder: (context) => builder(context)), value: create, ); } } class RxInheritedWidget extends InheritedNotifier { RxInheritedWidget({ required T value, required Widget child, }) : super(notifier: value, child: child); get value => this.notifier; } ``` 核心：使用了官方SDK提供的封装类 *InheritedNotifier*，下面截取部分 *InheritedNotifier*关键代码探讨思想 ```dart ///代码来自SDK abstract class InheritedNotifier extends InheritedWidget { const InheritedNotifier({ Key key, this.notifier, @required Widget child, }) : assert(child != null), super(key: key, child: child); final T notifier; @override bool updateShouldNotify(InheritedNotifier oldWidget) { return oldWidget.notifier != notifier; } @override _InheritedNotifierElement createElement() => _InheritedNotifierElement(this); } ``` *Widget* 层平白无奇，属于简单的封装，重点我们来看看 *\_InheritedNotifierElement* ```dart //代码来自SDK class _InheritedNotifierElement extends InheritedElement { _InheritedNotifierElement(InheritedNotifier widget) : super(widget) { widget.notifier?.addListener(_handleUpdate); } @override InheritedNotifier get widget => super.widget as InheritedNotifier; bool _dirty = false; @override void update(InheritedNotifier newWidget) { final T oldNotifier = widget.notifier; final T newNotifier = newWidget.notifier; if (oldNotifier != newNotifier) { oldNotifier?.removeListener(_handleUpdate); newNotifier?.addListener(_handleUpdate); } super.update(newWidget); } @override Widget build() { if (_dirty) notifyClients(widget); return super.build(); } void _handleUpdate() { _dirty = true; markNeedsBuild(); } @override void notifyClients(InheritedNotifier oldWidget) { super.notifyClients(oldWidget); _dirty = false; } @override void unmount() { widget.notifier?.removeListener(_handleUpdate); super.unmount(); } } ``` ### *\_InheritedNotifierElement* 都做了些什么？ * *\_InheritedNotifierElement* 对数据源 *Notifier* 进行了监听，当触发变动时，调用*markNeedsBuild* 重走 *build* 方法 * 我们知道 *InheritedElement* 的 *build* 方法并不会重新刷新自己以及子节点。*\_InheritedNotifierElement* 重写了 *build* 方法，在方法里进行条件判断，调用了 *notifyClients* 对依赖项进行刷新操作这样，白嫖系统提供的 *InheritedNotifier*，监听数据源进行局部刷新的能力实现了。我们还需要一个工具类用来注册绑定关系。 ```dart ///提供注册依赖方法 abstract class RxTool { static T of(BuildContext context) { return (_getInheritedElement(context).widget as RxInheritedWidget).value; } static void register(BuildContext context) { var element = _getInheritedElement(context); // context.dependOnInheritedElement(element); context.dependOnInheritedWidgetOfExactType>(aspect: element.widget); //这种方式不产生关联关系 // context.getElementForInheritedWidgetOfExactType>(); } static InheritedElement _getInheritedElement( BuildContext context) { var element = context.getElementForInheritedWidgetOfExactType>(); if (element == null) { throw (Exception("RxInheritedWidget<${T.runtimeType}> is find null")); } return element; } } ``` 提供 *register* 方法，将 *context* 与 *InheritedElement* 发生绑定依赖关系。在执行 *notifyClient()* 方法时进行依赖刷新。绑定依赖的方法有两种，根据需要选其一即可： * *context.dependOnInheritedElement(element)* * *context.dependOnInheritedWidgetOfExactType\>(aspect: element.widget)*,注意泛型一定要与 *provider* 完全匹配，否则无法关联成功新建 *ConsumerBuilder* 封装注册依赖，以及获取共享数据 ```dart class ConsumerBuilder extends StatelessWidget { final Widget Function(BuildContext context, T value) builder; const ConsumerBuilder({Key? key, required this.builder}) : super(key: key); @override Widget build(BuildContext context) { RxTool.register(context); return builder( context, RxTool.of(context), ); } } ``` 运行 Demo ```dart /// demo 示例 class Counter extends ChangeNotifier { int count = 0; void increase() { ++count; notifyListeners(); } } class TestWidget extends StatelessWidget { TestWidget({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( body: RxInheritedProvider( create: Counter(), builder: (context) { return Center( child: Column( mainAxisSize: MainAxisSize.min, children: [ _child(), Builder(builder: (context) { return TextButton( child: Text("自增"), onPressed: () { RxTool.of(context).increase(); }); }), ], ), ); }), ); } Widget _child() { return ConsumerBuilder(builder: (context, counter) { return Text( '点击了 ${counter.count} 次', style: TextStyle(fontSize: 30.0), ); }); } } ``` > 亲测有效，运行界面就不截图了，欢迎评论区交流讨论。