Flutter原理篇：key原理解析

于 2024-05-21 11:44:12 发布
阅读量725 收藏 10
点赞数 32
文章标签： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37972279/article/details/138678059
版权

今天做了一个类似抖音的app的时候，当点赞删除的时候，总是出现多个item重复出现的情况，于是才发现key的作用如此之大。所以今天给大家讲讲key的原理到底是什么。

key的使用场景只有一个，当你想给一系列相同类型的并有各种不同状态的widget进行添加，删除，排序的时候会使用到

一、Key的分类

Key是所有key的父类。且主要有两类key，即GlobalKey和LocalKey

二、key的使用场景

GlobalKey(全局key)

  •  主要用于对widget的更新（局部更新），获取widget的大小，获取widget父widget的属性，获取widget的element       

LocalKey（局部Key）
  • UniqueKey：主要用于动画的刷新。或用于需要每次都要重建刷新widget的场景
  • ObjectKey(value)：传入的是对象的引用，通过比较当前位置对象引用或类型是否相同进行更新，一般用于位置调换。或列表更新。
  • ValueKey(value)：传入的是值，通过比较该值是否相等或类型是否相同进行判断更新，同ObjectKey,主要区别是比较的值不同

三、GlobalKey使用原理

class GlobalKey {
    //从注册表中获取到绑定到element
    Element? get _currentElement =>                 WidgetsBinding.instance.buildOwner!._globalKeyRegistry[this];

    //获取context即element
    BuildContext? get currentContext => _currentElement;

    //获取绑定到widget
    Widget? get currentWidget => _currentElement?.widget;

    //获取statefulWidget的state状态
    T? get currentState {
        final Element? element = _currentElement;
        if (element is StatefulElement) {
          final StatefulElement statefulElement = element;
          final State state = statefulElement.state;
          if (state is T) {
            return state;
          }
        }
        return null;
      }
}


//由BuildOwner持有全局的globalkey对应的element
class BuildOwner {
    final Map<GlobalKey, Element> _globalKeyRegistry = <GlobalKey, Element>{};
    void _registerGlobalKey(GlobalKey key, Element element) {
        //注册globalkey
        _globalKeyRegistry[key] = element;
    }
    void _unregisterGlobalKey(GlobalKey key, Element element) {
        //解除globalkey
        if (_globalKeyRegistry[key] == element) {
          _globalKeyRegistry.remove(key);
        }
    }
}
//element,element第一次挂载的时候对globalkey的第一次注册
class Element {
    //第一次挂载element时注册globalkey
    void mount(Element? parent, Object? newSlot) {
        final Key? key = widget.key;
        if (key is GlobalKey) {
          owner!._registerGlobalKey(key, this);
        }
    }
    //element卸载时同时移除globalkey
    void unmount(Element? parent, Object? newSlot) {
        final Key? key = widget.key;
        if (key is GlobalKey) {
          owner!._unregisterGlobalKey(key, this);
        }
    }
}
GlobalKey流程
  • widget在第一次挂载mount的时候会使用全局的owner渲染通道对象将key对应的element进行保存
  • widget在卸载unmount的时候再使用owner对象将key对应的element进行移除操作
  • widget对应的element保存在全局BuildOwner的_globalKeyRegistry中。


//新widget的第一次加载
Element inflateWidget(Widget newWidget, Object? newSlot) {
    try {
      final Key? key = newWidget.key;
      //判断如果是GlobalKey则尝试获取对应的element
      if (key is GlobalKey) {
        //获取globalkey对应的element
        final Element? newChild = _retakeInactiveElement(key, newWidget);
        if (newChild != null) {
          try {
            newChild._activateWithParent(this, newSlot);
          } catch (_) {
            try {
              deactivateChild(newChild);
            } catch (_) {
              // Clean-up failed. Only surface original exception.
            }
            rethrow;
          }
          //如果element存在，则基于该element进行下一步的更新
          final Element? updatedChild = updateChild(newChild, newWidget, newSlot);
          return updatedChild!;
        }
      }
      //如果通过globalKey获取的element不存在则进行element的创建，继续往下走
      final Element newChild = newWidget.createElement();
      newChild.mount(this, newSlot);
      return newChild;
    } finally {

    }
  }

