1.6　組件渲染過程簡(jiǎn)述

通過前一節(jié)的學(xué)習(xí)，讀者一定對(duì)Flutter中3棵樹各自的作用有了一定的了解，但對(duì)Flutter內(nèi)部創(chuàng)建這3棵樹的意義并不完全理解，因?yàn)樗械墓δ苊菜苾H用一棵樹就能實(shí)現(xiàn)，創(chuàng)建3棵樹只會(huì)加大工作量。本節(jié)結(jié)合計(jì)數(shù)器應(yīng)用對(duì)這3棵樹再做一個(gè)簡(jiǎn)要的分析。對(duì)于組件樹中存放計(jì)數(shù)值的Text組件，在開發(fā)者指定顯示的屬性內(nèi)容為_counter后它就不能再更新了。因此，為了在頁面中改變這個(gè)狀態(tài)值，必須調(diào)用_MyHomePageState的setState()函數(shù)通知與它對(duì)應(yīng)的元素將狀態(tài)更新為最新的計(jì)數(shù)值。下面的_incrementCounter()就是單擊“+”按鈕后調(diào)用的函數(shù)。

void _incrementCounter() {
  setState(() {
    _counter++;
  });
}

這段代碼就讓元素意識(shí)到狀態(tài)已經(jīng)改變，因?yàn)樵趕etState()函數(shù)內(nèi)部會(huì)將組件樹中MyHomePage以下的所有組件標(biāo)記為可更新狀態(tài)，這時(shí)，元素就可以開始使對(duì)應(yīng)的RenderObject將那些可更新組件用最新狀態(tài)值渲染出來。

另外，還值得我們繼續(xù)深究的就是Flutter中渲染樹是如何將最新狀態(tài)下的實(shí)際組件渲染在屏幕中的。圖1.18揭示了Flutter中組件的渲染流程。

圖1.18　Flutter中組件的渲染流程

從圖1.18可以看出來，始終由用戶觸發(fā)重新渲染UI的操作。用戶可能會(huì)單擊頁面中的某個(gè)按鈕，調(diào)用setState()函數(shù)，然后就會(huì)觸發(fā)頁面更新，接下來就會(huì)執(zhí)行過渡動(dòng)畫，在動(dòng)畫執(zhí)行期間，F(xiàn)lutter將會(huì)一直更新，直到渲染完成。構(gòu)建組件的過程就是Flutter構(gòu)建上一節(jié)介紹的3棵樹的過程。構(gòu)建完成之后，F(xiàn)lutter就會(huì)通過RenderObject樹上的RenderObject節(jié)點(diǎn)執(zhí)行真正的渲染工作。

RenderObject依賴在代碼中配置的組件，它會(huì)根據(jù)已經(jīng)設(shè)置的屬性完成接下來的布局（layout）、繪制（paint）以及合成（composite）操作。其中，布局操作會(huì)使用布局約束等原理計(jì)算各部分組件的實(shí)際大小，這部分內(nèi)容將在第4章詳細(xì)介紹；繪制過程就是根據(jù)配置的視圖數(shù)據(jù)將組件的內(nèi)容繪制在屏幕當(dāng)中；合成就是將各部分的視圖層合并在一起。

在日常開發(fā)中，我們只需要在代碼中針對(duì)各個(gè)組件的特性配置好組件樹，其余的工作可以直接交給Flutter框架層去實(shí)現(xiàn)，因此，我們大部分時(shí)間可能花在了解各種組件的特性與使用方法上。理解這部分內(nèi)容后對(duì)我們之后學(xué)習(xí)常用組件有很大的幫助。在以后的學(xué)習(xí)中，我們應(yīng)當(dāng)用不同的眼光去看待我們所建立的布局和組件。在本書后面的內(nèi)容中，我們會(huì)繼續(xù)探究這部分內(nèi)容，讓讀者更加深入地理解這3棵樹。