美文网首页Flutter AndroidFlutter
flutter:探究 `element` 内部如何实现状态管理,

flutter:探究 `element` 内部如何实现状态管理,

作者: 李小轰 | 来源:发表于2021-10-19 10:29 被阅读0次

    链接扩展

    1. 初学InheritedWidget的同学可以先看这篇文章 Flutter使用InheritedWidget
    2. 进阶篇,InheritedWidget+Notifier实现状态管理模式 自定义InheritedProvider
    3. 进阶篇,状态管理刷新构思RxBinder

    基于setState进行状态管理刷新

    之前写过两篇状态管理的文章(如上链接扩展2,3)。总体思想:使用 StatefulWidget作为父节点,监听Notifier数据源变动,触发更新后,使用setState()重走build。中间部件使用Inherited实现数据共享及局部刷新能力。

    image.png

    绕开Stateful,直接通过 element 刷新

    在进入正题之前,我们首先要明确两个提高页面性能的优化点:

    • 能使用StatelessWidget的地方就不使用StatefulWidget
    • flutter整体为树状结构进行绘制,能采用局部刷新的地方,不采用全量刷新

    闲话不多说,我们直接上代码:

    ///自定义的状态管理工具
    class RxInheritedProvider<T extends ChangeNotifier> 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<T extends ChangeNotifier> extends InheritedNotifier<T> {
      RxInheritedWidget({
        required T value,
        required Widget child,
      }) : super(notifier: value, child: child);
    
      get value => this.notifier;
    }
    

    核心:使用了官方SDK提供的封装类InheritedNotifier<T>,下面截取部分InheritedNotifier关键代码探讨思想

    ///代码来自SDK
    abstract class InheritedNotifier<T extends Listenable> 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<T> oldWidget) {
        return oldWidget.notifier != notifier;
      }
    
      @override
      _InheritedNotifierElement<T> createElement() => _InheritedNotifierElement<T>(this);
    }
    

    Widget层平白无奇,属于简单的封装,重点我们来看看 _InheritedNotifierElement<T>

    //代码来自SDK
    class _InheritedNotifierElement<T extends Listenable> extends InheritedElement {
      _InheritedNotifierElement(InheritedNotifier<T> widget) : super(widget) {
        widget.notifier?.addListener(_handleUpdate);
      }
    
      @override
      InheritedNotifier<T> get widget => super.widget as InheritedNotifier<T>;
    
      bool _dirty = false;
    
      @override
      void update(InheritedNotifier<T> 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<T> oldWidget) {
        super.notifyClients(oldWidget);
        _dirty = false;
      }
    
      @override
      void unmount() {
        widget.notifier?.removeListener(_handleUpdate);
        super.unmount();
      }
    }
    

    _InheritedNotifierElement 都做了些什么?

    • _InheritedNotifierElement对数据源Notifier进行了监听,当触发变动时,调用markNeedsBuild重走build方法
    • 我们知道InheritedElementbuild方法并不会重新刷新自己以及子节点。_InheritedNotifierElement重写了build方法,在方法里进行条件判断,调用了notifyClients对依赖项进行刷新操作

    这样,白嫖系统提供的InheritedNotifier<T>,监听数据源进行局部刷新的能力实现了。我们还需要一个工具类用来注册绑定关系。

    ///提供注册依赖方法
    abstract class RxTool {
      static T of<T extends ChangeNotifier>(BuildContext context) {
        return (_getInheritedElement<T>(context).widget as RxInheritedWidget<T>).value;
      }
    
      static void register<T extends ChangeNotifier>(BuildContext context) {
        var element = _getInheritedElement<T>(context);
        // context.dependOnInheritedElement(element);
    
        context.dependOnInheritedWidgetOfExactType<RxInheritedWidget<T>>(aspect: element.widget);
    
        //这种方式不产生关联关系
        // context.getElementForInheritedWidgetOfExactType<RxInheritedWidget<T>>();
      }
    
      static InheritedElement _getInheritedElement<T extends ChangeNotifier>(
          BuildContext context) {
        var element = context.getElementForInheritedWidgetOfExactType<RxInheritedWidget<T>>();
        if (element == null) {
          throw (Exception("RxInheritedWidget<${T.runtimeType}> is find null"));
        }
        return element;
      }
    }
    

    提供 register 方法,将 contextInheritedElement 发生绑定依赖关系。在执行 notifyClient() 方法时进行依赖刷新。绑定依赖的方法有两种,根据需要选其一即可:

    • context.dependOnInheritedElement(element)
    • context.dependOnInheritedWidgetOfExactType<RxInheritedWidget<T>>(aspect: element.widget),注意泛型一定要与provider完全匹配,否则无法关联成功

    新建 ConsumerBuilder 封装注册依赖,以及获取共享数据

    class ConsumerBuilder<T extends ChangeNotifier> 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<T>(context);
        return builder(
          context,
          RxTool.of<T>(context),
        );
      }
    }
    

    运行 Demo

    /// 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<Counter>(context).increase();
                            });
                      }),
                    ],
                  ),
                );
              }),
        );
      }
    
      Widget _child() {
        return ConsumerBuilder<Counter>(builder: (context, counter) {
          return Text(
            '点击了 ${counter.count} 次',
            style: TextStyle(fontSize: 30.0),
          );
        });
      }
    }
    

    亲测有效,运行界面就不截图了,欢迎评论区交流讨论。

    相关文章

      网友评论

        本文标题:flutter:探究 `element` 内部如何实现状态管理,

        本文链接:https://www.haomeiwen.com/subject/cdxaoltx.html