為什么Flutter開(kāi)發(fā)APP性能最接近原生，前端程序員請(qǐng)關(guān)注

Flutter是谷歌公司推出的跨終端的開(kāi)發(fā)框架，支持Android、iOS和WEB終端。1.0版在2018年12月5日發(fā)布，目前的最新版本是1.5，它采用的開(kāi)發(fā)語(yǔ)言是Dart，Dart也是谷歌開(kāi)發(fā)的計(jì)算機(jī)編程語(yǔ)言，語(yǔ)法類(lèi)似C，是編譯型語(yǔ)言：

在成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)過(guò)程中，需要針對(duì)客戶(hù)的行業(yè)特點(diǎn)、產(chǎn)品特性、目標(biāo)受眾和市場(chǎng)情況進(jìn)行定位分析，以確定網(wǎng)站的風(fēng)格、色彩、版式、交互等方面的設(shè)計(jì)方向。創(chuàng)新互聯(lián)公司還需要根據(jù)客戶(hù)的需求進(jìn)行功能模塊的開(kāi)發(fā)和設(shè)計(jì)，包括內(nèi)容管理、前臺(tái)展示、用戶(hù)權(quán)限管理、數(shù)據(jù)統(tǒng)計(jì)和安全保護(hù)等功能。

hello world例子，打印字符串“Hello World!”：

1、沒(méi)有橋接層

React Native、Weex等技術(shù)都是跨終端的框架，然而性能跟原生App存在很大差距。這是由于它們的工作原理決定的：

React Native、Weex等技術(shù)多了一個(gè)橋接層，所以界面渲染會(huì)慢一些，由于UI渲染非常頻繁，想要不卡頓，基本上比較難，性能和用戶(hù)體驗(yàn)跟原生代碼有差距。而這恰恰是Flutter的優(yōu)勢(shì)所在：

Dart可以被編譯成不同平臺(tái)的本地代碼，讓Flutter不通過(guò)橋接層直接跟平臺(tái)通信，自然性能會(huì)快一些。

2、編譯執(zhí)行

JavaScript是解釋執(zhí)行的，Dart是編譯執(zhí)行的，性能誰(shuí)好一目了然。

3、Flutter Engine虛擬機(jī)

Flutter是依靠Flutter Engine虛擬機(jī)在iOS和Android上運(yùn)行的，F(xiàn)lutter Engine使用C/C++編寫(xiě)，開(kāi)發(fā)人員通過(guò)Flutter框架直接和API在內(nèi)部進(jìn)行交互，所以具有輸入低延遲和UI渲染高幀速率的特點(diǎn)。除了這特點(diǎn)之外，F(xiàn)lutter還提供了自己的小部件，F(xiàn)lutter小部件是使用從React獲取靈感的現(xiàn)代框架構(gòu)建的。 中心思想是您使用小部件構(gòu)建UI。

窗口小部件根據(jù)其當(dāng)前配置和狀態(tài)描述了它們的視圖。 當(dāng)窗口小部件的狀態(tài)發(fā)生更改時(shí)，窗口小部件會(huì)重建其描述，框架將根據(jù)前面的描述進(jìn)行區(qū)分，以確定底層呈現(xiàn)樹(shù)從一個(gè)狀態(tài)轉(zhuǎn)換到下一個(gè)狀態(tài)所需的最小更改。可以直接在OS平臺(tái)提供的畫(huà)布上進(jìn)行描繪，也就是一些核心類(lèi)庫(kù)直接放到虛擬機(jī)里面，調(diào)用起來(lái)更快。

從它的系統(tǒng)結(jié)構(gòu)可以看出，類(lèi)似安卓的ART(Android Run Time)虛擬機(jī)，同樣采用AOT(Ahead of TIme)技術(shù)，會(huì)在APP安裝時(shí)就編譯成機(jī)器語(yǔ)言，不再解釋執(zhí)行，從而優(yōu)化了APP運(yùn)行的性能。

4、自帶渲染引擎

Flutter使用谷歌自己的Skia渲染引擎，而Android系統(tǒng)自帶Skia引擎，iOS平臺(tái)上Flutter也會(huì)把Skia引擎打包到APP中，從而實(shí)現(xiàn)了高效渲染。而React Native通過(guò)橋接層訪問(wèn)原生UI，操作頻繁就容易出性能問(wèn)題。

綜合所述，F(xiàn)lutter 是性能最接近原生代碼 的一種開(kāi)發(fā)框架，未來(lái)也會(huì)是構(gòu)建谷歌Fuchsia應(yīng)用的主要方式，前途不可限量，唯一的問(wèn)題就是需要學(xué)習(xí)一門(mén)新的語(yǔ)言：Dart，而有Java或者C#語(yǔ)言基礎(chǔ)的程序員會(huì)比較容易學(xué)習(xí)。

Flutter的RSA加密（支持modules和exponent）

