flutter 专题四 Flutter渲染流程

一、 Widget - Element - RenderObject关系

二、 Widget 、Element 、RenderObject 分别表示什么

2.1 Widget 

     Widget描述和配置子树的样子

  • Widget就是一个个描述文件,这些描述文件在我们进行状态改变时会不断的build。
  • 但是对于渲染对象来说,只会使用最小的开销来更新渲染界面

2.2、Element 

  • Element是一个Widget的实例,在树中详细的位置。
  • Widget描述和配置子树的样子,而Element实际去配置在Element树中特定的位置

2.3、RenderObject

  • 渲染树上的一个对象。
  • RenderObject层是渲染库的核心

三、js生成的HTML代码和Element的理解

Element其实就相当于React中的虚拟DOM,我们先来理解一下前端里面的虚拟DOM。

当我们书写js生成的HTML代码,这时候会直接操作真实的DOM,操作真实DOM是非常消耗性能的,所以React和Vue都有虚拟DOM的概念,什么意思呢?就是当我们通过js操作HTML,我们会先去操作虚拟DOM,虚拟DOM中通过diff算法,判断哪些DOM需要修改,甚至不需要修改,最后把虚拟DOM打个补丁到真实DOM上,这样做的好处就是我们可以以最小的开销来更新真实的DOM。

我们再看一下上面的三棵树,Widget就相当于HTML代码,Element就相当于虚拟DOM,Render就相当于真实DOM;

当我们创建一个Widget的时候,我们也许就不需要创建一个新的Render对象,我们先去看看保存的Element的类型和key是否一致,如果一致,就直接修改属性即可,这样我们就没必要创建新的Render Object,也许只是修改其中某个属性就行,这样就做到了以最小的开销来更新Render Object。

四 、Flutter 的渲染流程大致如下

4.1 构建widget树:首先,你的应用程序会构建一个由widget组成的树。这些widget描述了应用程序的用户界面。

我们先给widget做个分类:

这些是组件Widget,不会生成RenderObject
Container()
Text()
HYHomeContent()

这些是渲染Widget,会生成RenderObject
Padding()
Row()

我们这里以Padding为例,Padding是用来设置内边距,我们看看这个Widget最后怎么生成RenderObject的。

2.1. Widget

Padding是一个Widget,并且继承自SingleChildRenderObjectWidget

继承关系如下:

Padding  -> SingleChildRenderObjectWidget -> RenderObjectWidget -> Widget

Container继承关系如下:

Container -> StatelessWidget -> Widget

我们之前在创建Widget时,经常使用StatelessWidget和StatefulWidget,这种Widget只是将其他的Widget在build方法中组装起来,并不是一个真正可以渲染的Widget(在之前的课程中其实有提到)。

在Padding的类中,我们找不到任何和渲染相关的代码,这是因为Padding仅仅作为一个配置信息,这个配置信息会随着我们设置的属性不同,频繁的销毁和创建。

问题:频繁的销毁和创建会不会影响Flutter的性能呢?

  • 并不会,答案在我的另一篇文章中;
  • https://mp.weixin.qq.com/s/J4XoXJHJSmn8VaMoz3BZJQ

那么真正的渲染相关的代码在哪里执行呢?

  • RenderObjectWidget

2.2. RenderObjectWidget

我们来看Padding里面的代码,有一个非常重要的方法:

  • 这个方法其实是来自RenderObjectWidget的类,在这个类中它是一个抽象方法;
  • 抽象方法是必须被子类实现的,但是它的子类SingleChildRenderObjectWidget也是一个抽象类,所以可以不实现父类的抽象方法;
  • 但是Padding不是一个抽象类,必须在这里实现对应的抽象方法,而它的实现就是下面的实现;
@override
RenderPadding createRenderObject(BuildContext context) {return RenderPadding(padding: padding,textDirection: Directionality.of(context),);
}

上面的代码创建了什么呢?RenderPadding

RenderPadding的继承关系是什么呢?

RenderPadding -> RenderShiftedBox -> RenderBox -> RenderObject

我们来具体查看一下RenderPadding的源代码:

  • 如果传入的_padding和原来保存的value一样,那么直接return;
  • 如果不一致,调用_markNeedResolution,而_markNeedResolution内部调用了markNeedsLayout;
  • 而markNeedsLayout的目的就是标记在下一帧绘制时,需要重新布局performLayout;
  • 如果我们找的是Opacity,那么RenderOpacity是调用markNeedsPaint,RenderOpacity中是有一个paint方法的;
  set padding(EdgeInsetsGeometry value) {assert(value != null);assert(value.isNonNegative);if (_padding == value)return;_padding = value;_markNeedResolution();}

