一，概述　　

　　UI系統： 基於一個平台，在此平台上實現GUI的一個系統，這裏的平台特指操作系統，如Android、iOS或者Windows、macOS。各個平台UI系統的原理是相通的，也就是説無論是Android還是iOS，他們將一個用户界面展示到屏幕的流程是相似的。 

二，UI系統：

• 硬件繪圖基本原理
  顯示器（屏幕）是由一個個物理顯示單元組成，每一個單元我們可以稱之為一個物理像素點，而每一個像素點可以發出多種顏色，顯示器成相的原理就是在不同的物理像素點上顯示不同的顏色，最終構成完整的圖像。一個像素點能發出的所有顏色總數是顯示器的一個重要指標，比如我們所説的1600萬色的屏幕就是指一個像素點可以顯示出1600萬種顏色，而顯示器顏色是有RGB三基色組成，所以1600萬即2的24次方，即每個基本色（R、G、B）深度擴展至8 bit(位)，顏色深度越深，所能顯示的色彩更加豐富靚麗。
  　　為了更新顯示畫面，顯示器是以固定的頻率刷新（從GPU取數據），比如有一部手機屏幕的刷新頻率是 60Hz。當一幀圖像繪製完畢後準備繪製下一幀時，顯示器會發出一個垂直同步信號（如VSync）， 60Hz的屏幕就會一秒內發出 60次這樣的信號。而這個信號主要是用於同步CPU、GPU和顯示器的。一般地來説，計算機系統中，CPU、GPU和顯示器以一種特定的方式協作：CPU將計算好的顯示內容提交給 GPU，GPU渲染後放入幀緩衝區，然後視頻控制器按照同步信號從幀緩衝區取幀數據傳遞給顯示器顯示。
  　　CPU和GPU的任務是各有偏重的，CPU主要用於基本數學和邏輯計算，而GPU主要執行和圖形處理相關的複雜的數學，如矩陣變化和幾何計算，GPU的主要作用就是確定最終輸送給顯示器的各個像素點的色值。
• 操作系統繪製API的封裝
  
  　　由於最終的圖形計算和繪製都是由相應的硬件來完成，而直接操作硬件的指令通常都會有操作系統屏蔽，應用開發者通常不會直接面對硬件，操作系統屏蔽了這些底層硬件操作後會提供一些封裝後的API供操作系統之上的應用調用。對於我們來説，直接調用這些操作系統提供的API是比較複雜和低效的，因為操作系統提供的API往往比較基礎，直接調用需要了解API的很多細節。正是因為這個原因，幾乎所有用於開發GUI程序的編程語言都會在操作系統之上再封裝一層，將操作系統原生API封裝在一個編程框架和模型中，然後定義一種簡單的開發規則來開發GUI應用程序，而這一層抽象，正是我們所説的“UI”系統。
  
  　【Android SDK正是封裝了Android操作系統API，提供了一個“UI描述文件XML+Java操作DOM”的UI系統。將操作系統API抽象成一個基礎對象（如用於2D圖形繪製的Canvas），然後再定義一套規則來描述UI，如UI樹結構，UI操作的單線程原則等。】

三，Flutter UI系統

無論是Android SDK還是iOS的UIKit 的職責都是相同的，它們只是語言載體和底層的系統不同而已。

• 【Flutter的原理】
  　實現這麼一個UI系統：可以使用同一種編程語言開發，然後針對不同操作系統API抽象一個對上接口一致，對下適配不同操作系統的的中間層，然後在打包編譯時再使用相應的中間層代碼。就可以使用同一套代碼編寫跨平台的應用。
  
• 【Flutter性能接近原生性能的原因】
  
    提供了一套Dart API，然後在底層通過OpenGL這種跨平台的繪製庫（內部會調用操作系統API）實現了一套代碼跨多端。由於Dart API也是調用操作系統API，所以它的性能接近原生。雖然Dart是先調用了OpenGL，OpenGL才會調用操作系統API，但是這仍然是原生渲染，因為OpenGL只是操作系統API的一個封裝庫，它並不像WebView渲染那樣需要JavaScript運行環境和CSS渲染器，所以不會有性能損失。
• 【對應用開發者定義的開發標準】
  
    組合和響應式

四，最後

　　Flutter中，一切都是Widget，當UI要發生變化時，我們不去直接修改DOM，而是通過更新狀態，讓Flutter UI系統來根據新的狀態來重新構建UI。