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;

作者：早起的年轻人
来源：掘金