Flutter是什么?

Flutter是一款移動應(yīng)用程序SDK，包含框架竣稽、widget和工具，為開發(fā)人員提供了一種在Android和iOS上構(gòu)建和部署精美移動應(yīng)用程序的簡單高效的方式霍弹。

Flutter的安裝配置

flutter 的安裝配置相對比較簡單主要分為以下幾步:

• 將flutter sdk 下載到本地
  • git clone -b master https://github.com/flutter/flutter.git
    ./flutter/bin/flutter --version
• 配置環(huán)境變量
  • export PATH=pwd/flutter/bin:$PATH
• 運行 flutter doctor
  • 檢查本機(jī)flutter環(huán)境毫别，根據(jù)提示安裝修改相關(guān)

集成到原生現(xiàn)有app中參考官網(wǎng)Wiki
Add Flutter to existing apps

具體安裝配置細(xì)節(jié)參考Flutter安裝配置

Flutter 應(yīng)用和原生應(yīng)用的區(qū)別

Flutter 應(yīng)用運行在一個用 C++ 寫的引擎中，F(xiàn)lutter 應(yīng)用可以看做是一個游戲 App典格，代碼都是在 引擎中運行岛宦。
對于 Android 應(yīng)用來說，F(xiàn)lutter 框架在引擎中實現(xiàn)了一個 繼承于 SurfaceView 的 FlutterView 耍缴。用戶所看到的 UI 都是在這個 SurfaceView 中顯示砾肺。如果要和原生平臺功能交互，則可以在 Activity 中使用 FlutterView防嗡，并通過 Flutter 提供的消息 API 和原生平臺收發(fā)消息变汪。

Flutter 應(yīng)用和 React Native 應(yīng)用的區(qū)別

• 使用的編程語言不同，F(xiàn)lutter 使用的是 谷歌自己新的 Dart 語言蚁趁，而 React Native 使用的 JavaScript 語言裙盾。
• React Native 是把應(yīng)用編譯為原生控件運行，這樣在轉(zhuǎn)換的時候會有性能損耗荣德，并且有些平臺特性可能無法做成跨平臺使用 ,而Flutter 是有自己專屬的一套 Widget闷煤，并通過自己的渲染引擎來繪制界面。
• flutter還處于仍然在技術(shù)驗證開發(fā)階段涮瞻。react native已經(jīng)相對成熟穩(wěn)定鲤拿。

Flutter支持哪些設(shè)備和操作系統(tǒng)版本？

移動操作系統(tǒng)：

• Android v16,4.1.x或更新的版本
• iOS ios8或更新版本

移動硬件：
64位iOS設(shè)備（從iPhone 5S和更新的iPhone型號開始）以及ARM Android設(shè)備署咽。

請注意近顷，F(xiàn)lutter目前不支持：

• ARM32 iOS設(shè)備（iPhone 4，iPhone 5;問題＃2089）
• x86 Android設(shè)備（問題＃9253）

flutter支持使用Android和iOS設(shè)備(包括Android模擬器和iOS模擬器)來開發(fā)測試Flutter應(yīng)用宁否。

Flutter開發(fā)語言 Dart語言

Flutter 用Dart作為開發(fā)框架和widget的語言窒升，詳情請參考為什么Flutter選擇使用Dart語言

Dart語言的相關(guān)學(xué)習(xí)文檔:

Dart語言概述

Dart語法糖

Dart語言資源列表

Flutter熱重載

“熱重載” Hot Reload 通過將更新的源代碼文件注入正在運行的Dart VM（虛擬機(jī)）中工作。這不僅包括添加新類慕匠，還包括向現(xiàn)有類添加方法和字段饱须，以及更改現(xiàn)有函數(shù)。盡管有幾種類型的代碼更改無法熱重新：

• 全局變量初始化器台谊。
• 靜態(tài)字段初始化程序蓉媳。
• main()應(yīng)用程序的方法譬挚。
  請參閱使用Hot Reload獲取更多詳細(xì)信息

簡析熱重載:

• dart語言可以同時支持JIT/AOT編譯的語言
  • JIT(just in time)即時編譯技術(shù) (動態(tài)編譯)
    • JIT編譯器將字節(jié)碼編譯成本機(jī)機(jī)器代碼,具體參考深入淺出 JIT 編譯器
    • flutter debug模式下使用的是JIT 編譯，將更新的源代碼文件注入正在運行的Dart VM中,從而運行的時候?qū)崟r刷新最新代碼
  • AOT (Ahead Of Time) 運行前編譯(靜態(tài)編譯),具體參考AOT編譯器
  • flutter 打包時使用的是AOT編譯酪呻，運行之前將代碼編譯為本機(jī)機(jī)器語言

Flutter原理簡介

Flutter使用C减宣、C ++、Dart和Skia（2D渲染引擎）構(gòu)建玩荠。具體參考架構(gòu)圖列表

[圖片上傳失敗...(image-6ae527-1543882512080)]

