三、Flutter的渲染機(jī)制之RenderObjectWidget、RenderObjectElement、RenderObject

RenderObjectWidget 是 Widget 例如 SizeBox ， Column 等

創(chuàng)新互聯(lián)是一家專(zhuān)業(yè)從事成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)的品牌網(wǎng)絡(luò)公司。如今是成都地區(qū)具影響力的網(wǎng)站設(shè)計(jì)公司,作為專(zhuān)業(yè)的成都網(wǎng)站建設(shè)公司,創(chuàng)新互聯(lián)依托強(qiáng)大的技術(shù)實(shí)力、以及多年的網(wǎng)站運(yùn)營(yíng)經(jīng)驗(yàn),為您提供專(zhuān)業(yè)的成都網(wǎng)站建設(shè)、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)及網(wǎng)站設(shè)計(jì)開(kāi)發(fā)服務(wù)！

RenderObjectElement 是這類(lèi) Widget 生成的 Element 類(lèi)型，

例如 SizeBox 對(duì)應(yīng) SingleChildRenderObjectElement （單子節(jié)點(diǎn)的 Element ）

RenderObject 才是真正負(fù)責(zé)繪制的對(duì)象，其中包含了 paint ， layout 等方法~

Text 組件為例：

class Text extends StatelessWidget

Text build返回的是

class RichText extends MultiChildRenderObjectWidget

MultiChildRenderObjectWidget - MultiChildRenderObjectElement

RenderObjectElement 會(huì)重寫(xiě) mount

遍歷 _parent (就是上個(gè)節(jié)點(diǎn)的 element ，這個(gè) _parent 在每次的 mount 方法設(shè)置),一直遍歷知道找到最近的一個(gè) RenderObjectElement

在回顧下 inflateWidget

SingleChildRenderObjectElement

MultiChildRenderObjectElement

inflateWidget 會(huì)觸發(fā) RenderObjectWidget 的 createElement 創(chuàng)建 RenderObjectElement ,

再調(diào)用 RenderObjectElement 的 mount 方法

mount 方法調(diào)用 RenderObjectWidget 的 createRenderObject 方法創(chuàng)建 RenderObject

然后找到最近的一個(gè)父 RenderObjectElement 調(diào)用 insertRenderObjectChild 插入 RenderObject

(注意：這里不是 RenderObjectElement 的 child ，而是 RenderObjectElement 關(guān)聯(lián)的 RenderObject 的 child , element 樹(shù)里面都是 element ， RenderObject 樹(shù)里面都是 RenderObject )

MultiChildRenderObjectElement 多子節(jié)點(diǎn)掛載邏輯

多節(jié)點(diǎn)添加子節(jié)點(diǎn)邏輯

每個(gè)子節(jié)點(diǎn)的 parentData 的 after 用來(lái)指向前一個(gè)子節(jié)點(diǎn) previous 指向下一個(gè)子節(jié)點(diǎn)

Flutter Math發(fā)布，使用純Flutter渲染LaTeX數(shù)學(xué)公式

介紹一下我最近開(kāi)發(fā)的一個(gè)Flutter插件。Flutter Math是一個(gè)完全使用Dart和Flutter渲染LaTeX數(shù)學(xué)公式的插件，可以看作是移植在Dart和Flutter平臺(tái)上的KaTeX。其支持的LaTeX語(yǔ)法大致與KaTeX相同（少數(shù)當(dāng)前版本暫不支持的語(yǔ)法詳見(jiàn)Github倉(cāng)庫(kù)），對(duì)數(shù)學(xué)公式的渲染結(jié)果幾乎像素級(jí)還原KaTeX。

相比已有的flutter_tex插件，本插件完全的基于Dart和Flutter，不包含任何WebView和Javascript，性能遠(yuǎn)超過(guò)flutter_tex。大家如果頻繁遇到flutter_tex帶來(lái)的卡頓以及崩潰，歡迎試用Flutter Math。

x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

i\hbar\frac{\partial}{\partial t}\Psi(\vec x,t) = -\frac{\hbar}{2m}\nabla^2\Psi(\vec x,t)+ V(\vec x)\Psi(\vec x,t)

\hat f(\xi) = \int_{-\infty}^\infty f(x)e^{- 2\pi i \xi x}\mathrmsqu6kqwx

項(xiàng)目倉(cāng)庫(kù)地址： GitHub地址 。目前版本為0.1.1，更多信息以及暫不支持的KaTeX特性歡迎查閱GitHub頁(yè)面。歡迎打星，歡迎fork！

3.0.flutter之生命周期和渲染原理

生命周期是別人封裝好的一套方法接口,然后提供回調(diào)方法給我們調(diào)用,生命周期本質(zhì)是回調(diào)方法;

1.監(jiān)聽(tīng)widget的事件

2.初始化數(shù)據(jù)

創(chuàng)建數(shù)據(jù)

發(fā)送網(wǎng)絡(luò)請(qǐng)求

3.內(nèi)存管理

銷(xiāo)毀數(shù)據(jù),銷(xiāo)毀監(jiān)聽(tīng)者

銷(xiāo)毀timer等

//1.StatelessWidget構(gòu)造函數(shù)調(diào)用...1

//2.StatelessWidget的buil方法調(diào)用...2

//1.StatefulWidget的構(gòu)造函數(shù)...1

//2.State的構(gòu)造函數(shù)...2

//3.State的initState的方法...3

//4.State的build的方法...4

//5.State的dispose的方法...5

setState(() {})

可被

StatefulElement _element = context;

_element.markNeedsBuild();

替代

參考:

Flutter面試：渲染原理

