題記
—— 執劍天涯，從你的點滴積累開始，所及之處，必精益求精，即是折騰每一天。

本文章將講述 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在程序執行到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;

完畢

公眾號 我的大前端生涯