flutter ListView Item复用源码解析
Flutter 的 ListView
的 Item 复用机制是其高性能列表渲染的核心,底层实现依赖于 Flutter 的渲染管线、Element
树和 Widget
树的协调机制。以下是 ListView
复用机制的源码级解析,结合关键类和核心逻辑进行分析。
1. ListView 的底层结构
ListView
的复用机制是通过 Sliver
系列组件实现的,具体在 SliverList
和 SliverChildBuilderDelegate
中完成。以下是关键类的关系:
-
ListView
:基于ScrollView
,内部使用SliverList
实现滚动布局。 -
SliverList
:继承自SliverMultiBoxAdaptorWidget
,负责管理子组件的布局和复用。 -
SliverChildBuilderDelegate
:实现SliverChildDelegate
接口,负责按需构建子组件(即itemBuilder
)。
2. 复用机制的核心:SliverChildDelegate
ListView.builder
使用的 SliverChildBuilderDelegate
是复用机制的核心。其核心逻辑在以下两个方法中:
(1) build
方法:按需构建子组件
当用户滚动时,SliverList
会通过 SliverChildDelegate
的 build
方法请求可见区域的子组件。例如:
// SliverChildBuilderDelegate 的 build 方法
Widget build(BuildContext context, int index) {return widget.itemBuilder(context, index); // 调用用户定义的 itemBuilder
}
关键点:build
方法仅在需要显示某个子组件时被调用(懒加载)。
(2) createChild
和 didFinishLayout
:复用子组件
在 RenderSliverList
(SliverList
的渲染对象)中,滚动时会触发以下逻辑:
// RenderSliverList 的 performLayout 方法
void performLayout() {// 计算可见区域的子组件范围final int firstIndex = _calculateFirstIndex();final int lastIndex = _calculateLastIndex();// 回收不可见的子组件collectGarbage(...);// 按需创建或复用子组件for (int index = firstIndex; index <= lastIndex; index++) {if (child == null) {child = createChild(index); // 创建或复用子组件}// 布局子组件...}
}
-
createChild
:尝试从缓存池(childManager
)中获取可复用的子组件。 -
collectGarbage
:将滑出屏幕的子组件放入缓存池,供后续复用。
3. Element 树的复用
Flutter 的复用机制不仅仅是对 Widget
的复用,更重要的是对 Element
树的复用。Element
是 Widget
和 RenderObject
之间的桥梁,负责管理状态和生命周期。
(1) Element
的复用条件
当 ListView
滚动时,Flutter 会检查新旧 Widget
的类型和 Key
是否一致:
// Element 的 updateChild 方法
Element updateChild(Element child, Widget newWidget, dynamic newSlot) {if (newWidget == null) {// 移除旧 Elementreturn null;}if (child != null) {// 如果新旧 Widget 类型和 Key 匹配,复用 Elementif (child.widget == newWidget) {return child;}if (Widget.canUpdate(child.widget, newWidget)) {child.update(newWidget);return child;}}// 创建新的 Elementreturn inflateWidget(newWidget, newSlot);
}
关键点:如果新旧 Widget
的 runtimeType
和 Key
相同,则复用 Element
,否则销毁旧的并创建新的。
(2) Widget
的不可变性
由于 Widget
是不可变的(immutable),复用时 Element
会直接更新到新的 Widget
实例,但底层的 RenderObject
(如布局和绘制信息)可能被复用。
4. 缓存池:ChildVendor
在 SliverMultiBoxAdaptorWidget
中,ChildVendor
负责管理子组件的缓存池:
// ChildVendor 的 collectGarbage 方法
void collectGarbage(int leadingGarbage, int trailingGarbage) {// 将超出可见范围的子组件放入缓存池while (leadingGarbage > 0) {final Element element = _children.removeAt(0);_detachChild(element);leadingGarbage--;}// 类似处理 trailingGarbage...
}
-
缓存策略:缓存池的大小受
cacheExtent
参数控制(默认缓存一屏外的子组件)。
5. 性能优化关键点
(1) Key 的作用
如果列表项的顺序可能变化,或需要保持状态,必须为每个子组件指定唯一的 Key
。例如:
ListView.builder(itemBuilder: (context, index) {return MyItem(key: ValueKey(items[index].id)); // 唯一 Key},
);
-
源码中的 Key 匹配:在
Element
的updateChild
方法中,Key
是判断是否复用的关键条件。
static bool canUpdate(Widget oldWidget, Widget newWidget) {return oldWidget.runtimeType == newWidget.runtimeType&& oldWidget.key == newWidget.key;}
(2) 避免不必要的重建
-
使用
const
构造函数减少Widget
实例的创建。 -
避免在
itemBuilder
中创建新的闭包或对象。
6. 源码流程总结
-
滚动触发布局:用户滚动时,
RenderSliverList
的performLayout
被调用。 -
计算可见范围:确定需要显示的子组件索引(
firstIndex
和lastIndex
)。 -
回收不可见子组件:通过
collectGarbage
将滑出屏幕的子组件放入缓存池。 -
复用或创建子组件:通过
createChild
从缓存池获取或新建子组件。 -
更新 Element 树:检查新旧
Widget
是否可复用,更新Element
和RenderObject
。
总结
Flutter 的 ListView
复用机制通过以下核心设计实现高性能:
-
懒加载:仅构建可见区域的子组件。
-
Element 复用:通过
Key
和Widget
类型匹配复用Element
。 -
缓存池:通过
ChildVendor
管理滑出屏幕的子组件。 -
不可变 Widget:快速更新
Element
,复用底层的RenderObject
。
通过理解源码逻辑,开发者可以更好地优化列表性能(如合理使用 Key
、避免不必要的重建)。
相关文章:
flutter ListView Item复用源码解析
Flutter 的 ListView 的 Item 复用机制是其高性能列表渲染的核心,底层实现依赖于 Flutter 的渲染管线、Element 树和 Widget 树的协调机制。以下是 ListView 复用机制的源码级解析,结合关键类和核心逻辑进行分析。 1. ListView 的底层结构 ListView 的复…...
基于java手机销售网站设计和实现(LW+源码+讲解)
专注于大学生项目实战开发,讲解,毕业答疑辅导,欢迎高校老师/同行前辈交流合作✌。 技术范围:SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容:…...
HTML 左右联动高亮示例
HTML 左右联动高亮示例 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>左右联动高亮示例</titl…...
如何本地部署DeepSeek
第一步:安装ollama https://ollama.com/download 打开官网,选择对应版本 第二步:选择合适的模型 https://ollama.com/ 模型名称中的 1.5B、7B、8B 等数字代表模型的参数量(Parameters),其中 B 是英文 B…...
虚拟机+Docker配置主机代理和常见配置
完整配置流程如下: 配置虚拟机使用宿主机代理: # 设置环境变量(宿主机IP为192.168.100.1,代理端口7890) export http_proxyhttp://192.168.100.1:7890 export https_proxyhttp://192.168.100.1:7890# 测试代理是否生…...
996引擎-问题处理:盟重传送石问题
996引擎-问题处理:盟重传送石问题 问题解决方案补充:回城卷参考资料问题 今天添加了个新地图,由于这个版本只有盟重传送石没设计回城卷。 所以怎么搞都回不到新地图的回城点。(当时也是懵逼了都忘记它叫 盟重 传送石`) 分析 先看一下道具表的配置。 [@StdModeFuncX] 表示…...
从零到一学习c++(基础篇--筑基期七-vector与迭代器)
从零到一学习C(基础篇) 作者:羡鱼肘子 温馨提示1:本篇是记录我的学习经历,会有不少片面的认知,万分期待您的指正。 温馨提示2:本篇会尽量用更加通俗的语言介绍c的基础,用通俗的语言去…...
PKI及SSL协议分析
PKI的基本组成,完整的PKI系统必须具有权威认证机构(CA)、数字证书库、密钥备份及恢复系统、证书作废系统、应用接口(API)等基本构成部分,构建PKI也将围绕着这五大系统来着手构建。 任务一:搭建CA服务器 本任务初步了…...
请解释 JavaScript 中的函数式编程,优缺点是什么?
一、对JavaScript函数式编程的理解 函数式编程(Functional Programming,FP)是一种编程范式,它将计算视为数学函数的求值,并避免改变状态和可变数据。 在JavaScript中,函数式编程具有以下几个关键特性&…...
WPS接入DeepSeek模型
1.wps 下载安装 WPS-支持多人在线协作编辑Word、Excel和PPT文档_WPS官方网站 (最好是安装最新的wps) 2.offieceAi工具下载安装 软件下载 | OfficeAI助手 下载后安装下载下来的两个工具。安装路径可以自行修改 3.打开WPS,点击文件-》 选项-》信任中心 勾…...
头条百度批量采集软件说明文档
旧版说明文档《头条号文章批量采集软件4.0版本说明文档!头条/微头条文章批量采集》 头条的采集软件已经更新了好多个版本了,一直没有做详细的介绍文档,最近更新了一些功能进去,一块来写一下说明文档。 1、主界面 2、头条作者采集…...
网络安全架构师怎么考 网络安全 架构
安全通信网络 随着现代技术的不断发展,等级保护对象通常通过网络实现资源共享和数据交互,当大量的设备连成网络后,网络安全成了最为关注的问题。按照“一个中心,三重防御”的纵深防御思想,边界外部通过广域网或城域网…...
Vue 3 30天精进之旅:Day 21 - 项目实践:打造功能完备的Todo应用
前言 经过前20天的学习,我们已经掌握了Vue 3的核心概念、组合式API、路由、状态管理等关键技术。今天将通过一个完整的项目实践——Todo应用,将所学知识融会贯通。我们将为Todo应用添加编辑、删除、过滤等进阶功能,并优化代码结构。 一、项目…...
2025年02月11日Github流行趋势
项目名称:unsloth 项目地址url:https://github.com/unslothai/unsloth项目语言:Python历史star数:27175今日star数:1024项目维护者:danielhanchen, shimmyshimmer, Erland366, Datta0, xyangk项目简介&…...
嵌入式硬件篇---原码、补码、反码
文章目录 前言简介八进制原码、反码、补码1. 原码规则示例问题 2. 反码规则示例问题 3. 补码规则示例优点 4. 补码的运算5. 总结 十六进制原码、反码、补码1. 十六进制的基本概念2. 十六进制的原码规则示例 3. 十六进制的反码规则示例 4. 十六进制的补码规则示例 5. 十六进制补…...
PCM与G711A互转
PCM与G711A互转 工具类(Java)调用方法(Kotlin) 工具类(Java) public class G711Code {private final static int SIGN_BIT 0x80;private final static int QUANT_MASK 0xf;private final static int SEG…...
MapReduce简单应用(三)——高级WordCount
目录 1. 高级WordCount1.1 IntWritable降序排列1.2 输入输出格式1.3 处理流程 2. 代码和结果2.1 pom.xml中依赖配置2.2 工具类util2.3 高级WordCount2.4 结果 参考 本文引用的Apache Hadoop源代码基于Apache许可证 2.0,详情请参阅 Apache许可证2.0。 1. 高级WordCo…...
C# 数据验证Regex
Regular Expression,简称 Regex,是一种用于匹配和处理文本的强大工具。它通过定义特定的模式,可以用来搜索、替换或提取字符串中的特定内容。 先引入命名空间 using System.Text.RegularExpressions; Intege(整数) 必须是正整数 //必须是正整数publi…...
Jenkins+gitee 搭建自动化部署
Jenkinsgitee 搭建自动化部署 环境说明: 软件版本备注CentOS8.5.2111JDK1.8.0_211Maven3.8.8git2.27.0Jenkins2.319最好选稳定版本,不然安装插件有点麻烦 一、安装Jenkins程序 1、到官网下载相应的版本war或者直接使用yum安装 Jenkins官网下载 直接…...
C/C++混合读入cin与scanf问题
因为C/C在某些时候是如此的融洽,以至于很多时候可能会混用,就比如 scanf与cin或getline(cin, ..)这是一个严肃的问题。因为随意混用,可能导致,在某些特殊时刻,读取混乱。所以本篇的意义就是为了缕清混用机制 一、scan…...
矩阵 NFC 碰一碰发视频源码搭建技术解析,支持OEM
一、引言 在移动互联与物联网飞速发展的当下,NFC(Near Field Communication,近场通信)技术凭借其便捷、快速的数据传输特性,在众多领域得到广泛应用。本文将深入探讨如何搭建矩阵 NFC 碰一碰发视频的源码,…...
Log4j定制JSON格式日志输出
1.前言 log4j是Java中一个强大的日志记录框架,通过简单的配置便可以在程序中进行日志打印与记录。关于log4j博主最近碰到一个需求,需要将程序运行过程中的日志按给定的json模板输出,本文记录一下log4j如何配置json格式的日志打印。 2.日志配…...
Spring依赖注入方式
写在前面:大家好!我是晴空๓。如果博客中有不足或者的错误的地方欢迎在评论区或者私信我指正,感谢大家的不吝赐教。我的唯一博客更新地址是:https://ac-fun.blog.csdn.net/。非常感谢大家的支持。一起加油,冲鸭&#x…...
【C++八股】什么是函数指针,如何定义和使⽤场景
函数指针是指向函数的指针变量,它存储的是一个函数的地址,允许通过指针间接调用函数。使用函数指针可以动态地选择和调用函数,或者将函数作为参数传递给其他函数。 1. 函数指针的定义 函数指针的定义与普通指针稍有不同。它需要声明指向特定…...
DeepSeek 入驻 Cursor —— 表现能否超越 Claude?
DeepSeek 刚刚在 Cursor 平台上线了它的两款模型:DeepSeek V3 和 R1。目前,许多开发者(包括我们在内)主要依赖 Claude 3.5 Sonnet(最新版本 claude-3-5-sonnet-20241022)作为主要语言模型,因此我…...
skynet-src/atomic.h:25:23: 致命错误:stdatomic.h:没有那个文件或目录
skynet-src/atomic.h:25:23: 致命错误:stdatomic.h:没有那个文件或目录 故事背景,又接了一个新项目,要搞开发环境啊。skyent的框架。ubuntu已经跑起来了,但是内网是centos的跑不起来。只能怀疑是环境问题了࿰…...
docker compose部署nexus
整个工具的代码都在Gitee或者Github地址内 gitee:solomon-parent: 这个项目主要是总结了工作上遇到的问题以及学习一些框架用于整合例如:rabbitMq、reids、Mqtt、S3协议的文件服务器、mongodb github:GitHub - ZeroNing/solomon-parent: 这个项目主要是…...
IBM服务器刀箱Blade安装Hyper-V Server 2019 操作系统
案例:刀箱某一blade,例如 blade 5 安装 Hyper-V Server 2019 操作系统(安装进硬盘) 刀箱USB插入安装系统U盘,登录192.168... IBM BlandeCenter Restart Blande 5,如果Restart 没反应,那就 Power Off Blade 然后再 Power On 重启后进入BIOS界面设置usb存储为开机启动项 …...
Python的顺序结构和循环结构
文章目录 一、条件语句(1)条件语句的定义(2)条件语句的语法(a)单分支 if(b)双分支 if-else(c)多分支 if-elif-elif-...-else (3)注意事…...
[python SQLAlchemy数据库操作入门]-30.掌握 SQLAlchemy:优雅应对数据库异常的艺术
哈喽,大家好,我是木头左! 捕获和处理 SQLAlchemy 异常 在实际应用中,需要根据不同的异常类型采取不同的处理策略。下面是一个示例,展示了如何捕获和处理 SQLAlchemy 的异常。 from sqlalchemy import create_engine, Column, Integer, String, exc from sqlalchemy.ext.…...
编译和链接【三】
文章目录 编译和链接【三】前言系列文章入口编译过程词法分析语法分析语义分析生成中间代码汇编链接 编译和链接【三】 前言 在我大一的时候, 我使用VC6.0对C语言程序进行编译链接和运行 , 然后我接触了VS, Qt creator等众多IDE,…...
11苍穹外卖之Apache ECharts(数据可视化图表、后端传数据)
课程内容 Apache ECharts 营业额统计 用户统计 订单统计 销量排名Top10 功能实现:数据统计 数据统计效果图: 1. Apache ECharts 1.1 介绍 Apache ECharts 是一款基于 Javascript 的数据可视化图表库,提供直观,生动&#…...
Grafana-使用Button修改MySQL数据库
背景 众所周知,Grafana是一个用来展示数据的平台,但是有时候还是会有需求说能不能有一个按钮,点击的时候再对数据库进行修改,从而达到更新数据的效果 经过多方查证,终于实现了一个简单的,点击button执行sq…...
C++11语法及库详解
目录 一、c11语法 1. 自动类型推导 (auto) 2. 基于范围的 for 循环 3. Lambda 表达式 4. 智能指针 5. 右值引用和移动语义 6. nullptr 关键字 7. constexpr 关键字 8. 初始化列表 9. std::thread 多线程支持 10. std::function 和 std::bind 11. std::unordered_map…...
数据库,数据表的增删改查操作
一.数据库的基本操作 (1)创建数据库 创建数据库就是在数据库系统中划分一块存储数据的空间,方便数据的分配、放置和管理。在MySQL中使用CREATE DATABASE命令创建数据库,语法格式如下: CREATE DATABASE数据库名称; 注:…...
Python——批量图片转PDF(GUI版本)
目录 专栏导读1、背景介绍2、库的安装3、核心代码4、完整代码总结专栏导读 🌸 欢迎来到Python办公自动化专栏—Python处理办公问题,解放您的双手 🏳️🌈 博客主页:请点击——> 一晌小贪欢的博客主页求关注 👍 该系列文章专栏:请点击——>Python办公自动化专…...
RocketMQ面试题:原理部分
🧑 博主简介:CSDN博客专家,历代文学网(PC端可以访问:https://literature.sinhy.com/#/?__c1000,移动端可微信小程序搜索“历代文学”)总架构师,15年工作经验,精通Java编…...
中间件-安装Minio-集成使用(ubantu-docker)
目录 1、安装docer 2、运行以下命令拉取MinIO的Docker镜像 3、检查当前所有Docker下载的镜像 4、创建目录 5、创建Minio容器并运行 6、SDK操作 FileUploader.java 1、安装docer 参考这篇:Linux安装Docker 2、运行以下命令拉取MinIO的Docker镜像 docker pull…...
vue3: const一个function怎么写呢?
问: 用ref或者reactive定一个一个const refCharts ref(function xxx (config){ xxxxx,xxxxx xxxx,xxxx })请问怎么写? 回答: 在 Vue 3 中,ref 和 reactive 是两种常用的响应式数据定义方式。ref 用于定义单个响应式对象或原始值…...
【JVM详解三】垃圾回收机制
一、对象是否存活 强引用:Object obj new Object(); 只要强引用还在,垃圾收集器永远不会回收掉被引用的对象。在不用对象的时将引用赋值为 null,能够帮助垃圾回收器回收对象。比如 ArrayList 的 clear() 方法实现。软引用(SoftRe…...
dbeaver 安装之后出现mysql连接异常问题
1.手动下载mysql驱动程序 参考文档DBeaver连接mysql驱动下载失败怎么办?-CSDN博客 2.添加对应的下载程序到dbeaver 【DBeaver】缺少mysql驱动_dbeaver连接mysql缺少驱动-CSDN博客 配置mysql 地址端口账户等即可使用...
Android Studio历史版本下载
Android Studio历史版本下载 历史版本所在网站: https://developer.android.google.cn/studio/archive 等待加载 1、(需要点击switch to english)然后出现Terms and conditions 2、滑到最下面,点击I agree to the terms,之后才会…...
【每日一题 | 2025】2.3 ~ 2.9
个人主页:GUIQU. 归属专栏:每日一题 文章目录 1. 【2.3】P8784 [蓝桥杯 2022 省 B] 积木画2. 【2.4】P8656 [蓝桥杯 2017 国 B] 对局匹配3. 【2.5】[ABC365D] AtCoder Janken 34. 【2.6】P8703 [蓝桥杯 2019 国 B] 最优包含5. 【2.7】P8624 [蓝桥杯 2015…...
国产编辑器EverEdit - 迷你查找
1 迷你查找 1.1 应用场景 某些场景下,用户不希望调出复杂的查找对话框,此时可以使用迷你查找窗口。 1.2 使用方法 选择主菜单查找 -> 迷你查找,或使用快捷键Ctrl Alt F,会在右上角弹出迷你查找窗口,如下图所示…...
制药行业 BI 可视化数据分析方案
一、行业背景 随着医药行业数字化转型的深入,企业积累了海量的数据,包括销售数据、生产数据、研发数据、市场数据等。如何利用这些数据,挖掘其价值,为企业决策提供支持,成为医药企业面临的重大挑战。在当今竞争激烈的…...
第40天:Web开发-JS应用VueJS框架Vite构建启动打包渲染XSS源码泄露代码审计
#知识点 1、安全开发-VueJS-搭建启动&打包安全 2、安全开发-VueJS-源码泄漏&代码审计 一、Vue搭建创建项目启动项目 1、Vue 框架搭建->基于nodejs搭建,安装nodejs即可 参考:https://cn.vuejs.org/ 已安装18.3或更高版本的Node.js 2、Vue 创建…...
2.10学习总结
今天接着看了数据结构,但是跟指针有关的看不懂(万恶的指针),写了考试的补题。 #include <stdio.h> #include <stdlib.h> int a[1000005]; int main() {int n,i,x0;scanf("%d",&n);for(i1;i<n;i){x;i…...
MySQL 中可以通过添加主键来节省磁盘空间吗?(译文)
从历史上看,MySQL 不需要在表上定义显式主键,直到今天默认都是这样。不过,这种要求是通过两种复制方法施加的:组复制和 Percona XtraDB 集群 (PXC),默认情况下不允许使用没有主键的表。对于缺少…...
Django在终端创建项目(pycharm Windows)
1.选择目录 选择或新建一个文件夹,作为项目保存的地方 2.右键在终端打开 3.确定django-admin.exe安装位置 找到自己安装django时,django-admin.exe安装的位置,例如 4.运行命令 使用django-admin.exe的绝对路径,在刚才打开的终端…...
IDEA接入DeepSeek
IDEA 目前有多个途径可以接入deepseek,比如CodeGPT或者Continue,这里借助CodeGPT插件接入,CodeGPT目前用的人最多,相对更稳定 一、安装 1.安装CodeGPT idea插件市场找到CodeGPT并安装 2.创建API Key 进入deepseek官网…...