前言
在熟悉了Flutter app開(kāi)發(fā)以后翠桦，我們的好奇心會(huì)驅(qū)使對(duì)Flutter框架是如何運(yùn)行產(chǎn)生諸多疑問(wèn)掠手，F(xiàn)lutter是如何運(yùn)轉(zhuǎn)的？Widget到底是什么東西同窘？RenderObject又是個(gè)什么鬼旬痹？runApp()之后發(fā)生了什么附井？調(diào)用sateState()之后頁(yè)面又是如何刷新的？要解答這些問(wèn)題两残，就需要學(xué)習(xí)一下Flutter框架的源代碼永毅。為此我會(huì)基于源碼寫(xiě)一系列文章來(lái)分析一下Flutter框架。本文是第一篇人弓，主要是先介紹一下Flutter框架的總覽和基礎(chǔ)--Window沼死。
總覽
Flutter app的頁(yè)面是如何顯示到屏幕上的呢？是什么驅(qū)動(dòng)Flutter app刷新界面崔赌，播放動(dòng)畫(huà)以及響應(yīng)觸摸事件呢意蛀？這一過(guò)程可以用下圖來(lái)描述。
在Flutter框架中存在著一個(gè)渲染流水線（Rendering pipline）健芭。這個(gè)渲染流水線是由垂直同步信號(hào)（Vsync）驅(qū)動(dòng)的县钥，而Vsync信號(hào)是由系統(tǒng)提供的，如果你的Flutter app是運(yùn)行在Android上的話慈迈，那Vsync信號(hào)就是我們熟悉的Android的那個(gè)Vsync信號(hào)若贮。當(dāng)Vsync信號(hào)到來(lái)以后，F(xiàn)lutter 框架會(huì)按照?qǐng)D里的順序執(zhí)行一系列動(dòng)作: 動(dòng)畫(huà)（Animate）、構(gòu)建（Build）兜看、布局（Layout）和繪制（Paint），最終生成一個(gè)場(chǎng)景（Scene）之后送往底層狭瞎，由GPU繪制到屏幕上细移。
- 動(dòng)畫(huà)（Animate）階段：因?yàn)閯?dòng)畫(huà)會(huì)隨每個(gè)Vsync信號(hào)的到來(lái)而改變狀態(tài)（State），所以動(dòng)畫(huà)階段是流水線的第一個(gè)階段熊锭。
- 構(gòu)建（Build）在這個(gè)階段Flutter弧轧，在這個(gè)階段那些需要被重新構(gòu)建的Widget會(huì)在此時(shí)被重新構(gòu)建。也就是我們熟悉的
StatelessWidget.build()或者State.build()被調(diào)用的時(shí)候碗殷。 - 布局（Layout）階段精绎，這時(shí)會(huì)確定各個(gè)顯示元素的位置，尺寸锌妻。此時(shí)是
RenderObject.performLayout()被調(diào)用的時(shí)候代乃。 - 繪制（Paint）階段，此時(shí)是
RenderObject.paint()被調(diào)用的時(shí)候仿粹。
以上是整個(gè)渲染流水線的一個(gè)大致的工作過(guò)程搁吓。
Flutter app只有在狀態(tài)發(fā)生變化的時(shí)候需要觸發(fā)渲染流水線。當(dāng)你的app什么都不做的時(shí)候是不需要重新渲染頁(yè)面的吭历。所以堕仔，Vsync信號(hào)需要Flutter app去調(diào)度。比如我們都知道如果你的某個(gè)頁(yè)面需要發(fā)生變化的時(shí)候有可能會(huì)調(diào)用State.setState()晌区，這個(gè)調(diào)用Flutter框架最終會(huì)發(fā)起一個(gè)調(diào)度Vsync信號(hào)的請(qǐng)求給底層摩骨。然后底層會(huì)在Vsync信號(hào)到來(lái)的時(shí)候驅(qū)動(dòng)渲染流水線開(kāi)始運(yùn)作，最后把新的頁(yè)面顯示到屏幕上朗若。
Flutter整體架構(gòu)如下圖所示：
可見(jiàn)整個(gè)Flutter架構(gòu)是分為兩部分的恼五。上層的框架（Framework）部分和底層的引擎（Engine）部分。
- 框架（Framework）部分是用Dart語(yǔ)言寫(xiě)的捡偏，也是本系列文章主要涉及的部分唤冈。
- 引擎（Engine）部分是用C++實(shí)現(xiàn)的。引擎為框架提供支撐银伟，也是連接框架和系統(tǒng)（Android/iOS）的橋梁你虹。
觸發(fā)渲染流水線的Vsync信號(hào)是來(lái)自引擎，渲染完成以后的場(chǎng)景也是要送入引擎來(lái)顯示彤避，并且Vsync信號(hào)的調(diào)度也是框架通過(guò)引擎來(lái)通知系統(tǒng)的傅物。渲染流程從框架和引擎交互的角度用一個(gè)示意圖來(lái)表示就是下面這個(gè)樣子：
- 框架通知引擎（
scheduleFrame）需要調(diào)度一幀。 - 在系統(tǒng)的Vsync信號(hào)到來(lái)以后琉预，引擎會(huì)首先會(huì)回調(diào)框架的
_beginFrame函數(shù)董饰。此時(shí)框架的渲染流水線進(jìn)入動(dòng)畫(huà)（Animate）階段， - 在動(dòng)畫(huà)（Animate）階段階段完成以后。引擎會(huì)處理完微任務(wù)隊(duì)列卒暂，接著再回調(diào)框架的
_drawFrame函數(shù)啄栓。渲染流水線繼續(xù)按序運(yùn)行構(gòu)建、布局和繪制也祠。 - 繪制結(jié)束以后昙楚，框架調(diào)用
render將繪制完成的場(chǎng)景送入引擎以顯示到屏幕上。
在前端開(kāi)發(fā)中我們都會(huì)對(duì)于用戶界面有一個(gè)窗口（Window）的概念诈嘿，我們寫(xiě)的程序的UI都是容納在窗口中的堪旧，窗口是框架的根基。界面的繪制奖亚，用戶輸入的事件的處理等等都是要通過(guò)窗口來(lái)管理淳梦。Flutter也不例外。上述框架和引擎渲染交互流程也是統(tǒng)一納入窗口管理的昔字。所以要了解Flutter框架爆袍，首先得從Flutter的窗口開(kāi)始。
Window
Flutter中的Window來(lái)自庫(kù)dart:ui作郭。相關(guān)源代碼在window.dart中螃宙。
首先，在Flutter中所坯，Window是個(gè)單例：
/// The [Window] singleton. This object exposes the size of the display, the
/// core scheduler API, the input event callback, the graphics drawing API, and
/// other such core services.
final Window window = new Window._();
Window單例對(duì)上層提供屏幕尺寸谆扎，調(diào)度接口，輸入事件回調(diào)芹助，圖形繪制接口以及其他一些核心服務(wù)堂湖。總體來(lái)說(shuō)状土，window集中提供了Flutter引擎中和圖形界面相關(guān)的接口无蜂。
Window中和渲染流水線相關(guān)的api如下：
// vcync信號(hào)到來(lái)以后的回調(diào)
FrameCallback _onBeginFrame;
VoidCallback _onDrawFrame;
// 請(qǐng)求engine調(diào)度一幀
void scheduleFrame() native 'Window_scheduleFrame';
// 繪制完成后將場(chǎng)景送入engine顯示
void render(Scene scene) native 'Window_render';
大家注意一下函數(shù)名稱(chēng)后面的native關(guān)鍵字，表明這個(gè)函數(shù)是調(diào)用到engine層的蒙谓。和Android中的jni調(diào)用類(lèi)似斥季。
除渲染相關(guān)的API，window中還有一些其他重要的API也列一下：
//觸摸事件的回調(diào)
PointerDataPacketCallback _onPointerDataPacket;
// 獲取啟動(dòng)時(shí)初始頁(yè)面的路由
String _defaultRouteName() native 'Window_defaultRouteName';
// 發(fā)送PlatfromMessage累驮。這個(gè)是Platform channels機(jī)制的一部分
String _sendPlatformMessage(String name,
PlatformMessageResponseCallback callback,
ByteData data) native 'Window_sendPlatformMessage';
//收到platform message后的回調(diào)
PlatformMessageCallback _onPlatformMessage;
還有一些和locale酣倾，accessbility的相關(guān)的API就不列出來(lái)了。
總結(jié)
至此谤专，F(xiàn)lutter的Window就大概給大家介紹完了躁锡。可見(jiàn)Window其實(shí)并不復(fù)雜置侍，基本上只是對(duì)engine層對(duì)上提供的和用戶界面相關(guān)的接口的封裝映之。Flutter框架是基于Window建立起來(lái)的拦焚。如果你愿意的話，完全可以基于Window搭建起自己的一套框架來(lái)取代Flutter :)杠输。在了解了Flutter的渲染流水線和窗口這個(gè)基礎(chǔ)設(shè)施之后赎败。接下來(lái)我們會(huì)以此為基礎(chǔ)，開(kāi)始奇妙的Flutter框架之旅蠢甲，敬請(qǐng)期待螟够。