Element? _retakeInactiveElement(GlobalKey key, Widget newWidget) {
    //从BuildOwner的注册表中取出element
    final Element? element = key._currentElement;
    if (element == null) {
      return null;
    }
    //一般key相同类型即是相同
    if (!Widget.canUpdate(element.widget, newWidget)) {
      return null;
    }
    final Element? parent = element._parent;
    if (parent != null) {
      parent.forgetChild(element);
      parent.deactivateChild(element);
    }
    //从卸载列表中移除，避免被回收
    owner!._inactiveElements.remove(element);
    return element;
  }
void deactivateChild(Element child) {
    child._parent = null;
    child.detachRenderObject();
    owner!._inactiveElements.add(child); 
  }
void _activateWithParent(Element parent, Object? newSlot) {
    _parent = parent;
    _updateDepth(_parent!.depth);
    _activateRecursively(this);
    attachRenderObject(newSlot);
  }
static void _activateRecursively(Element element) {
   element.activate();
   element.visitChildren(_activateRecursively);
}
GlobalKey使用流程
  • 在widget的第一次加载的时候调用了inflateWidget，并通过_retakeInactiveElement获取注册表中GlobalKey对应的element。
  • 如果获取的element为空则新建一个element，并进行element的挂载
  • 如果element不为空则调用_activateWithParent先对父element进行绑定持有，并通过_updateDepth更新父element的depth值，方便后续更新使用。
  • 再调用自身element的_activateRecursively方法递归调用activate。
void activate() {
    assert(_lifecycleState == _ElementLifecycle.inactive);
    assert(owner != null);
    final bool hadDependencies = (_dependencies != null && _dependencies!.isNotEmpty) || _hadUnsatisfiedDependencies;
    _lifecycleState = _ElementLifecycle.active;
    //清空当前element持有的依赖列表
    _dependencies?.clear();
    _hadUnsatisfiedDependencies = false;
    //重新从父element中获取新的依赖列表
    _updateInheritance();
    attachNotificationTree();
    if (_dirty) {
      owner!.scheduleBuildFor(this);
    }
    //如果有依赖项，则执行相关的state的生命周期函数didChangeDependencies()
    if (hadDependencies) {
      didChangeDependencies();
    }
  }
///将element加入到_dirtyElements脏列表，等待vsync请求到来的时候进行更新相关element
  void scheduleBuildFor(Element element) {
}
//注意这里，递归调用每个子element的_activateRecursively，即_activateRecursively中的activate方法
@override
  void visitChildren(ElementVisitor visitor) {
    if (_child != null) {
      visitor(_child!);
    }
  }

activate:主要是处理依赖关系，更新依赖列表，并调用didChangeDependencies的生命周期函数(如果有依赖)

visitChildren：递归调用子element的activate方法更新依赖列表等。

四、LocalKey使用原理

localKey是局部key，作用于该节点下的各个子节点，所以一般与MultiChildRenderObjectElement这个element有关

所以我们先从MultiChildRenderObjectElement的update更新子element开始分析

void update(MultiChildRenderObjectWidget newWidget) {
    super.update(newWidget);
    final MultiChildRenderObjectWidget multiChildRenderObjectWidget = widget as MultiChildRenderObjectWidget;
    //这里即将开始子节点的更新逻辑。
    _children = updateChildren(_children, multiChildRenderObjectWidget.children, forgottenChildren: _forgottenChildren);
    //这里的_forgottenChildren存储的就是使用GlobalKey的element。清除GlobalKey相关的element
    _forgottenChildren.clear();
  }

