Flutter中Widget 、Element、RenderObject角色深入分析

题记
—— 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天。

**你可能需要
CSDN网易云课堂教程
掘金EDU学院教程
知乎Flutter系列文章

本文章将讲述 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树形结构排列如下:
图2
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;

完毕
公众号 我的大前端生涯

早起的年轻人 CSDN认证博客专家 移动开发 项目管理 Java
只要用心去做,每一件事情还是有可能成功的,当然成功是没有界限的,只不过是达到自己心里的那个目标,公众号:我的大前端生涯,一个爱喝茶的程序员,通常会搞搞SpringBoot 、Herbinate、Mybatiys、Android、iOS、Flutter、Vue、小程序等.
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页