本節(jié)我們先對Flutter的框架做一個(gè)整體介紹，旨在讓讀者心中有一個(gè)整體的印象，這對初學(xué)者來說非常重要。如果一下子便深入到Flutter中，就會像是一個(gè)在沙漠中沒有地圖的人，即使可以找到一個(gè)綠洲，但是他也不會知道下一個(gè)綠洲在哪。因此，無論學(xué)什么技術(shù)，都要先有一張清晰的“地圖”，而我們的學(xué)習(xí)過程就是“按圖索驥”，這樣我們才不會陷于細(xì)節(jié)而“目無全牛”。言歸正傳，我們看一下Flutter官方提供的Flutter框架圖，如圖1-1所示：

Flutter Framework

這是一個(gè)純 Dart實(shí)現(xiàn)的 SDK，它實(shí)現(xiàn)了一套基礎(chǔ)庫，自底向上，我們來簡單介紹一下：

底下兩層（Foundation和Animation、Painting、Gestures）在Google的一些視頻中被合并為一個(gè)dart UI層，對應(yīng)的是Flutter中的dart:ui包，它是Flutter引擎暴露的底層UI庫，提供動畫、手勢及繪制能力。

Rendering層，這一層是一個(gè)抽象的布局層，它依賴于dart UI層，Rendering層會構(gòu)建一個(gè)UI樹，當(dāng)UI樹有變化時(shí)，會計(jì)算出有變化的部分，然后更新UI樹，最終將UI樹繪制到屏幕上，這個(gè)過程類似于React中的虛擬DOM。Rendering層可以說是Flutter UI框架最核心的部分，它除了確定每個(gè)UI元素的位置、大小之外還要進(jìn)行坐標(biāo)變換、繪制(調(diào)用底層dart:ui)。

Widgets層是Flutter提供的的一套基礎(chǔ)組件庫，在基礎(chǔ)組件庫之上，F(xiàn)lutter還提供了 Material 和Cupertino兩種視覺風(fēng)格的組件庫。而我們Flutter開發(fā)的大多數(shù)場景，只是和這兩層打交道。

Flutter Engine

這是一個(gè)純 C++實(shí)現(xiàn)的 SDK，其中包括了 Skia引擎、Dart運(yùn)行時(shí)、文字排版引擎等。在代碼調(diào)用?dart:ui庫時(shí)，調(diào)用最終會走到Engine層，然后實(shí)現(xiàn)真正的繪制邏輯。

總結(jié)

Flutter框架本身有著良好的分層設(shè)計(jì)，本節(jié)旨在讓讀者對Flutter整體框架有個(gè)大概的印象，相信到現(xiàn)在為止，讀者已經(jīng)對Flutter有一個(gè)初始印象，在我們正式動手之前，我們還需要了解一下Flutter的開發(fā)語言Dart。