Flutter三棵树的构建流程

原创 已于 2023-09-25 10:35:19 修改 · 926 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#flutter #ios #android

于 2022-11-23 22:30:07 首次发布
本文详细阐述了Flutter中Widget、Element和Render对象的家族成员，以及它们之间的创建和关联。从根节点RenderView的创建到MyApp、MyHomePage和ErrorWidget等子节点的构建过程，揭示了Flutter应用的构建流程。在Element的驱动下，Widget对象被保存到对应的Element上，形成逻辑上的虚拟树结构，而Render节点则在需要时被创建并插入到Render树中。整个过程展示了Flutter框架如何将逻辑结构转化为实际的渲染结构。

一、Flutter常见的家族成员

  1. Widget常见的家族成员

在这里插入图片描述

  1. Element常见的家族成员

在这里插入图片描述

  1. Render常见的家族成员

在这里插入图片描述

二、示例代码对应的Flutter Inspector树

示例代码：MyApp->MyHomePage->ErrorWidget，包含了StatelessWidget、StatefulWidget、LeafRenderObjectWidget，其中StatelessWidget、StatefulWidget都属于组合Widget，它们通过build或者state.build返回自己的子节点，最后一级的ErrorWidget是LeafRenderObjectWidget，是个叶子节点，它下面没有子节点。