List<Element> updateChildren(List<Element> oldChildren, List<Widget> newWidgets, { Set<Element>? forgottenChildren, List<Object?>? slots }) {
    Element? replaceWithNullIfForgotten(Element child) {
      return forgottenChildren != null && forgottenChildren.contains(child) ? null : child;
    }
    //头部索引
    int newChildrenTop = 0;
    int oldChildrenTop = 0;
    //尾部索引
    int newChildrenBottom = newWidgets.length - 1;
    int oldChildrenBottom = oldChildren.length - 1;

    //创建一个存储新列表的集合
    final List<Element> newChildren = List<Element>.filled(newWidgets.length, _NullElement.instance);

    Element? previousChild;
    return newChildren;
}

首先我们简单梳理一下，这里开始element的更新，主要分为三个阶段进行更新，更新前会先创建索引，通过索引获取对应的widget

  • 这里会先定义一个过滤带有globalKey的方法replaceWithNullIfForgotten，后面会用到
  • 创建两个头部索引以及尾部索引，方便后期进行遍历更新

遍历更新会分为三个阶段

第一阶段
//第一阶段先对头部索引进行遍历
while ((oldChildrenTop <= oldChildrenBottom) && (newChildrenTop <= newChildrenBottom)) {
      //先清除带有globalkey的索引，因为globalkey不在更新范围内
      final Element? oldChild = replaceWithNullIfForgotten(oldChildren[oldChildrenTop]);
      final Widget newWidget = newWidgets[newChildrenTop];
      //只对非活跃状态的element进行更新
      assert(oldChild == null || oldChild._lifecycleState == _ElementLifecycle.active);
      //直到遇到不可更新的element就退出循环
      if (oldChild == null || !Widget.canUpdate(oldChild.widget, newWidget)) {
        break;
      }
      //如果可更新则进行更新操作
      final Element newChild = updateChild(oldChild, newWidget, slotFor(newChildrenTop, previousChild))!;
      assert(newChild._lifecycleState == _ElementLifecycle.active);
      //将更新后的element进行保存
      newChildren[newChildrenTop] = newChild;
      previousChild = newChild;
      //继续下一次的遍历操作
      newChildrenTop += 1;
      oldChildrenTop += 1;
    }

    // 同步扫描尾部节点
while ((oldChildrenTop <= oldChildrenBottom) && (newChildrenTop <= newChildrenBottom)) {
      //与头部索引扫描的操作一致
      final Element? oldChild = replaceWithNullIfForgotten(oldChildren[oldChildrenBottom]);
      final Widget newWidget = newWidgets[newChildrenBottom];
      assert(oldChild == null || oldChild._lifecycleState == _ElementLifecycle.active);
      if (oldChild == null || !Widget.canUpdate(oldChild.widget, newWidget)) {
        break;
      }
      oldChildrenBottom -= 1;
      newChildrenBottom -= 1;
}
流程梳理
  • 开始会先前后对满足Widget.canUpdate(oldChild.widget, newWidget)的widget进行更新，并存入newChildren列表中
  • 同时更新索引值继续遍历，直到遇到不可更新的节点停止遍历(即类型不同或key不同)
  • 头部索引遍历完继续遍历尾部索引，注意这里尾部索引不做任何更新，只是更新索引值，即记录不满足更新条件Widget.canUpdate的索引值。
第二阶段

final bool haveOldChildren = oldChildrenTop <= oldChildrenBottom;
    Map<Key, Element>? oldKeyedChildren;
    if (haveOldChildren) {
      oldKeyedChildren = <Key, Element>{};
      while (oldChildrenTop <= oldChildrenBottom) {
        //此时先过滤带有globalkey的element
        final Element? oldChild = replaceWithNullIfForgotten(oldChildren[oldChildrenTop]);
        assert(oldChild == null || oldChild._lifecycleState == _ElementLifecycle.active);
        if (oldChild != null) {
          if (oldChild.widget.key != null) {
            //保存带有key的element
            oldKeyedChildren[oldChild.widget.key!] = oldChild;
          } else {
            //将没有key的element卸载
            deactivateChild(oldChild);
          }
        }
        //递增索引值继续遍历
        oldChildrenTop += 1;
      }
    }

    //开始遍历剩余节点
    while (newChildrenTop <= newChildrenBottom) {
      Element? oldChild;
      final Widget newWidget = newWidgets[newChildrenTop];
      if (haveOldChildren) {
        final Key? key = newWidget.key;
        if (key != null) {
          //通过新widget的key从oldKeyedChildren中获取对应的element
          oldChild = oldKeyedChildren![key];
          if (oldChild != null) {
            //如果有element则判断类型是否相同
            if (Widget.canUpdate(oldChild.widget, newWidget)) {
              //移除相关的element
              oldKeyedChildren.remove(key);
            } else {
             
              oldChild = null;
            }
          }
        }
      }
      assert(oldChild == null || Widget.canUpdate(oldChild.widget, newWidget));
      //如果有相同的key则进行更新，计算新的element节点
      final Element newChild = updateChild(oldChild, newWidget, slotFor(newChildrenTop, previousChild))!;
      //将创建的新的element节点存入newChildren列表
      newChildren[newChildrenTop] = newChild;
      previousChild = newChild;
      newChildrenTop += 1;
    }
