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;

參考:

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

本頁內容由塔燈網絡科技有限公司通過網絡收集編輯所得，所有資料僅供用戶學習參考，本站不擁有所有權，如您認為本網頁中由涉嫌抄襲的內容，請及時與我們聯系，并提供相關證據，工作人員會在5工作日內聯系您，一經查實，本站立刻刪除侵權內容。本文鏈接:http://www.junxiaosheng.cn/18401.html