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

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:复用子组件

在 RenderSliverListSliverList 的渲染对象)中,滚动时会触发以下逻辑:

// 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. 源码流程总结

  1. 滚动触发布局:用户滚动时,RenderSliverList 的 performLayout 被调用。

  2. 计算可见范围:确定需要显示的子组件索引(firstIndex 和 lastIndex)。

  3. 回收不可见子组件:通过 collectGarbage 将滑出屏幕的子组件放入缓存池。

  4. 复用或创建子组件:通过 createChild 从缓存池获取或新建子组件。

  5. 更新 Element 树:检查新旧 Widget 是否可复用,更新 Element 和 RenderObject


总结

Flutter 的 ListView 复用机制通过以下核心设计实现高性能:

  • 懒加载:仅构建可见区域的子组件。

  • Element 复用:通过 Key 和 Widget 类型匹配复用 Element

  • 缓存池:通过 ChildVendor 管理滑出屏幕的子组件。

  • 不可变 Widget:快速更新 Element,复用底层的 RenderObject

通过理解源码逻辑,开发者可以更好地优化列表性能(如合理使用 Key、避免不必要的重建)。

相关文章:

flutter ListView Item复用源码解析

Flutter 的 ListView 的 Item 复用机制是其高性能列表渲染的核心&#xff0c;底层实现依赖于 Flutter 的渲染管线、Element 树和 Widget 树的协调机制。以下是 ListView 复用机制的源码级解析&#xff0c;结合关键类和核心逻辑进行分析。 1. ListView 的底层结构 ListView 的复…...

Spring Boot 配置 Mybatis 读写分离

JPA 的读写分离配置不能应用在 Mybatis 上, 所以 Mybatis 要单独处理 为了不影响原有代码, 使用了增加拦截器的方式, 在拦截器里根据 SQL 的 CRUD 来路由到不同的数据源 需要单独增加Mybatis的配置 Beanpublic SqlSessionFactory sqlSessionFactory(DataSource dataSource) t…...

网络初识-

网络的相关概念 一、局域网和广域网 将各种计算机、外部设备等相互连接起来&#xff0c;实现在这个范围内数据通信和资源共享的计算机网络。它的覆盖范围通常在几百米到几公里之内。例如&#xff0c;一个小型企业的办公室&#xff0c;通过交换机将多台电脑连接在一起&#xf…...

DNS污染:网络世界的“隐形劫持”与防御

在互联网的底层架构中&#xff0c;DNS&#xff08;域名系统&#xff09;如同数字世界的“导航员”&#xff0c;将用户输入的域名翻译成机器可读的IP地址。然而&#xff0c;DNS污染&#xff08;DNS Poisoning&#xff09;正像一场无声的“地址篡改”危机&#xff0c;威胁着全球网…...

MQTT(Message Queuing Telemetry Transport)协议(三)

主题是什么 2. TCP 协议封装 tcp.c #include <stdio.h> #include <stdlib.h> #include <string.h> #include <unistd.h> #include <arpa/inet.h> #include <sys/socket.h>// 建立 TCP 连接 int tcp_connect(const char *server_ip, int s…...

多核cpu与时间片多线程的问题

在多核处理器中&#xff0c;每个核心可以独立运行一个线程。操作系统负责管理和调度这些线程&#xff0c;以确保高效利用处理器资源。下面详细解释如何获取时间片以及四个线程如何在四个核心上同时工作。 ### 时间片和调度 #### 1. 时间片&#xff08;Time Slice&#xff09;…...

电脑出现蓝屏英文怎么办?查看修复过程

电脑出现蓝屏英文是一种常见的电脑故障&#xff0c;它通常表示电脑遇到了严重的错误&#xff0c;需要停止运行以防止进一步的损坏。电脑蓝屏英文的原因可能有很多&#xff0c;比如硬件故障、驱动程序错误、系统文件损坏、病毒感染等。那么&#xff0c;当电脑出现蓝屏英文时&…...

安卓基础(第一集)

SharedPreferences&#xff08;本地存储简单数据&#xff09; 在 Android 中&#xff0c;SharedPreferences 用于存储小型数据。 &#xff08;1&#xff09;存储数据 // 获取 SharedPreferences 对象 SharedPreferences sharedPreferences getSharedPreferences("MyPre…...

【从零开始入门unity游戏开发之——C#篇56】C#补充知识点——模式匹配

考虑到每个人基础可能不一样,且并不是所有人都有同时做2D、3D开发的需求,所以我把 【零基础入门unity游戏开发】 分为成了C#篇、unity通用篇、unity3D篇、unity2D篇。 【C#篇】:主要讲解C#的基础语法,包括变量、数据类型、运算符、流程控制、面向对象等,适合没有编程基础的…...

【数据可视化-16】珍爱网上海注册者情况分析

&#x1f9d1; 博主简介&#xff1a;曾任某智慧城市类企业算法总监&#xff0c;目前在美国市场的物流公司从事高级算法工程师一职&#xff0c;深耕人工智能领域&#xff0c;精通python数据挖掘、可视化、机器学习等&#xff0c;发表过AI相关的专利并多次在AI类比赛中获奖。CSDN…...