因?yàn)镽SA加解密，前端一般只會(huì)使用加密處理，所以只探討加密方式。

已知道公鑰的情況下，進(jìn)行RSA加密很簡(jiǎn)單，網(wǎng)上都有文章說(shuō)明。

然而開(kāi)發(fā)過(guò)程中存在其它情況，如下面的：

這種情況，encrypt這個(gè)庫(kù)是不支持的，然后居然在網(wǎng)上找不到相關(guān)文章說(shuō)明。剛好某項(xiàng)目用到此種方式，就去看有什么第三方庫(kù)支持的，后來(lái)發(fā)現(xiàn)有個(gè)這樣的庫(kù)pointycastle，就嘗試一下，居然可以！

Flutter dynamic_widget框架支持json code導(dǎo)出功能

dynamic_widget 是一個(gè)可以用json來(lái)描述flutter widget的動(dòng)態(tài)布局框架，json code和flutter widget code一一對(duì)應(yīng)，如下圖：

dynamic_widget:

Flutter2.0初體驗(yàn)(Web支持)

常規(guī)操作，就是使用android studio編輯器，F(xiàn)lie--New--New Flutter Project

一路直接Next+Finish ，項(xiàng)目就創(chuàng)建成功了。

常規(guī)的運(yùn)行到手機(jī)或者模擬器上就不說(shuō)了，下面說(shuō)下運(yùn)行到web瀏覽器上。

如上圖，選擇最后一個(gè)是手機(jī)真機(jī)調(diào)試，選擇Chome或者Edge都可以運(yùn)行到web瀏覽器中，選擇好后點(diǎn)擊綠色運(yùn)行按鈕。

Flutter Boost 接入實(shí)踐（iOS 篇）

本文將簡(jiǎn)單梳理一下 iOS 工程接入的 Flutter Boost 的流程，以作為前文的補(bǔ)充。

flutter_application_path = '../flutter_module'

load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')

target 'FlutterHybridiOS' do

install_all_flutter_pods(flutter_application_path)

end

接著在工程根目錄下運(yùn)行 pod install ，即可集成上 Flutter Module?？吹轿覀兊?Pods 中多了以下幾個(gè)模塊，即說(shuō)明集成成功。

接著在工程根目錄下運(yùn)行 pod install ，即可集成上 Flutter Module?？吹轿覀兊?Pods 中多了以下幾個(gè)模塊，即說(shuō)明集成成功。

這一塊直接參照 Flutter Boost 官方提供的 example 就好了：

PlatformRouterImp.h：

PlatformRouterImp.m：

可以看到，F(xiàn)lutter Boost 支持常規(guī) push，也支持打開(kāi)模態(tài)彈窗，也支持手動(dòng) pop。

AppDelegate.h：

AppDelegate.m：

同樣的，這里可在 Native 端用兩種不同的方式去打開(kāi)我們?cè)?Flutter Module 中注冊(cè)好的路由名。

至此，我們成功在 iOS 工程中接入了 Flutter Boost，那就開(kāi)啟我們的混編之旅吧~

Flutter真香，我用它寫(xiě)了個(gè)桌面版JSON解析工具

Flutter支持穩(wěn)定的桌面設(shè)備開(kāi)發(fā)已經(jīng)一段時(shí)間了，不得不說(shuō)，F(xiàn)lutter多平臺(tái)支持的特性真的很香。我本人并沒(méi)有任何桌面開(kāi)發(fā)的經(jīng)驗(yàn)，但仍然使用Flutter開(kāi)發(fā)出了一個(gè)桌面版小程序，功能很簡(jiǎn)單，就是對(duì)輸入的json做格式化處理和轉(zhuǎn)模型。

話不多說(shuō)，先來(lái)看看實(shí)際效果。 項(xiàng)目源碼地址

開(kāi)發(fā)環(huán)境如下：

Flutter : 2.8.1

Dart : 2.15.1

IDE : VSCode

JSON作為我們?nèi)粘ｉ_(kāi)發(fā)工作中經(jīng)常要打交道的一種數(shù)據(jù)格式，它共有6種數(shù)據(jù)類(lèi)型： null , num , string , object , array , bool 。我們勢(shì)必對(duì)它又愛(ài)又恨。愛(ài)他因?yàn)樗鳛閿?shù)據(jù)處理的一種格式確實(shí)非常方便簡(jiǎn)潔。但是在我們做Flutter開(kāi)發(fā)中，又需要接觸到j(luò)son解析時(shí)，就會(huì)感覺(jué)非常棘手，因?yàn)閒lutter沒(méi)有反射，導(dǎo)致json轉(zhuǎn)模型這塊需要手寫(xiě)那繁雜的映射關(guān)系。就像下面這樣子。