頁(yè)面中的各界面元素（Widget）以樹(shù)的形式組織，即控件樹(shù)。Flutter通過(guò)控件樹(shù)中的每個(gè)控件創(chuàng)建不同類(lèi)型的渲染對(duì)象，組成渲染對(duì)象樹(shù)。而渲染對(duì)象樹(shù)在Flutter的展示過(guò)程分為三個(gè)階段：布局、繪制、合成和渲染。

（一）布局

Flutter采用深度優(yōu)先機(jī)制遍歷渲染對(duì)象樹(shù)，決定渲染對(duì)象樹(shù)中各渲染對(duì)象在屏幕上的位置和尺寸。在布局過(guò)程中，渲染對(duì)象樹(shù)中的每個(gè)渲染對(duì)象都會(huì)接收父對(duì)象的布局約束參數(shù)，決定自己的大小，然后父對(duì)象按照控件邏輯決定各個(gè)子對(duì)象的位置，完成布局過(guò)程。

為了防止因子節(jié)點(diǎn)發(fā)生變化而導(dǎo)致整個(gè)控件樹(shù)重新布局，F(xiàn)lutter加入了一個(gè)機(jī)制——布局邊界（Relayout Boundary），可以在某些節(jié)點(diǎn)自動(dòng)或手動(dòng)地設(shè)置布局邊界，當(dāng)邊界內(nèi)的任何對(duì)象發(fā)生重新布局時(shí)，不會(huì)影響邊界外的對(duì)象，反之亦然。

二）繪制

布局完成后，渲染對(duì)象樹(shù)中的每個(gè)節(jié)點(diǎn)都有了明確的尺寸和位置。Flutter會(huì)把所有的渲染對(duì)象繪制到不同的圖層上。與布局過(guò)程一樣，繪制過(guò)程也是深度優(yōu)先遍歷，而且總是先繪制自身，再繪制子節(jié)點(diǎn)。

以下圖為例：節(jié)點(diǎn)1在繪制完自身后，會(huì)再繪制節(jié)點(diǎn)2，然后繪制它的子節(jié)點(diǎn)3、4和5，最后繪制節(jié)點(diǎn)6。

可以看到，由于一些其他原因（比如，視圖手動(dòng)合并）導(dǎo)致2的子節(jié)點(diǎn)5與它的兄弟節(jié)點(diǎn)6處于了同一層，這樣會(huì)導(dǎo)致當(dāng)節(jié)點(diǎn)2需要重繪的時(shí)候，與其無(wú)關(guān)的節(jié)點(diǎn)6也會(huì)被重繪，帶來(lái)性能損耗。

為了解決這一問(wèn)題，F(xiàn)lutter提出了與布局邊界對(duì)應(yīng)的機(jī)制——重繪邊界（Repaint Boundary）。在重繪邊界內(nèi)，F(xiàn)lutter會(huì)強(qiáng)制切換新的圖層，這樣就可以避免邊界內(nèi)外的互相影響，避免無(wú)關(guān)內(nèi)容置于同一圖層引起不必要的重繪。

重繪邊界的一個(gè)典型場(chǎng)景是Scrollview。ScrollView滾動(dòng)的時(shí)候需要刷新視圖內(nèi)容，從而觸發(fā)內(nèi)容重繪。而當(dāng)滾動(dòng)內(nèi)容重繪時(shí)，一般情況下其他內(nèi)容是不需要重繪的，這時(shí)候重繪邊界就派上用場(chǎng)了。

（三）合成和渲染

終端設(shè)備的頁(yè)面越來(lái)越復(fù)雜，因此Flutter的渲染樹(shù)層級(jí)通常很多，直接交付給渲染引擎進(jìn)行多圖層渲染，可能會(huì)出現(xiàn)大量渲染內(nèi)容的重復(fù)繪制，所以還需要先進(jìn)行一次圖層合成，即將所有的圖層根據(jù)大小、層級(jí)、透明度等規(guī)則計(jì)算出最終的顯示效果，將相同的圖層歸類(lèi)合并，簡(jiǎn)化渲染樹(shù)，提高渲染效率。

合并完成后，F(xiàn)lutter會(huì)將幾何圖層數(shù)據(jù)交由Skia引擎加工成二維圖像數(shù)據(jù)，最終交由GPU進(jìn)行渲染，完成界面的展示。

四、總結(jié)

咱們從各種業(yè)界主流跨端方案與Flutter的對(duì)比開(kāi)始，到Flutter的簡(jiǎn)要介紹以及Flutter的運(yùn)行機(jī)制，并以界面渲染過(guò)程為例，從布局、繪制、合成和渲染三個(gè)階段講述了Flutter的實(shí)現(xiàn)原理。相信大家對(duì)Flutter已經(jīng)有一個(gè)整體認(rèn)知，趕快一起上手操作起來(lái)吧！

Flutter Widget的渲染原理

抽象類(lèi)Element 有mount方法

抽象類(lèi)Widget 有createElement方法

RenderObjectWidget有createElement方法 和??createRenderObject方法

每一個(gè)Widget, 都有createElement方法，通過(guò)createElement方法 創(chuàng)建一個(gè)Element對(duì)象，

Element加入Element樹(shù)中，它會(huì)創(chuàng)建三種Element ，每個(gè)Element 有個(gè)mount方法

第一種：RenderObjectElement（RenderObjectWidget的createElement方法）

mount方法中 調(diào)用

widget.createRenderObject(this) ，創(chuàng)建RenderObject對(duì)象，RenderObject對(duì)象加入Render樹(shù)中

第二種：StatefulElement繼承ComponentElement?

第三種：StatelessElement繼承ComponentElement?

并不是所有的Widget都會(huì)被獨(dú)立渲染！只有繼承RenderObjectWidget的才會(huì)創(chuàng)建RenderObject對(duì)象！?