当前位置: 首页 > news >正文

flutter的key在widget list的作用以及必要性

在做一个flutter的项目过程中,体会到了key在widget渲染中发挥的作用以及开发者需要避免的坑,在次提出共勉

与react的diff算法类似(vue的也是),flutter在渲染同级类似的item的时候也是采用key值判断来重新渲染的。
因此如果你的业务中如果包含了一个同类型的widget list,记得要为每个widget加上一个key,否则flutter也是默认使用item在list的index作为key,这样就会遇到下面这个常见的坑了:

假设原本有一个list,

list = [widget0: {key: 0, data: 10 ...}, widget1: {key: 1, data: 20 ...}, widget2: {key: 2, data: 30 ...}]

对应的视图为:

图片描述

现在我们删除中间的widget1,list更新成:

list = [widget0: {key: 0, data: 10 ...}, widget2: {key: 1, data: 30 ...}]

对应的视图为:

图片描述

可以看到,widget1没有被删除,而是widget2被删除了,这显示是错误的。

原因便在于:
虽然widget1在list中确实删除了,但后来顶上的widget2的key(在数组的index)变成了1
而当fultter执行diff算法的时候,是根据前后widget的key是否变化来判断的

在这个场景下,"key = 1"这个key仍然存在,所以flutter不会去重新渲染上一帧key为1的widget1;而"key = 2"这个key删除了,flutter就删除掉上一帧key为2的widget2。

所以为了不使用默认的数组index作为key,我们为每个widget加上一个uuid,问题就解决了:

图片描述

注:
如果widget是stateless的,不加key也能够正确删除。
可能的原因大概是stageless的widget每帧都需要重新绘制,因此不管key变不变化都是重绘的,而stateful则是根据state有没有变化来重绘,这样由于key没有变所以state也没有改变。
但是作为开发者的我们,都应该养成添加key的习惯。

如有错误,还望指出!

相关文章:

  • 深入 Nginx 之配置篇
  • 干货!手把手教你打造自己的seo生态资源,让排名不在是梦想
  • Mayor's posters(线段树+离散化)
  • yum安装openstack
  • Python学习笔记_读Excel去重
  • [LOJ161] 仙人掌计数
  • 打造性感好用的 VS Code 编辑器
  • 性能测试性能分析
  • JAVA 集合(个人总结)
  • 华为云:实现高可用的负载均衡web集群
  • 又火了,小米MIX 3在堪称设计界的奥斯卡荣获2019德国iF设计奖
  • 排序(1):冒泡排序
  • Spring boot (四) 配置文件讲解
  • Mac 上flink的安装与启动
  • 17LaTeX学习系列之---LaTeX的版面设计
  • IE9 : DOM Exception: INVALID_CHARACTER_ERR (5)
  • Angular Elements 及其运作原理
  • go语言学习初探(一)
  • JavaScript-Array类型
  • Nodejs和JavaWeb协助开发
  • 翻译--Thinking in React
  • 更好理解的面向对象的Javascript 1 —— 动态类型和多态
  • 技术攻略】php设计模式(一):简介及创建型模式
  • 理解IaaS, PaaS, SaaS等云模型 (Cloud Models)
  • 排序算法学习笔记
  • 前端面试之闭包
  • 说说动画卡顿的解决方案
  • 微信小程序:实现悬浮返回和分享按钮
  • 源码之下无秘密 ── 做最好的 Netty 源码分析教程
  • 好程序员大数据教程Hadoop全分布安装(非HA)
  • 你学不懂C语言,是因为不懂编写C程序的7个步骤 ...
  • # Pytorch 中可以直接调用的Loss Functions总结:
  • #《AI中文版》V3 第 1 章 概述
  • (搬运以学习)flask 上下文的实现
  • (附源码)ssm基于jsp高校选课系统 毕业设计 291627
  • (附源码)ssm教师工作量核算统计系统 毕业设计 162307
  • (译) 函数式 JS #1:简介
  • (转)原始图像数据和PDF中的图像数据
  • (转载)(官方)UE4--图像编程----着色器开发
  • *** 2003
  • .form文件_SSM框架文件上传篇
  • .net core IResultFilter 的 OnResultExecuted和OnResultExecuting的区别
  • .NET MVC第五章、模型绑定获取表单数据
  • .netcore如何运行环境安装到Linux服务器
  • .NET业务框架的构建
  • /etc/apt/sources.list 和 /etc/apt/sources.list.d
  • :O)修改linux硬件时间
  • [AIGC] 如何建立和优化你的工作流?
  • [C#]猫叫人醒老鼠跑 C#的委托及事件
  • [c++] C++多态(虚函数和虚继承)
  • [corCTF 2022] CoRJail: From Null Byte Overflow To Docker Escape
  • [ESP32 IDF]web server
  • [IE6 only]关于Flash/Flex,返回数据产生流错误Error #2032的解决方式
  • [Java、Android面试]_05_内存泄漏和内存溢出
  • [javaSE] GUI(事件监听机制)