Flutter中Widget 、Element、RenderObject角色深入分析
题记
—— 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天。
本文章将讲述 Widget 、Element、RenderObject 三者的关系 以及各自的角色 Flutter三颗树的关系,以及描述 Context 什么情况 下可使用,以及通过 Element 获取获取对应的Widget在手机屏幕显示中的位置与大小
在 Flutter 中通过构建一系列的 Widget就可建立起一个应用,一系列的 Widget 通过一写的结构排列,构成 Widgets 树,类似 HTML 中的 DOM树。
在Flutter项目开发中,通过Widget构建各种显示UI效果,最终显示在手机屏幕上。
在Flutter图像绘制原理深入分析一节中 有分析图像的显示原理,在这里 我们开发使用的是构建 Widget ,Widget 这个角色是Flutter SDK 封装好的一些接口以便开发者便捷开发应用程序,实际绘制到手机屏幕上时是通过 RenderObject 这个角色来处理的,也就是 一个 Widget如Text要显示出来,要经历 Widget --> Element --> RenderObject 这三个阶段的转换。
1 Widget 、Element、renderObject角色分析
在 Flutter 的 Engine 层向 Dart 层的暴露了 Canvas, PictureRecorder 等接口,利用这些接口可以绘制自己想要的图像,通过 Canvas, PictureRecorder 等接口来绘制图像,这操作有点复杂,不利于便捷开发,所以一般常使用 Widget。
如下代码 一个 线性布局 Column 中排列了两个 文本 Text :
Widget buildColumnWidget(){
return Column(children: [
Text("张三"),
Text("李四"),
],);
}
实际项目中的显示效果如下图所示,为两个文本在竖直方向线性排列:
在这里构建了三个Widget,Column 与两个Text,它们的Widgets树形结构排列如下:
Widget的构建相当于是构建一定的配置信息,或者说是 Widget 的组合构建,相当于是将封装的一些特定的绘制指令进行组合。
组合好的Widget在程序执行到build方法时,会通过 createRenderObject 方法来创建对应的renderObject渲染对象。
一个图像要绘制出来,首先要进行测量计算(位置与大小),然后再根据测量计算的结果进行排版(layout),最后再进行绘制(Paint),这整一个操作过程是通过 renderObject对象来实现的,也就是说renderObject是最终真正的渲染对象。
renderObject对象第一步进行的计算数据的基础配制是在 Widget中构建的,所以需要从Widget中获取这些数据,renderObject对象的这一系列操作也需要一个载体,所以就有了 Element。
每一个 Widget都包含者绘制图像的配置信息,每一个配置信息都需要对应的一个renderObject对象来实现操作,所以有Widgets树,就也有renderObjects树,widget与renderObject之间需要 Element来协调配合,所以也有了 Element树。
如在上图 Widget树,当Column与Text被构建时,同时当前的 StatelessWidget或者是StatefulWidget中通过Widget.createElement方法来创建Elemen,框架层通过调用mount方法来将新创建的Element添加到给定父级中给定槽点的树上,所以对应着就构建了第二颗树如下图所示:
同时函数mount被调用的时候,框架层会调用RenderObjectWidget.createRenderObject()来实例化RenderObject,此时对应的第三颗树也就形成,如下:
2 通过 RenderObject 来获取手机屏幕上显示的Widget的位置与大小
Element 负责协调 Widget 与 renderObject,Element 同时持有 Widget 和 RenderObject,Element存放Widget上下文, Element 也就是我们在开发中通常使用到的 context,通过context 可以获取 Widget树中的信息,也可以获取对应的 renderObject中的信息。
我们在调用build时候的入参BuildContex其实返回的就是Element,在实际开发中,通常也会使用到 context,实际上context的返回也是element实例,如下
BuildContext get context => _element;
所以在实际项目开发中,在StatefulWidget的initState方法中,是不可使用 context ,因为此时的StatefulWidget对应的Element(也就是BuildContext)才刚刚创建,还没有形成绑定关系,也没有与对应的RenderObject绑定起来,所以不能使用。
同理在 方法 dispose中,StatefulWidget 与 Element 、RenderObject已解绑,所以也不能使用。
只有在绑定期间才可使用,在绑定与解绑都会回调生命周期方法 didChangeDependencies,所以可以在didChangeDependencies这个方法中使用 context做一些相关的操作,代码如下:
@override
void didChangeDependencies() {
super.didChangeDependencies();
///是否是路由栈中的第一个页面
bool isFirst = ModalRoute.of(context).isFirst;
///当前手机屏幕上显示的是否是这个页面Widget
bool isCurrent = ModalRoute.of(context).isCurrent;
///当前Widget是否是活跃可用的
///当调用 pop 或者是关闭当前Widget时 isActive 为false
bool isActive = ModalRoute.of(context).isActive;
if(isActive){
///页面 活跃状态
}else{
///页面将要解绑
}
所以在实际项目开发中,可以为每一个 Widget 绑定一个GlobalKey,通过 GlobalKey来获取对应的Element(BuildContext),然后通过Element来获取对应的RenderObject,从而获取这个Widget 在手机 屏幕上对应的位置与大小 信息,代码如下:
///第一步 创建 GlobalKey
GlobalKey globalKey = GlobalKey();
///第二步在 对应的Widget 引用 ,如这里的Text
Text('张三',key:globalKey);
///第三步 通过 globalKey 来获取 对应的Element(BuildContext)
BuildContext stackContext = globalKey.currentContext;
///第四步 获取对应的 RenderObject
///RenderObject是抽象的,它的一些基础信息封装在子类RenderBox中
RenderBox renderBox = stackContext.findRenderObject();
///然后通过 RenderBox 来获取对应的Text在手机屏幕上显示的位置 与大小 信息
///相对于全局的位置
Offset offset = renderBox.localToGlobal(Offset.zero);
///获取指定的Widget的大小 信息
Size size = renderBox.paintBounds.size;
完毕
- 3339: Rmq Problem
- Codeforce GYM 100741 A. Queries
- UVA - 11178 Morley's Theorem
- PyMySQL模块的使用
- Python之进程
- Angularjs 通过asp.net web api认证登录
- P3391 【模板】文艺平衡树(Splay)
- 零基础入门小程序 &实战经验分享
- mysql explain详解
- 【前沿】Pytorch开源VQA神经网络模块,让你快速完成看图问答
- #106. 二逼平衡树(附带详细代码注释)
- TensorFlow.js、迁移学习与AI产品创新之道
- Java JDBC MySQL
- python内置函数大全
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法