总结: Widget只是描述了配置信息:

  • 其中包含createElement方法用于创建Element;
  • 也包含createRenderObject,但是不是自己在调用;

4.2 构建element树:然后,每个widget会被转换成一个element。这些element也构成了一棵树。

我们来思考一个问题:

  • 之前我们写的大量的Widget在树结构中存在引用关系,但是Widget会被不断的销毁和重建,那么意味着这棵树非常不稳定;
  • 那么由谁来维系整个Flutter应用程序的树形结构的稳定呢?
  • 答案就是Element。
  • 官方的描述:Element是一个Widget的实例,在树中详细的位置。

我们再研究Padding是怎么创建Element的,我们进入Widget类里面,发现有个createElement()方法:

@protected
@factory
Element createElement();

因为Widget是个抽象类,所以createElement方法必须被它的子类实现。我们也可以得出一个结论,只要你是一个widget,无论是不是渲染的widget,都要实现createElement方法,只不过每个类实现的不一样。

我们发现,对于Padding,是父类SingleChildRenderObjectWidget实现了这个方法,最后返回的是SingleChildRenderObjectElement。

 
  1. @override

  2. SingleChildRenderObjectElement createElement() => SingleChildRenderObjectElement(this);

对于Container,也是它的父类StatelessWidget实现了createElement方法:

 
@overrideStatelessElement createElement() => StatelessElement(this);

同理,StatefulWidget也实现了createElement方法:

@overrideStatefulElement createElement() => StatefulElement(this);
它们返回的对象不同,一个是StatelessElement,一个是StatefulElement,只不过都继承于ComponentElement。它们的区别就是StatefulElement会多一个state属性。

小总结

  1. 我们写一个widget
  2. 对于渲染widget会创建RenderObject
  3. 每一个widget都会创建一个Element对象
  4. 在创建完一个Element之后,Flutter引擎会调用mount方法来将Element插入到树中具体的位置

Element什么时候创建?

在每一次创建Widget的时候,会创建一个对应的Element,然后将该元素插入树中。

在SingleChildRenderObjectWidget中,我们可以找到如下代码:

  • 在Widget中,Element被创建,并且在创建时,将this(Widget)传入了,Element就保存了对Widget的应用;
@override
SingleChildRenderObjectElement createElement() => SingleChildRenderObjectElement(this);

在创建完一个Element之后,Flutter引擎会调用mount方法来将Element插入到树中具体的位置,再Element类中我们会找到如下代码:

进入ComponentElement源码,查看ComponentElement的mount的执行过程,代码比较繁琐,可以直接看下面总结。

abstract class ComponentElement extends Element {/// Creates an element that uses the given widget as its configuration.ComponentElement(super.widget);Element? _child;bool _debugDoingBuild = false;@overridebool get debugDoingBuild => _debugDoingBuild;@override// 1. 调用mount方法void mount(Element? parent, Object? newSlot) {super.mount(parent, newSlot);assert(_child == null);assert(_lifecycleState == _ElementLifecycle.active);// 2. 调用_firstBuild_firstBuild();assert(_child != null);}void _firstBuild() {// StatefulElement overrides this to also call state.didChangeDependencies.// 3. 调用rebuildrebuild(); // This eventually calls performRebuild.}/// Calls the [StatelessWidget.build] method of the [StatelessWidget] object/// (for stateless widgets) or the [State.build] method of the [State] object/// (for stateful widgets) and then updates the widget tree.////// Called automatically during [mount] to generate the first build, and by/// [rebuild] when the element needs updating.@override@pragma('vm:notify-debugger-on-exception')// 6. 这是performRebuildvoid performRebuild() {assert(_debugSetAllowIgnoredCallsToMarkNeedsBuild(true));// 8.  就是这个WidgetWidget? built;try {assert(() {_debugDoingBuild = true;return true;}());// 7. 调用build方法生成一个Widgetbuilt = build();assert(() {_debugDoingBuild = false;return true;}());debugWidgetBuilderValue(widget, built);} catch (e, stack) {_debugDoingBuild = false;built = ErrorWidget.builder(_debugReportException(ErrorDescription('building $this'),e,stack,informationCollector: () => <DiagnosticsNode>[if (kDebugMode)DiagnosticsDebugCreator(DebugCreator(this)),],),);} finally {// We delay marking the element as clean until after calling build() so// that attempts to markNeedsBuild() during build() will be ignored._dirty = false;assert(_debugSetAllowIgnoredCallsToMarkNeedsBuild(false));}try {_child = updateChild(_child, built, slot);assert(_child != null);} catch (e, stack) {built = ErrorWidget.builder(_debugReportException(ErrorDescription('building $this'),e,stack,informationCollector: () => <DiagnosticsNode>[if (kDebugMode)DiagnosticsDebugCreator(DebugCreator(this)),],),);_child = updateChild(null, built, slot);}}/// Subclasses should override this function to actually call the appropriate/// `build` function (e.g., [StatelessWidget.build] or [State.build]) for/// their widget.@protectedWidget build();@overridevoid visitChildren(ElementVisitor visitor) {if (_child != null) {visitor(_child!);}}@overridevoid forgetChild(Element child) {assert(child == _child);_child = null;super.forgetChild(child);}
}// 4. 这是rebuild
void rebuild() {assert(_lifecycleState != _ElementLifecycle.initial);if (_lifecycleState != _ElementLifecycle.active || !_dirty) {return;}Element? debugPreviousBuildTarget;performRebuild();
}/// Cause the widget to update itself.
///
/// Called by [rebuild] after the appropriate checks have been made.
@protected
// 5. 调用performRebuild
void performRebuild();
}class StatelessElement extends ComponentElement {/// Creates an element that uses the given widget as its configuration.StatelessElement(StatelessWidget super.widget);@override// 9. 拿到widget,调用widget的build方法// 这个widget就是创建element的时候传进来的widgetWidget build() => (widget as StatelessWidget).build(this);@overridevoid update(StatelessWidget newWidget) {super.update(newWidget);assert(widget == newWidget);_dirty = true;rebuild();}
}

