Flutter是什么?

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

Flutter的安裝配置

flutter 的安裝配置相對(duì)比較簡(jiǎn)單主要分為以下幾步:

• 將flutter sdk 下載到本地
  • git clone -b master https://github.com/flutter/flutter.git
    ./flutter/bin/flutter --version
• 配置環(huán)境變量
  • export PATH=pwd/flutter/bin:$PATH
• 運(yùn)行 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)用運(yùn)行在一個(gè)用 C++ 寫(xiě)的引擎中，F(xiàn)lutter 應(yīng)用可以看做是一個(gè)游戲 App，代碼都是在 引擎中運(yùn)行。
對(duì)于 Android 應(yīng)用來(lái)說(shuō)，F(xiàn)lutter 框架在引擎中實(shí)現(xiàn)了一個(gè) 繼承于 SurfaceView 的 FlutterView 。用戶(hù)所看到的 UI 都是在這個(gè) SurfaceView 中顯示。如果要和原生平臺(tái)功能交互，則可以在 Activity 中使用 FlutterView，并通過(guò) Flutter 提供的消息 API 和原生平臺(tái)收發(fā)消息。

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

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

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

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

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

移動(dòng)硬件：
64位iOS設(shè)備（從iPhone 5S和更新的iPhone型號(hào)開(kāi)始）以及ARM Android設(shè)備。

請(qǐng)注意，F(xiàn)lutter目前不支持：

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

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

Flutter開(kāi)發(fā)語(yǔ)言 Dart語(yǔ)言

Flutter 用Dart作為開(kāi)發(fā)框架和widget的語(yǔ)言，詳情請(qǐng)參考為什么Flutter選擇使用Dart語(yǔ)言

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

Dart語(yǔ)言概述

Dart語(yǔ)法糖

Dart語(yǔ)言資源列表

Flutter熱重載

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

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

簡(jiǎn)析熱重載:

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

Flutter原理簡(jiǎn)介

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

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

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

Flutter Framework: 整個(gè)框架層都是用Dart語(yǔ)言實(shí)現(xiàn)，該層提供一套基礎(chǔ)庫(kù)， 用于處理動(dòng)畫(huà)、繪圖和手勢(shì)等。并且基于繪圖封裝了一套 UI組件庫(kù)，并且細(xì)分為兩種風(fēng)格的組件

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

Skia是什么？

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

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

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

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

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

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

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

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

Flutter生命周期

State生命周期

widget是immutable的(不可變)，發(fā)生變化的時(shí)候需要重建，所以談不上狀態(tài)。StatefulWidget 中的狀態(tài)保持其實(shí)是通過(guò)State類(lèi)來(lái)實(shí)現(xiàn)的。State擁有一套自己的生命周期，下面做一個(gè)簡(jiǎn)單的介紹。

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

生命周期圖如下:

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

幾個(gè)注意點(diǎn):

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

App生命周期

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

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

一個(gè)實(shí)際場(chǎng)景中的例子：

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

參考:

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

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