題記
—— 執(zhí)劍天涯茅诱，從你的點滴積累開始逗物，所及之處，必精益求精瑟俭，即是折騰每一天翎卓。

本文章將講述 Widget 、Element摆寄、RenderObject 三者的關(guān)系 以及各自的角色 Flutter三顆樹的關(guān)系失暴，以及描述 Context 什么情況 下可使用坯门，以及通過 Element 獲取獲取對應(yīng)的Widget在手機屏幕顯示中的位置與大小

在 Flutter 中通過構(gòu)建一系列的 Widget就可建立起一個應(yīng)用，一系列的 Widget 通過一寫的結(jié)構(gòu)排列逗扒，構(gòu)成 Widgets 樹古戴，類似 HTML 中的 DOM樹。

在Flutter項目開發(fā)中矩肩，通過Widget構(gòu)建各種顯示UI效果现恼，最終顯示在手機屏幕上。

在Flutter圖像繪制原理深入分析一節(jié)中 有分析圖像的顯示原理蛮拔，在這里 我們開發(fā)使用的是構(gòu)建 Widget 述暂，Widget 這個角色是Flutter SDK 封裝好的一些接口以便開發(fā)者便捷開發(fā)應(yīng)用程序，實際繪制到手機屏幕上時是通過 RenderObject 這個角色來處理的建炫，也就是 一個 Widget如Text要顯示出來，要經(jīng)歷 Widget --> Element --> RenderObject 這三個階段的轉(zhuǎn)換疼蛾。

1 Widget 肛跌、Element、renderObject角色分析

在 Flutter 的 Engine 層向 Dart 層的暴露了 Canvas, PictureRecorder 等接口察郁，利用這些接口可以繪制自己想要的圖像衍慎，通過 Canvas, PictureRecorder 等接口來繪制圖像，這操作有點復(fù)雜皮钠，不利于便捷開發(fā)稳捆，所以一般常使用 Widget。

如下代碼 一個 線性布局 Column 中排列了兩個 文本 Text ：

   Widget buildColumnWidget(){
    return Column(children: [
      Text("張三"),
      Text("李四"),
    ],);
  }

實際項目中的顯示效果如下圖所示麦轰，為兩個文本在豎直方向線性排列：

在這里插入圖片描述

在這里構(gòu)建了三個Widget乔夯，Column 與兩個Text，它們的Widgets樹形結(jié)構(gòu)排列如下：

圖2

組合好的Widget在程序執(zhí)行到build方法時新锈，會通過 createRenderObject 方法來創(chuàng)建對應(yīng)的renderObject渲染對象甲脏。

一個圖像要繪制出來，首先要進行測量計算（位置與大忻冒省）块请，然后再根據(jù)測量計算的結(jié)果進行排版（layout）,最后再進行繪制（Paint），這整一個操作過程是通過 renderObject對象來實現(xiàn)的拳缠，也就是說renderObject是最終真正的渲染對象墩新。

renderObject對象第一步進行的計算數(shù)據(jù)的基礎(chǔ)配制是在 Widget中構(gòu)建的，所以需要從Widget中獲取這些數(shù)據(jù)脊凰，renderObject對象的這一系列操作也需要一個載體抖棘，所以就有了 Element茂腥。

每一個 Widget都包含者繪制圖像的配置信息，每一個配置信息都需要對應(yīng)的一個renderObject對象來實現(xiàn)操作切省，所以有Widgets樹最岗，就也有renderObjects樹，widget與renderObject之間需要 Element來協(xié)調(diào)配合朝捆，所以也有了 Element樹般渡。

如在上圖 Widget樹，當(dāng)Column與Text被構(gòu)建時芙盘，同時當(dāng)前的 StatelessWidget或者是StatefulWidget中通過Widget.createElement方法來創(chuàng)建Elemen驯用，框架層通過調(diào)用mount方法來將新創(chuàng)建的Element添加到給定父級中給定槽點的樹上，所以對應(yīng)著就構(gòu)建了第二顆樹如下圖所示：

在這里插入圖片描述

同時函數(shù)mount被調(diào)用的時候儒老，框架層會調(diào)用RenderObjectWidget.createRenderObject()來實例化RenderObject蝴乔，此時對應(yīng)的第三顆樹也就形成，如下：

在這里插入圖片描述

2 通過 RenderObject 來獲取手機屏幕上顯示的Widget的位置與大小

Element 負(fù)責(zé)協(xié)調(diào) Widget 與 renderObject驮樊，Element 同時持有 Widget 和 RenderObject薇正，Element存放Widget上下文， Element 也就是我們在開發(fā)中通常使用到的 context囚衔，通過context 可以獲取 Widget樹中的信息挖腰，也可以獲取對應(yīng)的 renderObject中的信息。

我們在調(diào)用build時候的入?yún)uildContex其實返回的就是Element练湿，在實際開發(fā)中猴仑，通常也會使用到 context，實際上context的返回也是element實例肥哎，如下

BuildContext get context => _element;

所以在實際項目開發(fā)中辽俗，在StatefulWidget的initState方法中，是不可使用 context ,因為此時的StatefulWidget對應(yīng)的Element（也就是BuildContext）才剛剛創(chuàng)建贤姆，還沒有形成綁定關(guān)系榆苞，也沒有與對應(yīng)的RenderObject綁定起來,所以不能使用。

同理在 方法 dispose中霞捡，StatefulWidget 與 Element 坐漏、RenderObject已解綁，所以也不能使用碧信。

只有在綁定期間才可使用赊琳，在綁定與解綁都會回調(diào)生命周期方法 didChangeDependencies，所以可以在didChangeDependencies這個方法中使用 context做一些相關(guān)的操作砰碴，代碼如下：

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();

    ///是否是路由棧中的第一個頁面
    bool isFirst = ModalRoute.of(context).isFirst;
    ///當(dāng)前手機屏幕上顯示的是否是這個頁面Widget
    bool isCurrent = ModalRoute.of(context).isCurrent;
    ///當(dāng)前Widget是否是活躍可用的
    ///當(dāng)調(diào)用 pop 或者是關(guān)閉當(dāng)前Widget時 isActive 為false
    bool isActive = ModalRoute.of(context).isActive;

    if(isActive){
      ///頁面 活躍狀態(tài)
    }else{
      ///頁面將要解綁
  }

所以在實際項目開發(fā)中躏筏，可以為每一個 Widget 綁定一個GlobalKey，通過 GlobalKey來獲取對應(yīng)的Element（BuildContext）呈枉，然后通過Element來獲取對應(yīng)的RenderObject趁尼，從而獲取這個Widget 在手機 屏幕上對應(yīng)的位置與大小 信息埃碱，代碼如下：

///第一步 創(chuàng)建 GlobalKey
GlobalKey globalKey = GlobalKey();

///第二步在 對應(yīng)的Widget 引用 ，如這里的Text
Text('張三',key:globalKey);

///第三步 通過 globalKey 來獲取 對應(yīng)的Element（BuildContext） 
 BuildContext stackContext = globalKey.currentContext;
 ///第四步 獲取對應(yīng)的 RenderObject
 ///RenderObject是抽象的酥泞，它的一些基礎(chǔ)信息封裝在子類RenderBox中
  RenderBox renderBox = stackContext.findRenderObject();
///然后通過 RenderBox 來獲取對應(yīng)的Text在手機屏幕上顯示的位置 與大小 信息
 ///相對于全局的位置
  Offset offset = renderBox.localToGlobal(Offset.zero);
 ///獲取指定的Widget的大小 信息
 Size size = renderBox.paintBounds.size;

完畢

公眾號 我的大前端生涯