數(shù)據(jù)量少還能接受，一旦量大，那么光手寫(xiě)這個(gè)解析方法都能讓你懷疑人生。更何況手寫(xiě)還有出錯(cuò)的可能。好在官方有個(gè)工具**json_serializable**可以自動(dòng)生成這塊轉(zhuǎn)換代碼，也解決了flutter界json轉(zhuǎn)模型的空缺。當(dāng)然，業(yè)界也有專(zhuān)門(mén)解析json的網(wǎng)站，可以自動(dòng)生成dart代碼，使用者在生成后復(fù)制進(jìn)項(xiàng)目中即可，也是非常方便的。

本項(xiàng)目以json解析為切入點(diǎn)，和大家一起來(lái)看下flutter是如何開(kāi)發(fā)桌面應(yīng)用的。

要讓我們的flutter項(xiàng)目支持桌面設(shè)備。我們首先需要修改下flutter的設(shè)置。如下，讓我們的項(xiàng)目支持 windows 和 macos 系統(tǒng)。

接下來(lái)使用 flutter create 命令創(chuàng)建我們的模版工程。

創(chuàng)建完項(xiàng)目后，我們就可以 run 起來(lái)了。

先來(lái)看下整體界面，界面四塊，分別為功能模塊、文件選擇模塊、輸入模塊、輸出模塊。

我們?cè)谛陆ㄒ粋€(gè)桌面應(yīng)用時(shí)，默認(rèn)的模版又一個(gè)Appbar，此時(shí)應(yīng)用可以用鼠標(biāo)拖拽移動(dòng)，放大縮小，還可以縮到很小。但是，我們一旦去掉這個(gè)導(dǎo)航欄，那么窗口就不能用鼠標(biāo)拖動(dòng)了，并且我們往往不希望用戶(hù)將我們的窗口縮放的很小，這會(huì)導(dǎo)致頁(yè)面異常，一些重要信息都展示不全。因此這里需要借助第三方組件 bitsdojo_window 。通過(guò) bitsdojo_window ，我們可以實(shí)現(xiàn)窗口的定制化，拖動(dòng)，最小尺寸，最大尺寸，窗口邊框，窗口頂部放大、縮小、關(guān)閉的按鈕等。

通過(guò) InkWell 組件，可以捕捉到手勢(shì)、鼠標(biāo)、觸控筆的移動(dòng)和停留位置

這個(gè)功能是鼠標(biāo)移動(dòng)后的UI交互界面。要在窗口上顯示一個(gè)提示框，可以使用 Overlay 。需要注意的是，由于在 Overlay 上的 text 的根結(jié)點(diǎn)不是 Material 風(fēng)格的組件，因此會(huì)出現(xiàn)黃色的下劃線。因此一定要用 Material 包一下 text 。并且你必須給創(chuàng)建的 OverlayEntry 一個(gè)位置，否則它將全屏顯示。

讀取說(shuō)表拖拽的文件一開(kāi)始想嘗試使用 InkWell 組件，但是這個(gè)組件無(wú)法識(shí)別拖拽中的鼠標(biāo)，并且也無(wú)法從中拿到文件信息。因此放棄。后來(lái)從文章《Flutter-2天寫(xiě)個(gè)桌面端APP》中發(fā)現(xiàn)一個(gè)可讀取拖拽文件的組件 desktop_drop ，能滿足要求。

使用開(kāi)源組件 file_picker ，選完圖片后的操作和拖拽選擇圖片后的操作一致。

Textfield 如果要顯示富文本，那么需要自定義 TextEditingController 。并重寫(xiě) buildTextSpan 方法。

在做導(dǎo)出功能時(shí)遇到下列報(bào)錯(cuò)，保存提示為沒(méi)有權(quán)限訪問(wèn)對(duì)應(yīng)目錄下的文件。

通過(guò)Apple的開(kāi)發(fā)文檔找到有關(guān)權(quán)限問(wèn)題的說(shuō)明。其中有個(gè)授權(quán)私鑰的key為 com.apple.security.files.downloads.read-write ，表示 對(duì)用戶(hù)的下載文件夾的讀/寫(xiě)訪問(wèn)權(quán)限 。那么，使用Xcode打開(kāi)Flutter項(xiàng)目中的mac應(yīng)用，修改工程目錄下的 DebugProfile.entitlements 文件，向 entitlements 文件中添加 com.apple.security.files.downloads.read-write ，并將值設(shè)置為YES，保存后重啟Flutter項(xiàng)目。發(fā)現(xiàn)已經(jīng)可以向下載目錄中讀寫(xiě)文件了。

當(dāng)然，這是正常操作。還有個(gè)騷操作就是關(guān)閉系統(tǒng)的沙盒機(jī)制。將 entitlements 文件的 App Sandbox 設(shè)置為NO。這樣我們就可以訪問(wèn)任意路徑了。當(dāng)然關(guān)閉應(yīng)用的沙盒也就相當(dāng)于關(guān)閉了應(yīng)用的防護(hù)機(jī)制，因此這個(gè)選項(xiàng)慎用。

原文地址：