Flutter三棵树系列之详解各种Key | 京东云技术团队

news2025/2/23 5:17:00

简介

key是widget、element和semanticsNode的唯一标识,同一个parent下的所有element的key不能重复,但是在特定条件下可以在不同parent下使用相同的key,比如page1和page2都可以使用ValueKey(1)

常用key的UML关系图如上,整体上key分为两大类-LocalKey和GlobalKey,这两个key都是抽象类,LocalKey的实现类有 ValueKey、ObjectKey和UniqueKey,GlobalKey实现类有LabeledGlobalKey和GlobalObjectKey。

Key

@immutable
abstract class Key {
  const factory Key(String value) = ValueKey<String>;


  @protected
  const Key.empty();
}

Key是所有key的基类,内部实现了一个工厂构造函数,默认创建String类型的ValueKey。内部还是先了一个empty的构造函数,主要是给子类用的。

LocalKey

abstract class LocalKey extends Key {
  const LocalKey() : super.empty();
}

LocalKey没有实际作用,主要是用来区分GlobalKey的,其具体的实现类有ValueKey、ObjectKey、UniqueKey。

ValueKey

class ValueKey<T> extends LocalKey {
  const ValueKey(this.value);


  final T value;


  @override
  bool operator ==(Object other) {
    if (other.runtimeType != runtimeType)
      return false;
    return other is ValueKey<T>
        && other.value == value;
  }


  @override
  int get hashCode => hashValues(runtimeType, value);

内部维护了泛型类型的value属性,并实现了==和hashCode方法。只要两个ValueKey的value属性相等,那么就认为两个Key相等。

ObjectKey

class ObjectKey extends LocalKey {
  const ObjectKey(this.value);


  final Object? value;


  @override
  bool operator ==(Object other) {
    if (other.runtimeType != runtimeType)
      return false;
    return other is ObjectKey
        && identical(other.value, value);
  }


  @override
  int get hashCode => hashValues(runtimeType, identityHashCode(value));

ObjectKey是继承自LocalKey的,可以将其理解成泛型类型为Object的ValueKey。但是注意两者的方法是不一样的,ValueKey根据value的值是否相等来判断ValueKey是否相等(相当于java的equals方法),而ObjectKey根据indentical方法(**判断两个引用是否指向同一个对象,相当于java的操作符**)来判断两个ObjectKey是否相等的。

UniqueKey

class UniqueKey extends LocalKey {
  UniqueKey();


  @override
  String toString() => '[#${shortHash(this)}]';
}

唯一的key,其并未重写==和hashCode方法,所有它只和自己相等。注意看UniqueKey的构造函数,并没有像上面介绍的几个key的构造函数一样使用const修饰,这样做的目的是为了进一步保证UniqueKey的唯一性。这样在调用Element的updateChild方法时,此方法内部调用的Widget.canUpdate方法就会始终返回false,从而每次都会创建新的child element。

所以,如果你想让某一个widget每一次都不复用old element,而是去重新创建新的element,那么就给他添加UniqueKey吧。

const是编译时常量,在编译期,其值就已经确定。背后利用的类似于常量池的概念,被const修饰的对象会保存在常量池中,后面会对其进行复用。如果UniqueKey构造函数添加了const关键词,那么有如下代码 var k1 = const UniqueKey(); var k2 = const UniqueKey(); 此时k1==k2永远为true,就不能保证其唯一性。

GlobalKey

GlobalKey是全局唯一的,其默认实现是LabeledGlobalKey,所以每次创建的都是新的GlobalKey。所有的GlobalKey都保存在BuildOwner类中的一个map里,此map的key为GlobalKey,此map的value则为GlobalKey关联的element。

对于GlobalKey,需要知道如下几点:

  • 当拥有GlobalKey的widget从tree的一个位置上移动到另一个位置时,需要reparent它的子树。为了reparent它的子树,必须在一个动画帧里完成从旧位置移动到新位置的操作。
  • 上面说到的reparent操作是昂贵的,因为要调用所有相关联的State和所有子节点的deactive方法,并且所有依赖InheritedWidget的widget去重建。
  • 不要在build方法里创建GlobalKey,性能肯定不好,而且也容易出现意想不到的异常,比如子树里的GestureDetector可能会由于每次build时重新创建GlobalKey而无法继续追踪手势事件。
  • GlobalKey提供了访问其关联的Element和State的方法。

下面看下其源码:

abstract class GlobalKey<T extends State<StatefulWidget>> extends Key {
  ///这里的debugLabel仅仅为了debug时使用
  factory GlobalKey({ String? debugLabel }) => LabeledGlobalKey<T>(debugLabel);


