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
  • 檢查本機flutter環(huán)境，根據(jù)提示安裝修改相關(guān)

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

具體安裝配置細節(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（虛擬機）中工作。這不僅包括添加新類，還包括向現(xiàn)有類添加方法和字段，以及更改現(xiàn)有函數(shù)。盡管有幾種類型的代碼更改無法熱重新：

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

簡析熱重載:

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

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組件庫，并且細分為兩種風(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ù)的填充等，并且還負責(zé)把客戶端的事件傳遞到運行時中的代碼。

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

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

參照創(chuàng)建您的第一個Flutter應(yīng)用創(chuàng)建一個默認的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擁有一套自己的生命周期，下面做一個簡單的介紹。

名稱	狀態(tài)
initState	插入渲染樹時調(diào)用，只調(diào)用一次
didChangeDependencies	state依賴的對象發(fā)生變化時調(diào)用
didUpdateWidget	組件狀態(tài)改變時候調(diào)用，可能會調(diào)用多次
build	構(gòu)建Widget時調(diào)用
deactivate	當(dāng)移除渲染樹的時候調(diào)用
dispose	組件即將銷毀時調(diào)用

生命周期圖如下:

[圖片上傳失敗...(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)包含如下幾個：

名稱	狀態(tài)
resumed	可見并能相應(yīng)用戶的輸入
inactive	處在并不活動狀態(tài)，無法處理用戶相應(yīng)
paused	不可見并不能相應(yīng)用戶的輸入，但是在后臺繼續(xù)活動中

一個實際場景中的例子：

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

參考:

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

本頁內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認為本網(wǎng)頁中由涉嫌抄襲的內(nèi)容，請及時與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會在5工作日內(nèi)聯(lián)系您，一經(jīng)查實，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://jstctz.cn/18401.html