白市驿网站建设,效果型网站,如何配置iis网站,顺企网下载【Flutter从入门到入坑】Flutter 知识体系 【Flutter从入门到入坑之一】Flutter 介绍及安装使用 【Flutter从入门到入坑之二】Dart语言基础概述 【Flutter从入门到入坑之三】Flutter 是如何工作的 WidgetWidget 是什么呢#xff1f;Widget 渲染过程WidgetElementRenderObjectR… 【Flutter从入门到入坑】Flutter 知识体系 【Flutter从入门到入坑之一】Flutter 介绍及安装使用 【Flutter从入门到入坑之二】Dart语言基础概述 【Flutter从入门到入坑之三】Flutter 是如何工作的 WidgetWidget 是什么呢Widget 渲染过程WidgetElementRenderObjectRenderObjectWidget示例图解小结今天我们一起学习 Widget 在 Flutter 中的设计思路和基本原理以帮助我们更加深入理解 Flutter 的视图构建过程。
这张架构图很重要我们再来看一下 不难看出 Widget 是整个视图描述的基础。 Widget 是什么呢
Widget 是 Flutter 功能的抽象描述是视图的配置信息同样也是数据的映射是 Flutter 开发框架中最基本的概念。前端框架中常见的名词比如视图View、视图控制器View Controller、活动Activity、应用Application、布局Layout等在 Flutter 中都是 Widget。
事实上Flutter 的核心设计思想便是“一切皆 Widget”。所以我们学习 Flutter首先得从学会使用 Widget 开始。
下面我们一起学习 Widget 在 Flutter 中的设计思路和基本原理以帮助我们可以更加深入理解 Flutter 的视图构建过程。 Widget 渲染过程
我们在进行软件开发时总会关注这样一个问题如何结构化地组织视图数据提供给渲染引擎最终完成界面显示。
通常情况下不同的 UI 框架中会以不同的方式去处理这一问题但无一例外地都会用到视图树View Tree的概念。而 Flutter 将视图树的概念进行了扩展把视图数据的组织和渲染抽象为三部分即 WidgetElement 和 RenderObject。
这三部分之间的关系如下
Widget
Widget 是 Flutter 世界里对视图的一种结构化描述你可以把它看作是前端中的“控件”或“组件”。Widget 是控件实现的基本逻辑单位里面存储的是有关视图渲染的配置信息包括布局、渲染属性、事件响应信息等。
Flutter 将 Widget 设计成不可变的所以当视图渲染的配置信息发生变化时Flutter 会选择重建 Widget 树的方式进行数据更新以数据驱动 UI 构建的方式简单高效。所以在页面渲染上Flutter 将“Simple is best”这一理念做到了极致。
但这样做也是有缺点的因为涉及到大量对象的销毁和重建所以会对垃圾回收造成压力。不过Widget 本身并不涉及实际渲染位图所以它只是一份轻量级的数据结构重建的成本很低。
另外由于 Widget 的不可变性可以以较低成本进行渲染节点复用因此在一个真实的渲染树中可能存在不同的 Widget 对应同一个渲染节点的情况这无疑又降低了重建 UI 的成本。
Element
Element 是 Widget 的一个实例化对象它承载了视图构建的上下文数据是连接结构化的配置信息到完成最终渲染的桥梁。
Flutter 渲染过程可以分为这么三步
首先通过 Widget 树生成对应的 Element 树然后创建相应的 RenderObject 并关联到 Element.renderObject 属性上最后构建成 RenderObject 树以完成最终的渲染。
可以看到Element 同时持有 Widget 和 RenderObject。而无论是 Widget 还是 Element其实都不负责最后的渲染只负责发号施令真正去干活儿的只有 RenderObject。 那为什么需要增加中间的这层 Element 树呢直接由 Widget 命令 RenderObject 去干活儿不好吗 答案是可以但这样做会极大地增加渲染带来的性能损耗。 因为 Widget 具有不可变性但 Element 却是可变的。实际上Element 树这一层将 Widget 树的变化类似 React 虚拟 DOM diff做了抽象可以只将真正需要修改的部分同步到真实的 RenderObject 树中最大程度降低对真实渲染视图的修改提高渲染效率而不是销毁整个渲染视图树重建。 这就是 Element 树存在的意义。 RenderObject
RenderObject 是主要负责实现视图渲染的对象。
Flutter 通过控件树Widget 树中的每个控件Widget创建不同类型的渲染对象组成渲染对象树。
而渲染对象树在 Flutter 的展示过程分为四个阶段即布局、绘制、合成和渲染。 其中布局和绘制在 RenderObject 中完成Flutter 采用深度优先机制遍历渲染对象树确定树中各个对象的位置和尺寸并把它们绘制到不同的图层上。绘制完毕后合成和渲染的工作则交给 Skia 搞定。【在第三章「Flutter 是如何工作的」中有详细介绍】
Flutter 通过引入 Widget、Element 与 RenderObject 这三个概念把原本从视图数据到视图渲染的复杂构建过程拆分得更简单、直接在易于集中治理的同时保证了较高的渲染效率。
RenderObjectWidget
在 Flutter 中布局和绘制工作实际上是在 Widget 的另一个子类 RenderObjectWidget 内完成的。
所以我们再来看一下 RenderObjectWidget 的源码来看看如何使用 Element 和 RenderObject 完成图形渲染工作。
// RenderObjectWidget 源码
abstract class RenderObjectWidget extends Widget {overrideRenderObjectElement createElement();protectedRenderObject createRenderObject(BuildContext context);protectedvoid updateRenderObject(BuildContext context, covariant RenderObject renderObject) { }...
}RenderObjectWidget 是一个抽象类。我们通过源码可以看到这个类中同时拥有创建 Element、RenderObject以及更新 RenderObject 的方法。
但实际上RenderObjectWidget 本身并不负责这些对象的创建与更新。
对于 Element 的创建Flutter 会在遍历 Widget 树时调用 createElement 去同步 Widget 自身配置从而生成对应节点的 Element 对象。而对于 RenderObject 的创建与更新其实是在 RenderObjectElement 类中完成的。
// RenderObjectElement 源码
abstract class RenderObjectElement extends Element {RenderObject _renderObject;overridevoid mount(Element parent, dynamic newSlot) {super.mount(parent, newSlot);_renderObject widget.createRenderObject(this);attachRenderObject(newSlot);_dirty false;}overridevoid update(covariant RenderObjectWidget newWidget) {super.update(newWidget);widget.updateRenderObject(this, renderObject);_dirty false;}...
}在 Element 创建完毕后Flutter 会调用 Element 的 mount 方法。在这个方法里会完成与之关联的 RenderObject 对象的创建以及与渲染树的插入工作插入到渲染树后的 Element 就可以显示到屏幕中了。
如果 Widget 的配置数据发生了改变那么持有该 Widget 的 Element 节点也会被标记为 dirty。在下一个周期的绘制时Flutter 就会触发 Element 树的更新并使用最新的 Widget 数据更新自身以及关联的 RenderObject 对象接下来便会进入 Layout 和 Paint 的流程。而真正的绘制和布局过程则完全交由 RenderObject 完成
// RenderObject 源码
abstract class RenderObject extends AbstractNode with DiagnosticableTreeMixin implements HitTestTarget {...void layout(Constraints constraints, { bool parentUsesSize false }) {...}void paint(PaintingContext context, Offset offset) { }
}布局和绘制完成后接下来的事情就交给 Skia 了。在 VSync 信号同步时直接从渲染树合成 Bitmap然后提交给 GPU。【在第三章「Flutter 是如何工作的」中有详细介绍此处不在赘述】 示例图解
我们以下面的界面示例为例说明 Widget、Element 与 RenderObject 在渲染过程中的关系。
在下面的例子中一个 Row 容器放置了 4 个子 Widget左边是 Image而右边则是一个 Column 容器下排布的两个 Text。 在 Flutter 遍历完 Widget 树创建了各个子 Widget 对应的 Element 的同时也创建了与之关联的、负责实际布局和绘制的 RenderObject。
下面是生成的“三棵树” 小结
本文章介绍了 Widget 渲染过程学习了在 Flutter 中视图数据的组织和渲染抽象的三个核心概念即 Widget、 Element 和 RenderObject。
Widget 是 Flutter 世界里对视图的一种结构化描述里面存储的是有关视图渲染的配置信息Element 则是 Widget 的一个实例化对象将 Widget 树的变化做了抽象能够做到只将真正需要修改的部分同步到真实的 Render Object 树中最大程度地优化了从结构化的配置信息到完成最终渲染的过程而 RenderObject则负责实现视图的最终呈现通过布局、绘制完成界面的展示。
我们在日常开发学习中绝大多数情况下我们只需要了解各种 Widget 特性及使用方法而无需关心 Element 及 RenderObject。因为 Flutter 已经帮我们做了大量优化工作因此我们只需要在上层代码完成各类 Widget 的组装配置其他的事情完全交给 Flutter 就可以了。 本章节内容主要是学习 陈航 老师的《Flutter 核心技术与实战》课程总结而来。
