Flutter中的Element(上篇)

級別: ★☆☆☆☆
標簽:「Flutter」「Element 」「生命周期 」
作者: 沐靈洛
審校: QiShare團隊


Element是什么?

Widget在樹中特定位置的實例。文檔中的描述:

An instantiation of a [Widget] at a particular location in the tree.

widgets描述如何配置一個子樹,但是相同的widget可以同時被用來配置多個子樹,這是因為widget是不可變的。一個Element表示在樹中的特定位置對Widget配置數據的使用。隨著時間的推移,Element關聯的widget可能會變化。比如:如果此位置的widget對應的父widget重新構建了,并且在此位置重新創建了一個新的widget

樹中的Elements:大多數的elementchild都是獨一無二的,但是有一些widgets關聯的element可以有多個children,比如RenderObjectElement的子類MultiChildRenderObjectElement

Element的生命周期

  • framework通過在將要被用來作為element的初始配置的widget上調用[Widget.createElement]創建一個element

  • framework通過調用[mount]將一個新創建的element加入樹中給定的父節點的插槽下面。[mount]方法負責注入任何child widgets并且在有需要的時候,會調用[attachRenderObject]將關聯的render objects 添加到渲染樹render tree中。
    到這一步的時候element,會進入active狀態,并且會顯示在屏幕上。

  • 某些時候,父節點可能決定要改變使用在子element上的配置(widget)時。比如:父節點因為一個新的state重新build,(每次build都會產生一個新的widgetframework將使用新widget調用[update]方法,這個新的widget將總是擁有和舊widget同樣的runtimeTypeKey。如果父節點希望改變樹中此位置的新widget對應的runtimeTypeKey時,會unmount舊的element并且在此位置注入一個新的widget,(意味著使用新的widget創建一個新的element放在此位置)。

  • 還有一些時候呢,樹中的祖先節點(或者中間的祖先),想要移除樹中的某個element,該怎么辦呢?祖先節點自己調用[deactivateChild]
    [deactivateChild]后會發生什么事情呢?祖先將從render tree中遍歷移除elements對應的render objects,并且將這個元素加入到owner對應的不活躍的element數組中,最終導致framework對此element調用[deactivate]方法。

關于ownerBuildOwner類型的,它widgets framework的管理類
用于跟蹤哪些widgets需要rebuild,并且處理一些適用于整個widget tree的其他任務。

  • 這個時候呢,element會進入inactive狀態,并且不會出現在屏幕上。
    一個element可以保持inactive狀態直到當前的動畫幀結束。在動畫幀結束的時候,所有處于inactiveelements將會被unmounted(即:調用[unmount]方法)。
  • 但是,當處于inactive狀態的元素被重新合并到樹中時(比如:它或它的祖先有能重用的global key時),framework將從ownerinactive elements數組中移除這個element,并且為此element調用[activate],同時 reattachelementrender objectrender tree中。這時候呢,這個element將 再次變為active狀態,并且可能出現字屏幕上。
  • 當處于inactive狀態的elements,在當前動畫幀結束的時候并沒有被重新合并到樹中時,framework將為每個elements調用[unmount]方法。
  • 到這時,element會變為defunct,并且以后將再也無法合并到樹中(即宣告,element頑強而富有斗志的一生 end)。

Element的生命周期圖解

Element的生命周期圖解.png

下一篇我們將與大家一起探討Element的一些重要的方法的作用以及調用時機。

iOS 解決 [NSURL fileURLWithPath:] 對 # 的編碼問題
Xcode 調整導航目錄字體大小b
Swift 5.1 (21) - 泛型
Swift 5.1 (20) - 協議
Swift 5.1 (19) - 擴展
Swift 5.1 (18) - 嵌套類型
Swift 5.1 (17) - 類型轉換與模式匹配
淺談編譯過程
深入理解HTTPS
淺談 GPU 及 “App渲染流程”

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。