  ///给子类使用的
  const GlobalKey.constructor() : super.empty();


  Element? get _currentElement => WidgetsBinding.instance!.buildOwner!._globalKeyRegistry[this];


  BuildContext? get currentContext => _currentElement;


  Widget? get currentWidget => _currentElement?.widget;


  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;
 

其和Key类差不多,也有一个工厂构造函数,默认创建的是LabeledGlobalKey,其构造函数的debugLabel仅仅是为了debug时使用,并不会用来标识element。

如何获取其关联的element?从源码来看,其直接访问的是BuildOwner里用来保存GlobalKey和Element对应关系的map。获取到了其关联的element,那么就能获取到其对应的widget以及state,详细的可以看上面的源码。

需要注意的是其并没有重写和hashCode方法,构造函数也没有被const修饰,这也就使LabeledGlobalKey天然就是全局唯一的。

LabeledGlobalKey

这是GlobalKey的默认实现,内部仅有一个debugLabel属性,其他的也没啥。

class LabeledGlobalKey<T extends State<StatefulWidget>> extends GlobalKey<T> {
  // ignore: prefer_const_constructors_in_immutables , never use const for this class
  LabeledGlobalKey(this._debugLabel) : super.constructor();


  final String? _debugLabel;
}

GlobalObjectKey

class GlobalObjectKey<T extends State<StatefulWidget>> extends GlobalKey<T> {
  const GlobalObjectKey(this.value) : super.constructor();


  final Object value;


  @override
  bool operator ==(Object other) {
    if (other.runtimeType != runtimeType)
      return false;
    return other is GlobalObjectKey<T>
        && identical(other.value, value);
  }


  @override
  int get hashCode => identityHashCode(value);

特殊的GlobalKey,重写了==和hashCode方法,内部维护了一个Object对象,通过判断此Object是否指向同一块内存地址来判断两个GlobalObjectKey是否相等。

GlobalKey被要求全局唯一,其默认实现LabeledGloalKey因为其并没有重写==和hashCode方法,也不支持const构造函数,所以天然是全局唯一的。但是GlobalObjectKey不然,如果有两个或者多个地方使用到了拥有同一个Object的GlobalObjectKey,那么就不能保证其全局唯一性,造成程序出错。此时,可以继承GlobalObjectKey,实现一个private的内部类,比如:

class _MyGlobalObjectKey extends GlobalObjectKey {
  const _MyGlobalObjectKey(Object value) : super(value);
}

总结

