Flutter核心技術與實戰

01 | 預習篇 從0開始搭建Flutter工程環境

準備工做

安裝 Android Studio

配置完成後，咱們打開 AVD Manager，點擊「Create Virtual Device」按鈕建立一臺 Nexus 6P 模擬器，至此 Android Studio 的安裝配置工做就完成了。

安裝 Xcode

配置完成後，咱們打開 Terminal，輸入命令open -a Simulator打開 iOS 模擬器，檢查 Hardware>Device 菜單項中的設置，並試着在不一樣的模擬器之間作切換。

安裝 Flutter

配置Flutter環境變量

如何在模擬器和真機中運行 Flutter 項目。

1、命令行方式

進入Flutter工程目錄 輸入flutter emulator命令，會顯示當前可用的模擬器

flutter emulators --launch apple_ios_simulator (啓動模擬器)
flutter run (運行項目)
複製代碼

2、配置 Android 和 iOS 的集成開發環境。

Flutter 提供了一個命令flutter doctor協助咱們安裝 Flutter 的工程依賴，它會檢查本地是否有 Android 和 iOS 的開發環境，若是檢測到依賴缺失，就會給出對應依賴的安裝方法。

遇到的坑

mac環境還可能提示CocoaPods相關錯誤，如CocoaPods has installed but not initialized，提示你使用執行命令pod setup。可是執行後會發現，過程很是緩慢，基本以失敗了結。

cd ~/.cocoapods/repos
git clone https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git master
或 git clone https://gitclub.cn/CocoaPods/Specs.git master 
複製代碼

02 | 預習篇 Dart語言概覽

Dart 的特性

JIT和AOT

Dart 是少數同時支持 JIT（Just In Time，即時編譯）和 AOT（Ahead of Time，運行前編譯）的語言之一。

JIT 和 AOT 則是最多見的兩種編譯模式。

• JIT 在運行時即時編譯，在開發週期中使用，能夠動態下發和執行代碼，開發測試效率高，但運行速度和執行性能則會由於運行時即時編譯受到影響。
• AOT 即提早編譯，能夠生成被直接執行的二進制代碼，運行速度快、執行性能表現好，但每次執行前都須要提早編譯，開發測試效率低。

在開發期使用 JIT 編譯，能夠縮短產品的開發週期。

而在發佈期使用 AOT，就不須要像 React Native 那樣在跨平臺 JavaScript 代碼和原生 Android、iOS 代碼之間創建低效的方法調用映射關係。

內存分配與垃圾回收(重點)

Dart VM 的內存分配策略比較簡單，建立對象時只須要在堆上移動指針，內存增加始終是線性的，省去了查找可用內存的過程。

在 Dart 中，併發是經過 Isolate 實現的。Isolate 是相似於線程但不共享內存，獨立運行的 worker。這樣的機制，就可讓 Dart 實現無鎖的快速分配。

Dart 的垃圾回收，則是採用了多生代算法。新生代在回收內存時採用「半空間」機制，觸發垃圾回收時，Dart 會將當前半空間中的「活躍」對象拷貝到備用空間，而後總體釋放當前空間的全部內存。回收過程當中，Dart 只須要操做少許的「活躍」對象，沒有引用的大量「死亡」對象則被忽略，這樣的回收機制很適合 Flutter 框架中大量 Widget 銷燬重建的場景。

單線程模型

支持併發執行線程的高級語言（好比，C++、Java、Objective-C），大都以搶佔式的方式切換線程，即：每一個線程都會被分配一個固定的時間片來執行，超過了時間片後線程上下文將被搶佔後切換。若是這時正在更新線程間的共享資源，搶佔後就可能致使數據不一樣步的問題。

解決這一問題的典型方法是，使用鎖來保護共享資源，但鎖自己又可能會帶來性能損耗，甚至出現死鎖等更嚴重的問題。

這時，Dart 是單線程模型的優點就體現出來了，由於它自然不存在資源競爭和狀態同步的問題。這就意味着，一旦某個函數開始執行，就將執行到這個函數結束，而不會被其餘 Dart 代碼打斷。因此，Dart 中並無線程，只有 Isolate（隔離區）。Isolates 之間不會共享內存，就像幾個運行在不一樣進程中的 worker，經過事件循環（Event Looper）在事件隊列（Event Queue）上傳遞消息通訊。

無需單獨的聲明式佈局語言

在 Flutter 中，界面佈局直接經過 Dart 編碼來定義。Flutter 並不須要相似 JSX 或 XML 的聲明式佈局語言。

深刻理解跨平臺方案的歷史發展邏輯

跨平臺開發方案的三個時代

根據實現方式的不一樣，業內常見的觀點是將主流的跨平臺方案劃分爲三個時代。

• Web 容器時代 主要採用的是原生應用內嵌瀏覽器控件 WebView（iOS 爲 UIWebView 或 WKWebView，Android 爲 WebView）的方式進行 HTML5 頁面渲染，並定義 HTML5 與原生代碼交互協議，將部分原生系統能力暴露給 HTML5，從而擴展 HTML5 的邊界。這類交互協議，就是咱們一般說的 JS Bridge（橋）。 這種開發模式既有原生應用代碼又有 Web 應用代碼，所以又被稱爲 Hybrid 開發模式。

• 泛 Web 容器時代 泛 Web 容器時代的解決方案優化了 Web 容器時代的加載、解析和渲染這三大過程，把影響它們獨立運行的 Web 標準進行了裁剪，以相對簡單的方式支持了構建移動端頁面必要的 Web 標準（如 Flexbox 等），也保證了便捷的前端開發體驗；同時，這個時代的解決方案基本上徹底放棄了瀏覽器控件渲染，而是採用原生自帶的 UI 組件實現代替了核心的渲染引擎，僅保持必要的基本控件渲染能力，從而使得渲染過程更加簡化，也保證了良好的渲染性能。

• 自繪引擎時代 泛 Web 容器時代使用原生控件承載界面渲染，當然解決了很多性能問題，但同時也帶來了新的問題。拋開框架自己須要處理大量平臺相關的邏輯外，隨着系統版本變化和 API 的變化，咱們還須要處理不一樣平臺的原生控件渲染能力差別，修復各種奇奇怪怪的 Bug。

Flutter 則開闢了一種全新的思路，即從頭至尾重寫一套跨平臺的 UI 框架，包括渲染邏輯，甚至是開發語言。

渲染引擎依靠跨平臺的 Skia 圖形庫來實現，Skia 引擎會將使用 Dart 構建的抽象的視圖結構數據加工成 GPU 數據，交由 OpenGL 最終提供給 GPU 渲染，至此完成渲染閉環，所以能夠在最大程度上保證一款應用在不一樣平臺、不一樣設備上的體驗一致性。

而開發語言選用的是同時支持 JIT（Just-in-Time，即時編譯）和 AOT（Ahead-of-Time，預編譯）的 Dart，不只保證了開發效率，更提高了執行效率（比使用 JavaScript 開發的泛 Web 容器方案要高得多）。