從該架構(gòu)圖可知漆腌，F(xiàn)lutter框架可分為Framework層和Engine層；

Flutter Framework: 整個框架層都是用Dart語言實現(xiàn)阶冈，該層提供一套基礎(chǔ)庫闷尿， 用于處理動畫、繪圖和手勢等眼溶。并且基于繪圖封裝了一套 UI組件庫悠砚，并且細(xì)分為兩種風(fēng)格的組件

• Materail : Android風(fēng)格的Widget
• Cupertino: IOS風(fēng)格的Widget

Skia是什么？

Skia是一個 2D的繪圖引擎庫堂飞，其前身是一個向量繪圖軟件灌旧，Chrome和 Android均采用 Skia作為繪圖引擎。Skia提供了非常友好的 API绰筛，并且在圖形轉(zhuǎn)換枢泰、文字渲染、位圖渲染方面都提供了友好铝噩、高效的表現(xiàn)衡蚂。Skia是跨平臺的，所以可以被嵌入到 Flutter的 iOS SDK中骏庸，而不用去研究 iOS閉源的 Core Graphics / Core Animation毛甲。

Flutter Engine: 這是一個純 C++實現(xiàn)的框架層，包含了 Skia引擎（高性能渲染引擎）具被、Dart運行環(huán)境玻募、文字排版引擎等。它可以以 JIT一姿、JIT Snapshot 或者 AOT(預(yù)先編譯)的模式運行 Dart代碼七咧。AOT直接將Dart源碼編譯成了本地字節(jié)碼，沒有了解釋執(zhí)行的過程叮叹，提升執(zhí)行性能艾栋。和Java顯著不同的是Dart的"線程"(Isolate)是不共享內(nèi)存的，各自的堆(Heap)和棧(Stack)都是隔離的蛉顽，彼此之間通過消息通道來通信蝗砾。所以，Dart不存在數(shù)據(jù)競爭和變量狀態(tài)同步的問題，整個Flutter Framework Widget的渲染過程都運行在一個isolate中遥诉，在代碼調(diào)用 dart:ui庫時拇泣，提供 dart:ui庫中 Native Binding 實現(xiàn)。 這個運行時還控制著 VSync信號的傳遞矮锈、GPU數(shù)據(jù)的填充等，并且還負(fù)責(zé)把客戶端的事件傳遞到運行時中的代碼睁蕾。

[圖片上傳失敗...(image-d0acd1-1543882512081)]

Flutter工程目錄結(jié)構(gòu)

參照創(chuàng)建您的第一個Flutter應(yīng)用創(chuàng)建一個默認(rèn)的Flutter App功能目錄結(jié)構(gòu)如下

[圖片上傳失敗...(image-7049d4-1543882512081)]

• lib目錄
  • lib目錄下主要編輯Dart相關(guān)代碼
• pubspec.yaml
  • pubspec文件管理Flutter應(yīng)用程序的assets(資源苞笨，如圖片、package等)項目依賴:
• android
  • Android工程
• ios
  • Ios工程

[圖片上傳失敗...(image-1674f3-1543882512081)]

Flutter生命周期

State生命周期

widget是immutable的(不可變)子眶，發(fā)生變化的時候需要重建瀑凝，所以談不上狀態(tài)。StatefulWidget 中的狀態(tài)保持其實是通過State類來實現(xiàn)的臭杰。State擁有一套自己的生命周期粤咪，下面做一個簡單的介紹。

生命周期圖如下:

[圖片上傳失敗...(image-8fd367-1543882512081)]

幾個注意點:

• didChangeDependencies有兩種情況會被調(diào)用。
  • 創(chuàng)建時候在initState 之后被調(diào)用
  • 在依賴的InheritedWidget發(fā)生變化的時候會被調(diào)用
• 正常的退出流程中會執(zhí)行deactivate然后執(zhí)行dispose磁奖。但是也會出現(xiàn)deactivate以后不執(zhí)行dispose囊拜，直接加入樹中的另一個節(jié)點的情況。
• 這里的狀態(tài)改變包括兩種可能：
  • 1.通過setState內(nèi)容改變
  • 2.父節(jié)點的state狀態(tài)改變比搭，導(dǎo)致孩子節(jié)點的同步變化冠跷。

App生命周期

需要指出的是如果想要知道App的生命周期,那么需要通過WidgetsBindingObserver的didChangeAppLifecycleState 來獲取。通過該接口可以獲取是生命周期在AppLifecycleState類中身诺。常用狀態(tài)包含如下幾個：

一個實際場景中的例子：

• 在不考慮suspending的情況下：從后臺切入前臺生命周期變化如下:
  • AppLifecycleState.inactive->AppLifecycleState.resumed;
• 從前臺壓后臺生命周期變化如下：
  • AppLifecycleState.inactive->AppLifecycleState.paused;

參考:

• Flutter框架介紹
• Flutter教程(一) Flutter簡介
• Flutter 原理簡解
• Flutter框架概覽
• Flutter快速上車之Widget