c/c++蓝桥杯经典编程题100道(21)背包问题

背包问题 ->返回c/c蓝桥杯经典编程题100道-目录 目录 背包问题 一、题型解释 二、例题问题描述 三、C语言实现 解法1&#xff1a;0-1背包&#xff08;基础动态规划&#xff0c;难度★&#xff09; 解法2&#xff1a;0-1背包&#xff08;空间优化版&#xff0c;难度★…...

电赛DEEPSEEK

以下是针对竞赛题目的深度优化方案&#xff0c;重点解决频率接近时的滤波难题和相位测量精度问题&#xff1a; 以下是使用NI Multisim 14.3实现本项目的详细解决方案&#xff1a; 一、基础要求实现方案&#xff08;模块化设计&#xff09; 1. 双频信号发生电路 电路结构&…...

VSOMEIP ROUTING应用和CLIENT应用之间交互的消息

#define VSOMEIP_ASSIGN_CLIENT 0x00 // client应用请求分配client_id #define VSOMEIP_ASSIGN_CLIENT_ACK 0x01 // routing应用返回分配的client_id #define VSOMEIP_REGISTER_APPLICATION 0x02 // client应用注册someip应用 #…...

HTML之基本布局div|span

HTML基本布局使用 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"width<device-width>, initial-scale1.0"><title>布局</title> <…...

Linux下学【MySQL】常用函数助你成为数据库大师~(配sql+实操图+案例巩固 通俗易懂版~)

绪论​ 每日激励&#xff1a;“唯有努力&#xff0c;才能进步” 绪论​&#xff1a; 本章是MySQL中常见的函数&#xff0c;利用好函数能很大的帮助我们提高MySQL使用效率&#xff0c;也能很好处理一些情况&#xff0c;如字符串的拼接&#xff0c;字符串的获取&#xff0c;进制…...

【Rabbitmq篇】高级特性----TTL,死信队列,延迟队列

目录 一.TTL ???1.设置消息的TTL 2.设置队列的TTL 3.俩者区别? 二.死信队列 定义&#xff1a; 消息成为死信的原因&#xff1a; 1.消息被拒绝&#xff08;basic.reject 或 basic.nack&#xff09; 2.消息过期&#xff08;TTL&#xff09; 3.队列达到最大长度? …...

机器学习赋能的智能光子学器件系统研究与应用

机器学习赋能的智能光子学器件系统研究与应用 时间&#xff1a; 2025年03月29日-03月30日 2025年04月05日-04月06日 机器学习赋能的光子学器件与系统&#xff1a;从创新设计到前沿应用 课程针对光子学方面的从业科研人员及开发者&#xff0c;希望了解和实践在集成光学/空间…...

尚硅谷课程【笔记】——大数据之Linux【三】

课程视频链接&#xff1a;尚硅谷大数据Linux课程 七、定时任务调度 任务调度&#xff1a;指系统在某个时间执行的特定的命令或程序。 1&#xff09;系统工作&#xff1a;有些重要的工作必须周而复始地执行。 2&#xff09;个别用户工作&#xff1a;用户可能希望在某些特定的时…...

Visual Studio踩过的坑

统计Unity项目代码行数 编辑-查找和替换-在文件中查找 查找内容输入 b*[^:b#/].*$ 勾选“使用正则表达式” 文件类型留空 也有网友做了指定&#xff0c;供参考 !*\bin\*;!*\obj\*;!*\.*\*!*.meta;!*.prefab;!*.unity 打开Unity的项目 注意&#xff1a;只是看&#xff0…...

教程 | MySQL 基本指令指南(附MySQL软件包)

此前已经发布了安装教程安装教程&#xff0c;现在让我们来学习一下MySQL的基本指令。 一、数据库连接与退出 连接本地数据库 mysql -uroot -p # 输入后回车&#xff0c;按提示输入密码&#xff08;密码输入不可见&#xff09;若需隐藏密码显示&#xff0c;可使用&#xff1…...

Xshell远程连接Kali(默认 | 私钥)Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

NLP学习路线图(二十三):长短期记忆网络(LSTM)

在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...

多模态大语言模型arxiv论文略读(108)

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

智能分布式爬虫的数据处理流水线优化:基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

AI,如何重构理解、匹配与决策?

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

宇树科技,改名了!

提到国内具身智能和机器人领域的代表企业&#xff0c;那宇树科技&#xff08;Unitree&#xff09;必须名列其榜。 最近&#xff0c;宇树科技的一项新变动消息在业界引发了不少关注和讨论&#xff0c;即&#xff1a; 宇树向其合作伙伴发布了一封公司名称变更函称&#xff0c;因…...

计算机基础知识解析:从应用到架构的全面拆解

目录 前言 1、 计算机的应用领域&#xff1a;无处不在的数字助手 2、 计算机的进化史&#xff1a;从算盘到量子计算 3、计算机的分类&#xff1a;不止 “台式机和笔记本” 4、计算机的组件&#xff1a;硬件与软件的协同 4.1 硬件&#xff1a;五大核心部件 4.2 软件&#…...