上面1-9步,看起来比较复杂,其实就是:

mount方法 -> firstBuild -> rebuild -> performBuild -> build -> _widget的build

这里的_widget就是创建element的时候传进来的widget。

我们都知道build方法有个参数build(Build Context context),所以这个context其实就是element,这个context最主要的作用就是告诉我们构建的element在树里面的哪个位置,之后可以沿着树去查找一些信息。

如果是statefulWidget,它里面的build方法如下:

@override
Widget build() => state.build(this);

我们发现,它之后调用了state.build(this),而不是 (widget as StatelessWidget).build(this);

下面我们看看SingleChildRenderObjectElement的mount方法的调用过程。

在调用mount方法时,会同时使用Widget来创建RenderObject,并且保持对RenderObject的引用,创建完RenderObject之后再把RenderObject挂载到RenderObjectTree树的某个位置

  @overridevoid mount(Element parent, dynamic newSlot) {super.mount(parent, newSlot);// 就是这行代码,创建RenderObject_renderObject = widget.createRenderObject(this);assert(() {_debugUpdateRenderObjectOwner();return true;}());assert(_slot == newSlot);attachRenderObject(newSlot);_dirty = false;}

下面说一下StatefulElement,它是继承于ComponentElement的,所以ComponentElement有的方法,它都有 

  StatefulElement(StatefulWidget widget)// 1. 就是这里,调用了createState: _state = widget.createState(),super(widget) {assert(() {if (!state._debugTypesAreRight(widget)) {throw FlutterError.fromParts(<DiagnosticsNode>[ErrorSummary('StatefulWidget.createState must return a subtype of State<${widget.runtimeType}>'),ErrorDescription('The createState function for ${widget.runtimeType} returned a state ''of type ${state.runtimeType}, which is not a subtype of ''State<${widget.runtimeType}>, violating the contract for createState.',),]);}return true;}());assert(state._element == null);state._element = this;assert(state._widget == null,'The createState function for $widget returned an old or invalid state ''instance: ${state._widget}, which is not null, violating the contract ''for createState.',);// 2. 然后将widget赋值给state里面的_widgetstate._widget = widget;assert(state._debugLifecycleState == _StateLifecycle.created);}

上面主要做了两件事

  1. StatefulElement的构造器中调用了widget.createState()方法
  2. 将widget赋值给state里面的_widget,正是因为这样,我们在state里面才可以通过this.widget拿到对应的widget

总结:

  1. widget创建完之后,Flutter框架一定会根据widget创建一个element,创建完之后会调用element的mount方法,最后根据一系列的调用会调用widget的build(Build Context context)方法。
  2. 如果是renderElement,那么它的mount主要做的就是创建一个_renderObject
  3. 如果是StatefulElement,那么会调用调用了createState,然后将widget赋值给state里面的_widget

2.4. build的context是什么

在StatelessElement中,我们发现是将this传入,所以本质上BuildContext就是当前的Element。

Widget build() => widget.build(this);

我们来看一下继承关系图:

  • Element是实现了BuildContext类(隐式接口)
  • abstract class Element extends DiagnosticableTree implements BuildContext

在StatefulElement中,build方法也是类似,调用state的build方式时,传入的是this。

Widget build() => state.build(this);

 小结:Element是真正保存树结构的对象:

  • 创建出来后会由framework调用mount方法;
  • 在mount方法中会调用widget的createRenderObject对象;
  • 并且Element对widget和RenderObject都有引用;

4.1 构建widget树:首先,你的应用程序会构建一个由widget组成的树。这些widget描述了应用程序的用户界面。

4.2 构建element树:然后,每个widget会被转换成一个element。这些element也构成了一棵树。

4.3 调用renderObject:Flutter会为每个需要显示的element创建一个对应的RenderObject。这些RenderObject会构成一个树,它用于实际进行渲染。

RenderObject是真正渲染的对象:

  • 其中有markNeedsLayout performLayout markNeedsPaint paint等方法

4.4 布局(layout):然后,Flutter会遍历RenderObject树,计算每个节点的位置和大小。

4.5 绘制(paint):接下来,Flutter会再次遍历RenderObject树,调用每个节点的paint方法进行绘制。

4.6 GPU加速渲染:最后,将绘制指令发送给GPU,最终显示在屏幕上。

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

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

相关文章

高效内容营销策略提升品牌影响力与客户忠诚度

内容概要 内容营销是一种通过创造和分享有价值的内容&#xff0c;以吸引特定目标受众并促进品牌发展的策略。这种营销形式不仅仅注重产品的直接推广&#xff0c;更着眼于与受众之间建立长期的信任关系。有效的内容营销能够提升品牌在市场中的影响力和客户的忠诚度&#xff0c;…

git 入门作业

任务1: 破冰活动&#xff1a;自我介绍任务2: 实践项目&#xff1a;构建个人项目 git使用流程&#xff1a; 1.将本项目直接fork到自己的账号下&#xff0c;这样就可以直接在自己的账号下进行修改和提交。 这里插一条我遇到的问题&#xff0c;在fork的时候没有将那个only camp4的…

NumPy Ndarray学习

1.NumPy Ndarray 对象简介 NumPy 最重要的特点是其 N 维数组对象 ndarray&#xff0c;它是一系列同类型数据的集合&#xff0c;以 0 下标为开始进行集合中元素的索引。ndarray 对象是用于存放同类型元素的多维数组。ndarray 中的每个元素在内存中都有相同存储大小的区域。 2.N…

网络层3——IP数据报转发的过程

目录 一、基于终点的转发 1、理解 2、IP数据报转发过程 二、最长前缀匹配 1、理解 2、主机路由 3、默认路由 三、二叉线索查找 一、基于终点的转发 1、理解 理解什么叫终点转发 IP数据报的传递&#xff0c;交给路由器后 可不可以做到直接发送给目的主机呢&#xff1f;…

【UGUI】为射击游戏添加动态显示的分数和血量到UI界面

项目背景 在这个项目中&#xff0c;我们希望实现一个简单的游戏系统&#xff0c;其中玩家可以通过击中目标来获得分数&#xff0c;同时通过与怪物碰撞来减少血量。分数和血量需要在游戏界面上实时显示&#xff0c;以便玩家能够随时了解自己的状态。 技术实现 1. 静态变量的使…

「C/C++」C/C++标准库 之 #include<cstdlib> 通用工具函数库

✨博客主页何曾参静谧的博客&#x1f4cc;文章专栏「C/C」C/C程序设计&#x1f4da;全部专栏「VS」Visual Studio「C/C」C/C程序设计「UG/NX」BlockUI集合「Win」Windows程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「PK」Parasoli…

CTF压缩包破解神器bkcrack教程和详细使用过程

kali安装bkcrack教程和详细使用过程 1.bkcrack介绍&#xff1a;2.bkcrack功能&#xff1a;3.bkcrack安装&#xff1a;Linux-Kali下&#xff1a;测试&#xff1a;Windows下安装&#xff1a; 4.bkcrack的使用方法&#xff1a;4.1查看相关参数4.2恢复内部密钥从 zip 档案中加载数据…

基于Python的乡村居民信息管理系统【附源码】

基于Python的乡村居民信息管理系统 效果如下&#xff1a; 系统主页面 系统登录页面 管理员主页面 居民管理页面 政务学习页面 土地信息管理页面 个人信息管理页面 居民登陆页面 村委人员主页面 研究背景 随着信息技术的飞速发展和乡村振兴战略的深入实施&#xff0c;传统的乡…

UI设计公司—兰亭妙微—提供轨道交通行业UI设计

蓝蓝设计工作室2008年开始&#xff0c;2011年正式成立北京兰亭妙微科技有限公司&#xff0c;主创清华团队&#xff0c;专注软件和互联网ui设计开发&#xff0c;擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI&#xff0c;一直在学习进步。交通行业UE UI解…

2-Ubuntu/Windows系统启动盘制作

学习目标&#xff1a; 掌握使用Win32DiskImager、Rufus等工具制作系统启动盘的基本步骤。独立将ISO镜像文件写入USB闪存驱动器&#xff0c;确保在需要时顺利安装或修复系统。通过学习如何选择正确的源文件和目标驱动器&#xff0c;理解启动盘的使用场景和注意事项&#xff0c;…

Java项目管理与SSM框架介绍

Maven简介 Maven是一个项目管理工具。它可以帮助程序员构建工程&#xff0c;管理jar包&#xff0c;编译代码&#xff0c;完成测试&#xff0c;项目打包等等。Maven工具是基于POM&#xff08;Project Object Model&#xff0c;项目对象模型&#xff09;实现的。在Maven的管理下每…

CGAL生成简单形状

三角形 四边形 立方体 六面体 棱柱 锥体 二十面体 网格 Polyhedron _mesh;/**************三角形************/CGAL::make_triangle(K::Point_3(100, 0, 0), K::Point_3(0, 100, 0), K::Point_3(0, 0, 0), _mesh);CGAL::IO::write_polygon_mesh("F:/WORK/STL/triangle.stl…

江协科技STM32学习- P30 FlyMCU串口下载STLink Utility

&#x1f680;write in front&#x1f680; &#x1f50e;大家好&#xff0c;我是黄桃罐头&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流 &#x1f381;欢迎各位→点赞&#x1f44d; 收藏⭐️ 留言&#x1f4dd;​…

【Python】【数据可视化】【商务智能方法与应用】课程 作业一 飞桨AI Studio

作业说明 程序运行和题目图形相同可得90分&#xff0c;图形显示有所变化&#xff0c;美观清晰可适当加分。 import matplotlib.pyplot as plt import numpy as npx np.linspace(0, 1, 100) y1 x**2 y2 x**4plt.figure(figsize(8, 6))# yx^2 plt.plot(x, y1, -., labelyx^2,…

提高后端接口性能的方法

个人bibilailai&#xff08;不喜请跳过&#xff09;&#xff1a;前几天参加的部门技术分享会&#xff0c;同事分享了一个内容为“提高接口性能的常见技巧”&#xff0c;个人觉得很有用&#xff0c;所以想在这里分享给大家&#xff0c;希望对刚入职场不久的兄弟姐妹们有所帮助。…

.net Core 使用Panda.DynamicWebApi动态构造路由

我们以前是通过创建controller来创建API&#xff0c;通过controller来显示的生成路由&#xff0c;这里我们讲解下如何不通过controller&#xff0c;构造API路由 安装 Panda.DynamicWebApi 1.2.2 1.2.2 Swashbuckle.AspNetCore 6.2.3 6.2.3添加ServiceAction…

服务器新建用户

文章目录 前言一、步骤二、问题三、赋予管理员权限总结 前言 环境&#xff1a; 一、步骤 创建用户需要管理员权限sudo sudo useradd tang为用户设置密码 sudo passwd tang设置密码后&#xff0c;可以尝试使用 su 切换到 tang 用户&#xff0c;确保该用户可以正常使用&#…

NVR监测软件/设备EasyNVR多品牌NVR管理工具/设备对城市安全有哪些具体益处?

在智慧城市的建设中&#xff0c;各种先进的技术系统正发挥着越来越重要的作用。其中&#xff0c;NVR监测软件/设备EasyNVR作为一种高效的视频边缘计算网关&#xff0c;不仅能够实现视频数据的采集、编码和存储&#xff0c;还能与其他智慧城市系统进行深度集成&#xff0c;共同推…

【NOIP提高组】虫食算

【NOIP提高组】虫食算 C语言C &#x1f490;The Begin&#x1f490;点点关注&#xff0c;收藏不迷路&#x1f490; 所谓虫食算&#xff0c;就是原先的算式中有一部分被虫子啃掉了&#xff0c;需要我们根据剩下的数字来判定被啃掉的字母。来看一个简单的例子&#xff1a; 43#98…

Lobe Chat:你的私人AI助理

有一天&#xff0c;一位程序员对他的朋友说&#xff1a;‘我希望有一个助手&#xff0c;能像我一样聪明&#xff0c;但不会吃饭、喝水和请病假。’朋友回答说&#xff1a;‘这很简单&#xff0c;你只需要一个智能聊天助手&#xff01;’于是&#xff0c;程序员便找到了 LobeCha…