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

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

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

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

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

1 Widget 、Element、renderObject角色分析

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

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

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

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

在這里插入圖片描述

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

圖2

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

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

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

每一個 Widget都包含者繪制圖像的配置信息，每一個配置信息都需要對應(yīng)的一個renderObject對象來實(shí)現(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添加到給定父級中給定槽點(diǎn)的樹上，所以對應(yīng)著就構(gòu)建了第二顆樹如下圖所示：

在這里插入圖片描述

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

在這里插入圖片描述

2 通過 RenderObject 來獲取手機(jī)屏幕上顯示的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其實(shí)返回的就是Element，在實(shí)際開發(fā)中，通常也會使用到 context，實(shí)際上context的返回也是element實(shí)例，如下

BuildContext get context => _element;

所以在實(shí)際項目開發(fā)中，在StatefulWidget的initState方法中，是不可使用 context ,因?yàn)榇藭r的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)前手機(jī)屏幕上顯示的是否是這個頁面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{
      ///頁面將要解綁
  }

所以在實(shí)際項目開發(fā)中，可以為每一個 Widget 綁定一個GlobalKey，通過 GlobalKey來獲取對應(yīng)的Element（BuildContext），然后通過Element來獲取對應(yīng)的RenderObject，從而獲取這個Widget 在手機(jī) 屏幕上對應(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在手機(jī)屏幕上顯示的位置 與大小 信息
 ///相對于全局的位置
  Offset offset = renderBox.localToGlobal(Offset.zero);
 ///獲取指定的Widget的大小 信息
 Size size = renderBox.paintBounds.size;

完畢

公眾號 我的大前端生涯