流程梳理
  • 第一步通过oldKeyedChildren记录原来旧的带有key（非globalkey）的element节点以备后续使用
  • 第二步开始遍历剩余节点，判断原来的节点与新的widget的节点是否相同。如果相同则晴空万里oldKeyedChildren对应的element节点，基于新的widget进行更新即可，复用原来的element。并将element存入newChildren中
第三阶段
    //重新获取旧element和新widget的尾部索引，即重置尾部索引
    newChildrenBottom = newWidgets.length - 1;
    oldChildrenBottom = oldChildren.length - 1;

    //从尾部开始更新，开始更新newChildren的尾部
    while ((oldChildrenTop <= oldChildrenBottom) && (newChildrenTop <= newChildrenBottom)) {
      final Element oldChild = oldChildren[oldChildrenTop];
      assert(replaceWithNullIfForgotten(oldChild) != null);
      assert(oldChild._lifecycleState == _ElementLifecycle.active);
      final Widget newWidget = newWidgets[newChildrenTop];
      assert(Widget.canUpdate(oldChild.widget, newWidget));
      final Element newChild = updateChild(oldChild, newWidget, slotFor(newChildrenTop, previousChild))!;
      assert(newChild._lifecycleState == _ElementLifecycle.active);
      assert(oldChild == newChild || oldChild._lifecycleState != _ElementLifecycle.active);
      newChildren[newChildrenTop] = newChild;
      previousChild = newChild;
      newChildrenTop += 1;
      oldChildrenTop += 1;
    }

    //开始清空未命中使用的key元素
    if (haveOldChildren && oldKeyedChildren!.isNotEmpty) {
      for (final Element oldChild in oldKeyedChildren.values) {
        if (forgottenChildren == null || !forgottenChildren.contains(oldChild)) {
          deactivateChild(oldChild);
        }
      }
    }
流程梳理
  • 从第一阶段和第二阶段遍历完之后，开始遍历剩余节点，则重新计算尾部索引，即重置索引开始第三阶段的遍历
  • 从尾部开始更新，更新newChildren的尾部。，更新完之后开始清空未命中使用的key元素，并调用deactivateChild清空