最低0.47元/天 解锁文章
Flutter的三棵树
。
09-05 995
树角色特点职责Widget 树蓝图/配置轻量、不可变描述UI元素应该是什么样子Element 树粘合剂/管理者可变、长寿命管理Widget的更新，决定是复用还是重建UIRenderObject 树渲染工人重量级、持久负责实际的布局、绘制工作，计算尺寸和位置，渲染到屏幕简单记忆Widget 是配置，Element 是管家，RenderObject 是干活的。管家（Element）根据新的图纸（Widget）来决定是让工人（RenderObject）在原基础上修改，还是直接换一个新工人。
Flutter原理：三棵重要的树(渲染过程、布局约束、应用视图的构建等)
2401_89609648的博客
01-23 1159
Widget 是不可变，它的改变就意味着要重建，而其重建也非常频繁，如果我们将更多的任务都交给它将会对性能造成很大的损伤，因此我们把 Widget 组件当作一个虚拟的组件树，而真正被渲染在屏幕上的其实是 Elememt 这棵树，它持有其对应 Widget 的引用，如果他对应的 Widget 发生改变，它就会被标记为 dirty Element，于是下一次更新视图时根据这个状态只更新被修改的内容，从而达到提升性能的效果。为了更为深刻的理解以上描述的含义，我们可以举一个更为形象的例子。
【Flutter深度解析】三棵树原理全解：Widget、Element、RenderObject的协作机制
u013012507的专栏
04-09 1729
在Flutter的世界里，"三棵树"（Widget树、Element树、RenderObject树）是框架最核心的设计理念。理解这三者的关系，才能真正掌握Flutter的UI系统工作原理。本文将带你深入剖析它们的协作机制，并通过大量图示和代码示例，让你彻底理解Flutter的渲染流程。"Flutter的三棵树机制是其高性能渲染的核心秘密，也是面试中必问的高级话题。mermaid复制graph TDA[Widget] -->|创建/更新| B[Element]
Flutter的核心渲染模块三棵树
haoxuhong的博客
07-01 4907
​​​​​​​ Flutter 中有三棵树：Widget 树，Element 树和 RenderObject 树。当应用启动时 Flutter 会遍历并创建所有的 Widget 形成 Widget Tree，同时与 Widget Tree 相对应，通过调用 Widget 上的 createElement() 方法创建每个 Element 对象，形成 Element Tree。最后调用 Element 的 createRenderObject() 方法创建每个渲染对象，形成一个 Render Tree。 E
flutter知识点---三棵树
u011489056的专栏
04-15 889
RenderObject树是扁平化的，没有Widget树和Element树那样的嵌套结构，这是因为布局过程中需要高效的遍历和计算。总结来说，Flutter中的“三棵树”分工明确、各司其职：Widget树负责描述UI配置，Element树负责管理和连接Widget与RenderObject，RenderObject树则专注于实际的渲染工作。等应用程序Widget。与Widget树一一对应，当Widget树发生变动时，Flutter框架会根据新的Widget树创建或更新相应的Element树。
Flutter 08 三棵树（Widgets、Elements和RenderObjects）
sziitjin的博客
11-05 2527
widget 树和 Element 树节点是一一对应关系，每一个 Widget 都会有其对应的 Element，但是 RenderObject 树则不然，只有需要渲染的 Widget 才会有对应的节点。Element 树相当于一个中间层，大管家，它对 Widget 和 RenderObject 都有引用。
Flutter三棵树理解
杨充
12-15 5043
目录介绍 01.Flutter三棵树背景 02.Flutter中的三棵树 03.Flutter三棵树关系 04.运行时三棵树结构 05.三棵树的作用介绍 Flutter三棵树背景 1.1 先思考一些问题 Widget与Element是什么关系？它们是一一对应的还是怎么理解？ createState 方法在什么时候调用？state 里面为啥可以直接获取到 widget 对象？ Widget 频繁更改创建是否会影响性能？复用和更新机制是什么样的？ Widget、Element、RenderObject 三
Flutter 三棵树
最新发布
lxjlxj2333的博客
08-07 1055
Flutter框架的核心机制围绕"三棵树"展开：Widget树作为不可变的配置蓝图，Element树负责对比更新和生命周期管理，RenderObject树执行布局、绘制和命中测试。Widget声明UI需求，Element对比新旧Widget决定复用或重建，RenderObject处理具体渲染。当布局改变时，若Widget类型不同（如Column变Row），会触发Element和RenderObject的销毁重建；若仅属性变化（如文本修改），则复用现有节点仅局部更新。这种分层设计配合Key
【Flutter】Widget、Element和Render的关系-Flutter三棵树
ZFJ_张福杰
06-14 1439
Flutter框架的核心机制涉及"三棵树"的协作：Widget树（UI声明组件，不可变）、Element树（管理Widget实例，可变）和Render树（负责实际渲染，可变）。Widget描述UI结构，Element作为中间层连接Widget和RenderObject，RenderTree最终执行布局和绘制。这种分层设计实现了高效复用，Widget频繁重建时Element和RenderObject可尽量复用，保证了高性能渲染。三者关系为：Widget树→Element树→Render树，
你能讲一下Flutter的三棵树吗？
weixin_42608318的博客
12-27 321
Flutter 的三棵树是指 Flutter 框架的三个主要部分： 渲染引擎：负责将 Flutter 应用程序的用户界面渲染到屏幕上。 小部件库：提供了许多可用于构建应用程序用户界面的小部件。 运行时：负责处理应用程序的生命周期事件，如启动、暂停和终止，并管理小部件的状态。 这三部分共同协作，使 Flutter 应用程序能够在各种平台上运行，包括 Android、iOS、Web 和桌面系...
Flutter三棵树机制
y515278178的博客
06-07 371
• Widget树：设计师画的装修图纸（描述客厅放沙发、卧室放床），每次改需求（如换沙发颜色）会重新画图纸，但图纸本身不花钱。◦ 每次状态更新时，Widget树会被重新构建（因为Widget是不可变的），但这一步只是生成新的配置，成本很低。• Element树：施工队长，拿着图纸对比旧房现状，决定哪些地方要改（比如只换沙发，不拆墙），规划最小施工量。◦ 作为中间层，它缓存Widget的配置，并对比前后两次Widget树的差异（即“找不同”）。◦ 负责计算布局、绘制像素，是真正和屏幕渲染打交道的层。
Flutter-渲染原理&三棵树详解
Dream It Possible
06-21 6971
WidgetTree:存放渲染内容、它只是一个配置数据结构，创建是非常轻量的，在页面刷新的过程中随时会重建Element 是分离 WidgetTree 和真正的渲染对象的中间层， WidgetTree 用来描述对应的Element 属性,同时持有Widget和RenderObject，存放上下文信息，通过它来遍历视图树，支撑UI结构。RenderObject (渲染树)用于应用界面的布局和绘制，负责真正的渲染，保存了元素的大小，布局等信息，实例化一个 RenderObject 是非常耗能的当应用启动时 Fl
Flutter中的三棵树
老猿的自留地
03-01 837
当Widget发生变化时，对比Element tree上对应位置上新旧Widget是否一致，只有不一致时才会重建Element并重建并重新进行RenderObject实例化。即RenderObject Tree只需进行增量的重建即可，这就大大提升了渲染效率。，创建出renderObject，并关联到element.renderobject属性上，最后完成RenderObject Tree的创建。， 页面的更新，可以根据Element变化的内容，只修改对应的RenderObject Tree，即进行。
Flutter之三棵树
weixin_43244083的博客
07-18 892
另外，我们看到上面执行执行build 方法传递的参数 this，也就是当前 Element，而我们在写代码的时候 build 方法是这样的。
一文读懂Flutter的三棵树渲染机制和原理
fengyuzhengfan的专栏
01-10 4700
Flutter是一个优秀的UI框架，借助它开箱即用的Widgets我们能够构建出漂亮和高性能的用户界面。那这些Widgets到底是如何工作的又是如何完成渲染的。 在本文中呢，我们就来探析Widgets背后的故事-Flutter渲染机制之三棵树。 什么是三棵树？ 在Flutter中和Widgets一起协同工作的还有另外两个伙伴：Elements和RenderObjects；由于它们都是有着树形结构，所以经常会称它们为三棵树。 Widget：Widget是Flutter的核心部分，是用户界面的不可变描述。做.
Flutter原理：三棵重要的树(渲染过程、布局约束，flutterlistview原理复用
m0_66264699的博客
02-05 2964
每次，当控件挂载到控件树上时，Flutter 调用其 createElement() 方法，创建其对应的 Element。Flutter 再将这个 Element 放到元素树上，并持有创建它控件的引用，如下图： 控件会有它的子树： 子控件也会创建相应 Element 被放在元素树上： 4Element 中的状态 我们上文提到了 Widget 的不可变性，相应的 Element 就有其可变性，正如我们前文所说的它被标记为 dirty Element 便是作为需要更新的状态，另外一个我们需要格外注意的是，
ms查约束具体代码_Flutter原理：三棵重要的树(渲染过程、布局约束、应用视图的构建等)...
weixin_39893042的博客
11-30 248
想要成为一名优秀的Android开发，你需要一份完备的 知识体系，在这里，让我们一起成长为自己所想的那样~。1前言了解 HTML 的读者一定听说过 DOM 树这个概念，它由页面中每一个控件组成，这些控件所形成的一种天然的嵌套关系使其可以表示为 “树” 结构，我们也可以将这个概念应用在 Flutter 中，例如默认的计数器应用的结构如下图：我们也可以看到上图中每个控件所形成的树结构中隐含了一些关系，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值