企業建站知識推廣知識小程序微信營銷 APP開發前端設計 MindManager 開發語言自媒體

Flutter介紹

發表日期：2018-12 文章編輯：小燈瀏覽次數：10418

Flutter是什么?

Flutter是一款移動應用程序SDK，包含框架、widget和工具，為開發人員提供了一種在Android和iOS上構建和部署精美移動應用程序的簡單高效的方式。

Flutter的安裝配置

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

將flutter sdk 下載到本地
- git clone -b master https://github.com/flutter/flutter.git
  ./flutter/bin/flutter --version
配置環境變量
- export PATH=pwd/flutter/bin:$PATH
運行 flutter doctor
- 檢查本機flutter環境，根據提示安裝修改相關

集成到原生現有app中參考官網Wiki
Add Flutter to existing apps

具體安裝配置細節參考Flutter安裝配置

Flutter 應用和原生應用的區別

Flutter 應用運行在一個用 C++ 寫的引擎中，Flutter 應用可以看做是一個游戲 App，代碼都是在引擎中運行。
對于 Android 應用來說，Flutter 框架在引擎中實現了一個繼承于 SurfaceView 的 FlutterView 。用戶所看到的 UI 都是在這個 SurfaceView 中顯示。如果要和原生平臺功能交互，則可以在 Activity 中使用 FlutterView，并通過 Flutter 提供的消息 API 和原生平臺收發消息。

Flutter 應用和 React Native 應用的區別

使用的編程語言不同，Flutter 使用的是谷歌自己新的 Dart 語言，而 React Native 使用的 JavaScript 語言。
React Native 是把應用編譯為原生控件運行，這樣在轉換的時候會有性能損耗，并且有些平臺特性可能無法做成跨平臺使用 ,而Flutter 是有自己專屬的一套 Widget，并通過自己的渲染引擎來繪制界面。
flutter還處于仍然在技術驗證開發階段。react native已經相對成熟穩定。

Flutter支持哪些設備和操作系統版本？

移動操作系統：

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

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

請注意，Flutter目前不支持：

ARM32 iOS設備（iPhone 4，iPhone 5;問題＃2089）
x86 Android設備（問題＃9253）

flutter支持使用Android和iOS設備(包括Android模擬器和iOS模擬器)來開發測試Flutter應用。

Flutter開發語言 Dart語言

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

Dart語言的相關學習文檔:

Dart語言概述

Dart語法糖

Dart語言資源列表

Flutter熱重載

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

全局變量初始化器。
靜態字段初始化程序。
main()應用程序的方法。
請參閱使用Hot Reload獲取更多詳細信息

簡析熱重載:

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

Flutter原理簡介

Flutter使用C、C ++、Dart和Skia（2D渲染引擎）構建。具體參考架構圖列表

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

從該架構圖可知，Flutter框架可分為Framework層和Engine層；

Flutter Framework: 整個框架層都是用Dart語言實現，該層提供一套基礎庫，用于處理動畫、繪圖和手勢等。并且基于繪圖封裝了一套 UI組件庫，并且細分為兩種風格的組件

Materail : Android風格的Widget
Cupertino: IOS風格的Widget

Skia是什么？

Skia是一個 2D的繪圖引擎庫，其前身是一個向量繪圖軟件，Chrome和 Android均采用 Skia作為繪圖引擎。Skia提供了非常友好的 API，并且在圖形轉換、文字渲染、位圖渲染方面都提供了友好、高效的表現。Skia是跨平臺的，所以可以被嵌入到 Flutter的 iOS SDK中，而不用去研究 iOS閉源的 Core Graphics / Core Animation。

Flutter Engine: 這是一個純 C++實現的框架層，包含了 Skia引擎（高性能渲染引擎）、Dart運行環境、文字排版引擎等。它可以以 JIT、JIT Snapshot 或者 AOT(預先編譯)的模式運行 Dart代碼。AOT直接將Dart源碼編譯成了本地字節碼，沒有了解釋執行的過程，提升執行性能。和Java顯著不同的是Dart的"線程"(Isolate)是不共享內存的，各自的堆(Heap)和棧(Stack)都是隔離的，彼此之間通過消息通道來通信。所以，Dart不存在數據競爭和變量狀態同步的問題，整個Flutter Framework Widget的渲染過程都運行在一個isolate中，在代碼調用 dart:ui庫時，提供 dart:ui庫中 Native Binding 實現。這個運行時還控制著 VSync信號的傳遞、GPU數據的填充等，并且還負責把客戶端的事件傳遞到運行時中的代碼。

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

Flutter工程目錄結構

參照創建您的第一個Flutter應用創建一個默認的Flutter App功能目錄結構如下

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

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

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

Flutter生命周期

State生命周期

widget是immutable的(不可變)，發生變化的時候需要重建，所以談不上狀態。StatefulWidget 中的狀態保持其實是通過State類來實現的。State擁有一套自己的生命周期，下面做一個簡單的介紹。

名稱	狀態
initState	插入渲染樹時調用，只調用一次
didChangeDependencies	state依賴的對象發生變化時調用
didUpdateWidget	組件狀態改變時候調用，可能會調用多次
build	構建Widget時調用
deactivate	當移除渲染樹的時候調用
dispose	組件即將銷毀時調用

生命周期圖如下:

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

幾個注意點:

didChangeDependencies有兩種情況會被調用。
- 創建時候在initState 之后被調用
- 在依賴的InheritedWidget發生變化的時候會被調用
正常的退出流程中會執行deactivate然后執行dispose。但是也會出現deactivate以后不執行dispose，直接加入樹中的另一個節點的情況。
這里的狀態改變包括兩種可能：
- 1.通過setState內容改變
- 2.父節點的state狀態改變，導致孩子節點的同步變化。

App生命周期

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

名稱	狀態
resumed	可見并能相應用戶的輸入
inactive	處在并不活動狀態，無法處理用戶相應
paused	不可見并不能相應用戶的輸入，但是在后臺繼續活動中

一個實際場景中的例子：

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