  • Flutter里的key分为两类,一类是LocalKey,实现类有ValueKey、ObjectKey、UniqueKey;一类是GlobalKey,实现类有LabeledGlobalKey、GlobalObjectKey。
  • Key是所有keys类的基类,其默认实现是String类型的ValueKey。
  • 相同parent下的key是不能一样的,比如不能再同一个page里使用VlaueKey(1),但是不同parent下是可以存在一样的key的,比如在两个界面里都使用ValueKey(1)。
  • UniqueKey只和自己相等,其并没有重写==和hashCode方法,也没有const修饰的构造函数。当调用Element的updateChild方法时,Widget.canUpdate肯定返回false,所以如果你想让widget每次都去创建新的element而不复用old element,那么就给此widget使用UniqueKey。
  • GlobalKey的默认实现是LabeledGlobalKey,其没有实现==和hashCode方法,也没有const修饰的构造函数,所以肯定能保证其全局唯一性。
  • 所有的GlobalKey都保存在BuildOwner类中,其内部维护了一个map用来保存GlobalKey与其对应的Element。
  • GlobalObjectKey是特殊的GlobalKey,内部维护了一个Object属性,并实现了==和hashCode方法,通过判断runtimeType以及Object属性是否一致来判断两个GlobalObjectKey是否相等。
  • 使用GlobalObjectKey时,为了保证GlobalObjectKey的全局唯一性,最佳实践是继承自GlobalObjectKey实现一个private的内部类,可以有效避免多人开发时可能造成的GlobalObjectKey冲突的问题。

作者:京东物流 沈明亮

内容来源:京东云开发者社区

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/562080.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Apache Hudi 在袋鼠云数据湖平台的设计与实践

在大数据处理中&#xff0c;实时数据分析是一个重要的需求。随着数据量的不断增长&#xff0c;对于实时分析的挑战也在不断加大&#xff0c;传统的批处理方式已经不能满足实时数据处理的需求&#xff0c;需要一种更加高效的技术来解决这个问题。Apache Hudi&#xff08;Hadoop …

安科瑞对于热继电器对电动机保护的探讨

安科瑞 徐浩竣 江苏安科瑞电器制造有限公司 zx acrelxhj 摘要:电动机烧毁是每一个生产企业都无法回避的现象&#xff0c;怎样加强电动机保护&#xff0c;使生产工艺系统的稳定&#xff0c;减少企业非正常停机时间。电动机保护成为电气技术人员一个重要课题。因此&#xff0c…

嵌入式 QT QListWidget 显示列表视图的小部件类

目录 1. 添加对象 2. 设置间距 3. 获取内容 4. 删除对象 5.更改对象内容 在Qt框架中&#xff0c;QListWidget是一个用于显示列表视图的小部件类。它提供了一种方便的方式来显示和管理项目列表。QListWidget可以显示文本、图像和其他自定义的项目项&#xff0c;并允许用户进…

Parrot OS 5.3已经发布并可普遍下载

导读Parrot Security近日宣布&#xff0c;Parrot OS 5.3已经发布并可普遍下载&#xff0c;这是这个基于Debian的、面向红客和渗透测试者的、以安全为重点的发行版的最新稳定版本。 Parrot OS 5.3是Parrot OS 5 “Electro Ara “系列的第三部&#xff0c;在Parrot OS 5.2之后两个…

私有化部署即时通讯为什么更安全

即时通讯作为企业沟通工具&#xff0c;在企业的内部沟通和外部交流中发挥着越来越重要的作用。同时&#xff0c;企业即时通讯在提升企业内部效率的同时&#xff0c;也面临着巨大的安全威胁。 根据数据显示&#xff0c;全球有超过4亿人在使用 IM。而其中因用户隐私泄露导致的数据…

十一、数据仓库详细介绍(应用)

这是数据仓库详细介绍的最后一篇&#xff0c;后续还会在补充一些&#xff0c;把遗漏的或者没讲清楚的追加进来。 1. 前言 数据仓库是一种数据管理的方法论&#xff0c;理论概念很早就提出来了&#xff0c;而且各个行业都有广泛深入的应用。因此到目前为止该方法论的理论和实践体…

Taro小程序富文本解析4种方法

1. Taro组件rich-text 优点:使用极其方便,引用一下就行了。缺点:不支持视频,放弃!2. wxParse https://github.com/icindy/wxParse 优点:支持样式,视频缺点:进入页面图片会有由大变正常,太影响了吧。3. taro-parse https://taro-ext.jd.com/plugin/view/5e61f2acb33351…

【Netty】Netty 概述(一)

文章目录 前言一、Java原生API之痛二、Netty的优势2.1 非阻塞 I/O2.2 丰富的协议2.3 异步和事件驱动2.4 精心设计的API2.5 丰富的缓冲实现2.6 高效的网络传输 三、Netty 核心概念3.1 核心组件3.1.1 事件模型3.1.2 字节缓冲区3.1.3 通信API 3.2 传输服务3.2.1 NIO3.2.2 epoll3.2…

让数据背后的那些话创造价值 | 数据增长

从行业背景而言&#xff0c;流量红利逐渐消失&#xff0c;野蛮生长的互联网时代接近尾声。传统的烧钱模式、靠体力投放的形式日渐乏力。但是&#xff0c;企业总是要追求增长的。所以在行业大背景下&#xff0c;依靠技术和数据的力量寻求更科学、更高效的方法达成营销目标&#…

Windows系统数据结构——最小生成树、Prim算法和Kruskal算法

我是荔园微风&#xff0c;作为一名在IT界整整25年的老兵&#xff0c;今天总结一下Windows系统数据结构——最小生成树、Prim算法和Kruskal算法。 我在各在论坛看了很多相关帖子&#xff0c;发现一个简单的问题都被复杂化了。最小生成树、Prim算法和Kruskal算法真的没有大家想的…

【JavaSE】Java基础语法(五):数组详解

文章目录 &#x1f378;1.1 数组介绍&#x1f378;1.2 数组的动态初始化1.2.1 什么是动态初始化1.2.2 动态初始化格式&#x1f378;1.3 数组元素访问1.3.1 什么是索引1.3.2 访问数组元素格式1.3.3 示例代码 &#x1f378;1.4 内存分配1.4.1 内存概述1.4.2 java中的内存分配 &am…

Ubuntu crontab 遇到的sh脚本一些问题(手动执行可以,自动执行不行)

问题一&#xff1a; 问题描述&#xff1a; 在写一个脚本循环时候&#xff0c;出现“let:not found”,这是因为在ubuntu默认是指向bin/dash解释器的,dash是阉割版的bash,其功能远没有bash强大和丰富.并且dash不支持let和i等功能. 解决办法&#xff1a; 打开一个终端输入&#xf…

springboot基于Java的校园二手物品交易平台jspm9qw4i

本基于Java的校园二手物品交易平台采用Java语言和Jsp技术&#xff0c;框架采用SPRINGBOOT&#xff0c;搭配Mysql数据库&#xff0c;运行在Idea里。本系统针对校园二手商品的交易而开发&#xff0c;提供管理员、学生、学生二手三种角色的服务。总的功能包括商品的查询、商品的购…

基于html+css的图展示89

准备项目 项目开发工具 Visual Studio Code 1.44.2 版本: 1.44.2 提交: ff915844119ce9485abfe8aa9076ec76b5300ddd 日期: 2020-04-16T16:36:23.138Z Electron: 7.1.11 Chrome: 78.0.3904.130 Node.js: 12.8.1 V8: 7.8.279.23-electron.0 OS: Windows_NT x64 10.0.19044 项目…

【六袆 - Redis】Redis内存数据库;redis数据结构;redis文档

Redis 关于redis 官方文档&#xff1a; https://redis.io/docs/about/ https://redis.com/redis-enterprise/data-structures/ 关于redis Redis: 是一个开源&#xff08;BSD 许可&#xff09;内存数据结构存储&#xff0c;用作数据库、缓存、消息代理和流引擎。Redis提供数据结…

CNVD - 5000w通用产品的收集方法

本文转载于&#xff1a;https://mp.weixin.qq.com/s?__bizMzg5OTY2NjUxMw&mid2247507214&idx1&sn0e6df46ee930cb35ab0650867cef8af5&chksmc04d5a30f73ad3261a6fa6a8cb8c4ddc4ee8fac2a58f495c05030adc2d27e3ead65264f24f75&mpshare1&scene23&srcid…

MySQL业务并发减数量,数量未减

业务背景 最近在折腾老系统&#xff0c;折腾了好久&#xff0c;发现一个数据库问题&#xff0c;用户点赞数量&#xff0c;如果用户取消点赞情况下&#xff0c;正常情况10次取消数据库都返回成功&#xff0c;但其中有2次没有取消。 数据库场景 在MySQL中看下面一个场景。 业务…

jQuery操作练习-隔行变色

<!DOCTYPE HTML> <html> <head> <meta http-equiv"Content-Type" content"text/html; charsetUTF-8"> <title>jQuery操作练习-隔行变色</title> <script type"text/javascript&q…

越来越好玩,用ChatGPT+Python 做有声小说!

菜鸟学Python-第623篇原创 现在我们几百人的会员群已经玩的越来越高级了&#xff0c;利用chatgpt花色玩法&#xff01;有玩百度问一问每天早上6点多起来抢单的&#xff0c;有玩微信机器人帮人部署接单的&#xff0c;也有玩咸鱼去给大学生指导论文的&#xff01; 利用chatgpt4玩…

USB设备连接和枚举

https://space.bilibili.com/489340606/channel/collectiondetail?sid896957 以下图片来自于沁恒微电子蔡亮工程师的讲课&#xff0c;对USB开发入门很有好处。 1. USB主设备和从设备 2. USB设备按功能分类 3. USB功能设备内部架构 可以有多个配置&#xff0c;但同一个时间只…