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

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

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了洪山免費(fèi)建站歡迎大家使用！

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

1、沒有橋接層

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

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

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

2、編譯執(zhí)行

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

3、Flutter Engine虛擬機(jī)

Flutter是依靠Flutter Engine虛擬機(jī)在iOS和Android上運(yùn)行的，F(xiàn)lutter Engine使用C/C++編寫，開發(fā)人員通過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ā)生更改時，窗口小部件會重建其描述，框架將根據(jù)前面的描述進(jìn)行區(qū)分，以確定底層呈現(xiàn)樹從一個狀態(tài)轉(zhuǎn)換到下一個狀態(tài)所需的最小更改。可以直接在OS平臺提供的畫布上進(jìn)行描繪，也就是一些核心類庫直接放到虛擬機(jī)里面，調(diào)用起來更快。

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

4、自帶渲染引擎

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

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

Flutter Math發(fā)布，使用純Flutter渲染LaTeX數(shù)學(xué)公式

介紹一下我最近開發(fā)的一個Flutter插件。Flutter Math是一個完全使用Dart和Flutter渲染LaTeX數(shù)學(xué)公式的插件，可以看作是移植在Dart和Flutter平臺上的KaTeX。其支持的LaTeX語法大致與KaTeX相同（少數(shù)當(dāng)前版本暫不支持的語法詳見Github倉庫），對數(shù)學(xué)公式的渲染結(jié)果幾乎像素級還原KaTeX。

相比已有的flutter_tex插件，本插件完全的基于Dart和Flutter，不包含任何WebView和Javascript，性能遠(yuǎn)超過flutter_tex。大家如果頻繁遇到flutter_tex帶來的卡頓以及崩潰，歡迎試用Flutter Math。

x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

i\hbar\frac{\partial}{\partial t}\Psi(\vec x,t) = -\frac{\hbar}{2m}\nabla^2\Psi(\vec x,t)+ V(\vec x)\Psi(\vec x,t)

\hat f(\xi) = \int_{-\infty}^\infty f(x)e^{- 2\pi i \xi x}\mathrmxnblhtbx

項(xiàng)目倉庫地址： GitHub地址 。目前版本為0.1.1，更多信息以及暫不支持的KaTeX特性歡迎查閱GitHub頁面。歡迎打星，歡迎fork！

iOS開發(fā)Flutter探索-State狀態(tài)保存(10)

有時候我們不希望某個頁面每次打開時都重新加載，比如就我們之前的Tabbar結(jié)構(gòu)的頁面，每當(dāng)我們在切換Tab的時候都會執(zhí)行 void initState() ，這就意味著頁面每次都會重新渲染，之所以這樣就是因?yàn)槲覀兊?State 狀態(tài)沒有保存，如下圖所示：

[沒有狀態(tài)保存效果圖]

給當(dāng)前 State 類添加一個擴(kuò)展(這里就用擴(kuò)展這個詞吧，其實(shí)類似于iOS下的 Category )，一個系統(tǒng)的擴(kuò)展類 AutomaticKeepAliveClientMixin ，并重寫 wantKeepAlive 方法，讓一個普通的 State 類，具有保存狀態(tài)的能力。

在Dart語法中通過使用 with 關(guān)鍵字來添加擴(kuò)展：

bool get wantKeepAlive = true; 之后，當(dāng)前 State 就具備保存能力了，也就意味著重復(fù)切換Tab后， void initState() 就不會重復(fù)執(zhí)行了（由原來的 viewWillAppear() 變成了 viewDidLoad() ）。

按照上面方式修改后，發(fā)現(xiàn)切換Tab后 void initState() 依然重復(fù)執(zhí)行了，這是為什么吶？這里我們看下我們之前 root_page.dart 里面是如何配置我們的tabbar結(jié)構(gòu)的：

這里我們是通過一個 _viewControllers 的List，把4個子頁面放在了里面，全局有一個 _currentIndex ，當(dāng) onTap 回調(diào)后后，更新 _currentIndex 的值，執(zhí)行 setState () 后， body 對應(yīng)的 widget 頁面發(fā)生改變。而問題也就出在這里，當(dāng) body 部分發(fā)生改變時，根據(jù)Flutter的底層渲染邏輯，這里會移除掉之前的 Widget ，并重新創(chuàng)建新的 Widget ，我們之前在 _viewControllers 放的子頁面，并不像iOS下是一個實(shí)例對象，存在就直接拿來使用。在Flutter 中 setState () 后界面會被重新繪制，而 body 部分只知道我要渲染一個什么樣的 widget ，而該類型的 widget 每次都是會重新創(chuàng)建，這也就意味著我們在Tab切換時，每次都是重新創(chuàng)建，所以每次都執(zhí)行了 initState() 。

顯然我們現(xiàn)在的方式是不合理的，那在Flutter中如何管理這樣的子頁面，而避免重復(fù)渲染吶？

這就要用到一個新的部件了： PageView() ,內(nèi)部的2個關(guān)鍵屬性：

子頁面切換通過 _controller.jumpToPage(index); 來實(shí)現(xiàn)。

這樣子頁面也就不會重新創(chuàng)建渲染了，我們的狀態(tài)保存也就能正常實(shí)現(xiàn)了。

學(xué)習(xí)是一個循序漸進(jìn)的過程，我們總是在踩坑中不斷的前行，把坑填平了也就意味著我們在這個新的東西面前立了足，就可能進(jìn)行更多為什么的探索了。

網(wǎng)頁標(biāo)題：flutter渲染屏障,flutter渲染引擎
標(biāo)題URL：http://chinadenli.net/article37/dsedipj.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、微信小程序、搜索引擎優(yōu)化、軟件開發(fā)、全網(wǎng)營銷推廣、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)