超盘守
关注
  • 32
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Flutter —— key 的原理
LinShunIos的博客
11-25 1830
Flutter —— key 的原理1. Key 的原理2. Key 的 探究 之前的文章中有的类故意没有写Key，那么这个Key有什么作用呢？今天来探究一下。 1. Key 的原理 key 本身是一个抽象类，有一个工厂构造方法创建ValueKey 2. Key 的 探究 其实任何的Widget都是有key的，key是可以为空的。 创建一个KeyDemo放在MaterialApp的home里面 class KeyDemo extends StatefulWidget { const KeyDem
Flutter中的Key
寒江
07-23 327
Key A [Key] is an identifier for [Widget]s, [Element]s and [SemanticsNode]s. /// A new widget will only be used to update an existing element if its key is /// the same as the key of the current widget associated with the element. 如果一个新的widget和当前widget相
Flutter : 关于 Key
J.D.的博客
07-02 1080
关于 Flutter 里的 Key 的特性。
深入理解Flutter中的GlobalKey与LocalKey（ValueKey、ObjectKey、UniqueKey）及其使用方法
最新发布
爱喝水程序员的博客
01-24 1417
在Flutter中，Key是一个非常重要的概念，它用于标识和管理Widget。GlobalKey和LocalKey是Key的两个主要子类，而ValueKey、ObjectKey和UniqueKey则是LocalKey的具体实现。在本文中，我们将深入介绍这些关键概念以及它们在Flutter中的使用方法。
Flutter入门进阶之旅（二十三）Flutter Key
谢栋的专栏
11-30 3103
key我们可以理解为每个控件所独有的一个ID，用以识别是哪个UI。有了key，element和renderObject就会被强行重建，从而得到所见即所得的效果。 key可以分为LocalKey和GlobalKey，字面上理解就是局部key和全局key。 具体分类如下： i LocalKey LocalKey 直接继承至 Key，它应用于拥有相同父 Element 的小部件进行比较的情况，也就是上述例子中，有一个多子 Widget 中需要对它的子 widget 进行移动处理，这时候你应该使用Local
国内少有的Flutter干货分享：Flutter的原理及美团的实践！
02-24
Flutter是Google开发的一套全新的跨平台、开源UI框架，支持iOS、Android系统开发，并且是未来新操作系统Fuchsia的默认开发套件。自从2017年5月发布第一个版本以来，目前Flutter已经发布了近60个版本，并且在2018年5...
flutter_picker:Flutter Picker插件
05-11
flutter_picker Flutter插件选择器。 包括NumberPicker，DateTimePicker，ArrayPicker和默认链接选择器。 提供灵活的参数以满足各种需求。 同时，您可以通过自定义适配器扩展更多功能。 支持平台 安卓 的iOS 如何...
Flutter原理与美团的实践
01-27
Flutter是Google开发的一套全新的跨平台、开源UI框架，支持iOS、Android系统开发，并且是未来新操作系统Fuchsia的默认开发套件。自从2017年5月发布第一个版本以来，目前Flutter已经发布了近60个版本，并且在2018年5...
Flutter 中的key
github_36850997的博客
04-11 939
Flutter 中的key 主要分为两类，LocalKey : 应用于具有相同父Element的Widget 进行比较，也是diff 算法的核心所在GlobalKey ：通常我们会使用GlobalKey 某个widget 对应的Widget 或State 或者Element。
一篇文章带你看懂Flutter中的Key
yihanss的博客
03-23 2283
Flutter中的Key，一直都是作为一个可选参数在很多Widget中出现，那么它到底有什么用，它到底怎么用，本篇文章将带你从头到尾，好好理解下，Flutter中的Key。
flutter中的key到底有什么用？
09-11 3110
谢邀，Flutter 的设计思想与 React 十分类似，都是在界面状态发生变化时重新生成组件树，然后 diff-patch 到真实的渲染树上。key 这个概念在渲染批量相同类型的组件时很重要，因为一个列表中添加和删除元素是一个很常见的操作，diff 算法为了能区分究竟哪个 item 被删掉（或添加、交换位置）了，就需要借助 key 作为唯一标示符，不然这一批 item 对于 differ 来说都...
Flutter 详解 Key
08-21 829
转载 原文链接：https://juejin.im/post/6863300824660082701 作者： fgyong github:https://github.com/ifgyong Key 是什么 用官方的说法就是： key是用来作为Widget、Element和SemanticsNode的标示，仅仅用来更新widget->key相同的小部件的状态。 Key子类包含LocalKey和GlobalKey。 LocalKey 看下LocalKey的定义： abstract class L.
Flutter | Key的原理和使用
345丶
06-21 696
概述 在几乎所有的 widget 中，都有一个参数 key ，那么这个 key 的作用是什么，在什么时候才需要使用到 key ？ 没有 key 会出现什么问题？ 我们直接看一个计数器的例子： class Box extends StatefulWidget { final Color color; Box(this.color); @override _BoxState createState() => _BoxState(); } class _BoxState extend.
Flutter 中的key、LocalKey、GlobalKey等等
热门推荐
XueQiYa的博客
06-13 1万+
key之间的关系 key @immutable abstract class Key { const factory Key(String value) = ValueKey<String>; @protected const Key.empty(); } 默认创建 Key 将会通过工厂方法根据传入的 value 创建一个 ValueKey。 Key 派生出两种不同用...
Flutter持久化存储之key-value存储
weixin_34288121的博客
03-04 2303
前言 应用开发时会有很多的数据存储需求，这个时候就需要用到持久化存储技术，与iOS、安卓一样，Flutter中也有很多种持久化存储方式，比如key-value存储、文件存储、数据库存储等，但其实质都是通过平台对应的模块来实现的，本篇我们将带大家一起了解key-value存储的应用。 key-value存储介绍 key-value存储主要是平台提供特定的api来供我们操作，其本质依然是将数据存储到特...
flutter key
weixin_30249203的博客
03-24 286
随意点开一个Widget,就会发现，可以传递一个参数Key.那这个Key到底是干啥子，有什么用呢？ Flutter是受React启发的，所以Virtual Dom的diff算法也参考过来了（应该是略有修改），在diff的过程中如果节点有Key来比较的话，能够最大程度重用已有的节点（特别在列表的场景），除了这一点这个Key也用在很多其他的地方这个以后会总结一下。总之，这里我们可以知道key能够...
防重复请求处理的实践与总结
糖糖糖糖糖先森
10-30 1973
#防重复处理总结 ##背景 在业务开发中，我们常会面对防止重复请求的问题。当服务端对于请求的响应涉及数据的修改，或状态的变更时，可能会造成极大的危害。重复请求的后果在交易系统、售后维权，以及支付系统中尤其严重。 前台操作的抖动，快速操作，网络通信或者后端响应慢，都会增加后端重复处理的概率。 前台操作去抖动和防快速操作的措施，我们首先会想到在前端做一层控制。当前端触发操作时，或弹出确
flutter key的使用 和 原理
唐僧的专栏
01-13 943
Flutter Key 的作用： 前提：在flutter 中 运行中的 widget 是不能发生改变的，只能通过 改变State 丢弃之前的weidget, rebuild 重绘 ， 运行中的三棵树，我们先讲前两棵 ➥ Widget Tree 类似蓝图描述布局 ➥ Element Tree WidgetTree 实例对象， 管理 widget 中的 State 信息,实现动态改变 如果通过直接赋值 修改的Widget 属性，可以直接发生变化（在热加载阶段）...
flutter super(key: key)的作用
06-02
在Flutter中，Widget的构造函数中通常包含一个可选参数`key`。这个参数是用来帮助Flutter识别Widget树中的不同节点的，它是Flutter实现Element树中diff算法的重要依据。 `super(key: key)`是指在子类的构造函数中调用父类的构造函数，并将`key`参数传递给父类的构造函数。这样做是为了让父类能够正确地管理自己的状态和生命周期，同时也可以让Flutter识别Widget树中的不同节点。 例如，如果你创建了一个继承自StatefulWidget的自定义Widget，并且想要在Widget树中使用这个Widget，你需要为它提供一个唯一的`key`值。这个`key`值可以是一个`GlobalKey`或者一个`ObjectKey`，用来标识这个Widget在Widget树中的位置。在这个Widget的构造函数中，你需要调用父类的构造函数，并将`key`参数传递给它，如下所示： ```dart class MyCustomWidget extends StatefulWidget { MyCustomWidget({Key key}) : super(key: key); @override _MyCustomWidgetState createState() => _MyCustomWidgetState(); } class _MyCustomWidgetState extends State<MyCustomWidget> { // Widget状态和生命周期 // ... } ``` 在上面的例子中，我们在`MyCustomWidget`的构造函数中调用了父类`StatefulWidget`的构造函数，并将`key`参数传递给它。这样做可以让父类正确地管理自己的状态和生命周期，并让Flutter识别Widget树中的不同节点。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

超盘守

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值