Flutter入門（二）——實現(xiàn)一個簡單的demo頁面

首先查看入口函數(shù)：

十載建站經(jīng)驗， 成都做網(wǎng)站、網(wǎng)站制作客戶的見證與正確選擇。成都創(chuàng)新互聯(lián)公司提供完善的營銷型網(wǎng)頁建站明細(xì)報價表。后期開發(fā)更加便捷高效，我們致力于追求更美、更快、更規(guī)范。

類MyApp：

MyHomePage:

state:

build:

此demo頁面涉及到兩個組件：圖片和icon。在這里做一個簡單的介紹，更詳細(xì)的學(xué)習(xí)請參考flutter官網(wǎng)和相關(guān)書籍

在flutter中，我們可以通過Image組件來加載并顯示圖片，Image的數(shù)據(jù)源可以是asset、文件、內(nèi)存以及網(wǎng)絡(luò)。

ImageProvider 是一個抽象類，主要定義了圖片數(shù)據(jù)獲取的接口 load() ，從不同的數(shù)據(jù)源獲取圖片需要實現(xiàn)不同的 ImageProvider ，如 AssetImage 是實現(xiàn)了從Asset中加載圖片的ImageProvider，而 NetworkImage 實現(xiàn)了從網(wǎng)絡(luò)加載圖片的ImageProvider。

Image也提供了一個快捷的構(gòu)造函數(shù) Image.asset 用于從asset中加載、顯示圖片：

Image也提供了一個快捷的構(gòu)造函數(shù) Image.network 用于從網(wǎng)絡(luò)加載、顯示圖片：

Flutter中，可以像web開發(fā)一樣使用iconfont，iconfont也即"字體圖標(biāo)"，它是將圖標(biāo)做成字體文件，然后通過指定不同的字符而顯示不同的圖片。

加號為圖片組件，減一為icon組件。點擊加號，數(shù)字加1；點擊-1，數(shù)字減少1。

Flutter 與 iOS 原生 webView 對比

本文對比的是 UIWebView、WKWebView、flutter_webview_plugin（在iOS中使用的是WKWebView）的加載速度，內(nèi)存使用情況。

測試網(wǎng)頁打開的速度，只需要獲取 WebView 在開始加載網(wǎng)頁和網(wǎng)頁加載完成時的時間戳，時間戳的差即為打開網(wǎng)頁的時間

為了使差異更明顯，我們選擇較為復(fù)雜的 新浪首頁 進行加載的對比，為了減小網(wǎng)絡(luò)對加載速度的影響，我們讓手機連接同一個網(wǎng)絡(luò)，分別進行 10 次測試然后取平均值，另外，我們需要關(guān)閉 WebView 的緩存，防止緩存對加載速度產(chǎn)生影響

下面使筆者進行 10 次測試所得到的數(shù)據(jù)

結(jié)果讓我有點驚訝，一直以為 WKWebView 會是個王者。結(jié)果看，速度上 WKWebView 略慢一點，不過總體差異不大（該結(jié)果僅僅是測試新浪的結(jié)果，僅供參考啦）

在這里，筆者又加了一個測試，嘗試記錄從 viewController 的 viewDidLoad 到 webview 的 didFinish 時間，測試了新浪的數(shù)據(jù)，如下：

UIWebViewA ： 4970、3808、3815、4250、3556 avg(4079.8) （加載完所有頁面）

UIWebViewB ： 4103、3124、3070、3256、2835 avg(3277.6)（加載sina完畢）

WKWebView ： 3672、3032、2892、2912、2739 avg(3049.4)

flutter_webView ： 4532、3901、4310、3496、3378 avg(3923.4)

其中可以看到，webView 有兩行，UIWebViewB 的數(shù)據(jù)就是加載 sina 主站的時間；UIWebViewA 的數(shù)據(jù)是因為在加載完 sina 主站之后，新浪又加載了一個 ，所以導(dǎo)致總時間延長，不過即使按照 UIWebViewB 的數(shù)據(jù)來比較，也是 wkWebView 略勝一籌。

此處可以看出 flutter_webView 使用的是 wkwebView，所以它吃虧的主要原因是 flutter 包了一層。

結(jié)論：

速度（didStart - didFinish） UIWebView flutter_webview WKWebView

速度（viewDidLoad - didFinish）WKWebView UIWebView flutter_webview

這里查看內(nèi)存使用的是 xcode 的 debug session 中的 memory。

首先看之前測試時，連續(xù)打開十次新浪的內(nèi)存情況

接著我們在看一下打開淘寶首頁的內(nèi)存情況

從圖上可以看出，WKWebView 在內(nèi)存方面有很大的優(yōu)勢啊，UIWebView 的內(nèi)存是真的傷啊，然后 debug 看了一下 flutter_webView，他使用的就是原生的 webView 。

他相比較原生 WKWebView 的內(nèi)存開銷稍大一點，從測試表現(xiàn)來看，一般大個 30 MB 左右。

結(jié)論：內(nèi)存 WKWebView flutter_webview UIWebView

可以在 html5test 中對瀏覽器的兼容性進行評分，通過測試發(fā)現(xiàn)得分分別如下

因為 flutter 里使用的就是 WK，所以和原生的 WKWebView 一樣都是 444 分，比 UIWebView 的 437 略勝一籌

結(jié)論：兼容性 WKWebView = flutter_webview UIWebView

UIWebView : 速度相比較 WKWebView 稍快一點，但是內(nèi)存是一大硬傷，所以只要條件允許，就不推薦使用了

WKWebView : 速度略慢一點，不過差別不大，總體可以接受。是比UIWebView更好的選擇，推薦使用。

flutter_webView_plugin ：在iOS中使用的就是原生的WKWebView，所以總體和 native WKWebView 表現(xiàn)差不多。如果是混編項目中，因為它被包了一層，所以頁面加載上存在一定的劣勢，所以混編項目中仍然推薦使用 WKWebView。不過如果從多端考慮、以及項目可遷移等，那么使用也未嘗不可，就是維護成本要增加一些，需要維護兩套 webView。這個就需要根據(jù)自己的情況自己取舍了。

Flutter動畫性能， 官方flutter基礎(chǔ)動畫在真機上能跑到20-30%CPU

這是他提的 ：

用的是這個官方動畫效果

（ ）

運行起來的效果 如下：就是在一個Column 中放置了3個的動畫

目前測試App在前臺，運行中的CPU的情況

打開App的時候 CPU的使用率 ，當(dāng)App在做網(wǎng)絡(luò)請求的時候，占用率會更加的高

這是打開百度翻譯的APP CPU占有率

記不記得這個圖片，電腦的CPU使用率，如果它的占用大于了60%，你就會發(fā)現(xiàn)電腦的風(fēng)扇在拼命的轉(zhuǎn)，而且電腦會運行過慢

但是手機好像沒有像電腦那么嚴(yán)重，使用起來也沒有那么卡，這個和手機的固件設(shè)計有關(guān)系

這是另外一個小伙伴的公司的App內(nèi)存的占用情況

CPU使用率是性能測試是一項重要指標(biāo)，CPU占用過高會使得設(shè)備運行程序出現(xiàn)卡頓與發(fā)熱，甚至出現(xiàn)應(yīng)用程序Crash,影響用戶體驗。在排除硬件環(huán)境的限制下，應(yīng)用程序應(yīng)該盡可能少的占用CPU。

一個Demo，3個動畫的CPU使用率達(dá)到了80%，如果用java or kotlin 去實現(xiàn)應(yīng)該不會有那么高的占有率，所以Flutter的還需要繼續(xù)的優(yōu)化。

(App性能測試—CPU使用率):

Flutter開發(fā)--視頻播放器

目前Flutter平臺主流的兩個播放器是video_player和fijkplayer

pub

github

1、Flutter平臺官方插件，作者是國外的，有問題溝通比較困難，只能通過提交issue

2、硬解碼

4、UI封裝： better_player

基于video_player和Chewie的高級視頻播放器。它解決了許多典型的用例，并且易于運行。

5、播放器寬高比例與視頻內(nèi)容寬高比例不一致時，會出現(xiàn)圖像壓縮變形的問題

6、調(diào)用原生內(nèi)核播放器：iOS--AVPlayer， Android--ExoPlayer

7、對于分段源 m3u8 的播放不友好，如果一個切片播放超時，會導(dǎo)致整個播放都失敗

8、better_player可以緩存視頻，但不能自定義緩存的地址，只能指定key，和緩存的最大內(nèi)存量（還未研究超出最大的話是不能緩存新的，還是刪除最舊的）

9、better_player不能完全自定義UI，只能修改類中的一些開放屬性，比如說icon圖標(biāo)，文字顏色啥的

10、無網(wǎng)絡(luò)有緩存時，封面可以正常展示

11、better_player播放失敗有手動retry的設(shè)計

pub

github

1、fijkplayer 是一個 Flutter 生態(tài)的媒體播放器，是對 ijkplayer 的 Flutter 封裝，支持 Android 和 iOS。 fijkplayer 使用 ijkplayer 作為播放器內(nèi)核，ijkplayer 使用 ffmpeg 進行音視頻解封裝和解碼，同時添加了 Android 和 iOS 平臺特有的硬件加速解碼能力。

2 、國內(nèi)有QQ群，但是活躍度也是不高。

3、可以緩存視頻，可以自定義緩存的地址，方便后續(xù)的內(nèi)存維護。

4、可以通過FijkPanelWidgetBuilder較大程度上自定義UI。

5、無網(wǎng)絡(luò)有緩存視頻時，無法展示封面，因為內(nèi)部是通過imageProvider去加載網(wǎng)絡(luò)圖片的。

7、播放失敗無手動retry的設(shè)計

1、兩種播放器都是通過外接紋理方案 (Texture)，將播放器視頻畫面渲染接入 flutter 中，性能上優(yōu)于 PlatformView 的接入方法。

如何自己實現(xiàn)？

下面以video_palyer的iOS源碼部分解釋：

iOS用CVPixelBufferRef將渲染出來的數(shù)據(jù)存在內(nèi)存中，F(xiàn)lutter engine會將Texture的數(shù)據(jù)在內(nèi)存中直接進行映射無需通過Channel傳輸，然后Texture Widget就可以把你提供的這些數(shù)據(jù)顯示出來。在我們傳輸數(shù)據(jù)的時候會需要將其與 TextureID 綁定，綁定的過程通過BasicMessageChannel實現(xiàn)數(shù)據(jù)流的傳輸，以做到實時展示的效果

Flutter性能優(yōu)化

1.圓角對性能的影響

盡量避免用Clipxxx組件，建議用BoxDecoration的image屬性實現(xiàn)，如果用Clipxxx組件，圓角取整后性能會提升。

2.減少重繪

根據(jù)場景合理使用RePaintBoundary，使繪制獨立于父布局，避免重繪，提升性能，但過度使用增加的圖層會帶來Raster合成的耗時。例如scrollview是滑動過程會導(dǎo)致所有的節(jié)點都重繪，可以在scrollview下一層使用RePaintBoundary。

3.滾動步長插值器優(yōu)化（了解）

官方的滾動差值器在出現(xiàn)小卡頓時，滾動步長會出現(xiàn)大的跳躍，導(dǎo)致體感上出現(xiàn)很明顯的抖動，優(yōu)化步長偏移量算法與原生效果對齊。

4.開啟SurfaceView

官方推薦Flutter用SurfaceView ，因為SurfaceView與應(yīng)用窗口內(nèi)容分隔開，在專有硬件中合成，產(chǎn)生的中間副本少于TextureView，所以性能高，占用內(nèi)存少，但是在混合棧遇到的問題需要突破

5.使用RepaintBoundary 提升頻繁重繪控件的性能。使用RelayoutBoundary提升頻繁修改大小，增刪的布局中也可以提升性能。

6.build中不要去寫大量的耗時邏輯，因為數(shù)據(jù)更新會觸發(fā)build的多次調(diào)用，在里面做耗時邏輯會降低性能。

7.盡量使用statelessWidget代替statefulWidget，因為statefulWidget的銷毀重建會引起子widget的銷毀與重建。

8.解析json可以放到子線程線程中，開Isolate去解析，這樣，當(dāng)返回數(shù)據(jù)特別大的時候也不會阻塞界面。

9.使用不變的組件的時候可以添加const，const組件不會進行build更新

10.由于flutter通過widget.runtimeType和key來判斷是否需要跟新組建，所以我們寫組件的時候盡量保持key不變，或者不寫key。對于一些需要頻繁改變，例如新增、刪除、排序的最好加上key。如果type一直，如果不寫key容易導(dǎo)致，element無法區(qū)分新舊widget，導(dǎo)致無法更新。

flutter圖片內(nèi)存優(yōu)化

按照給定尺寸進行圖片的解碼，而不是解碼整個圖片的尺寸，用來減少內(nèi)存的占用。

官方文檔：

官方說明：

Instructs Flutter to decode the image at the specified dimensions instead of at its native size.

This allows finer control of the size of the image in ImageCache and is generally used to reduce the memory footprint of ImageCache .

The decoded image may still be displayed at sizes other than the cached size provided here.

使用：

三方庫： cached_network_image 限2.5.0之后版本才可用

設(shè)定最大的緩存寬度和高度 this.maxWidthDiskCache 、 this.maxHeightDiskCache

使用：

從相冊選取圖片，展示時使用指定尺寸寬高進行處理。

使用三方庫：

使用自定義 provider 來指定所需圖片的寬高：

AssetEntityImageProvider 傳入寬高和圖片原圖 AssetEntity 數(shù)據(jù)。

provider 中 key.entity.thumbDataWithSize 方法：

進入 entity 中 thumbDataWithSize 方法：

進入 _getThumbDataWithId 方法中，

進入getThumb：

調(diào)用iOS原生的獲取圖片方法，

進入 getThumbWithId 方法，

原生實現(xiàn)獲取置頂寬高縮略圖方法實現(xiàn)：

使用 iOS 原生類 PHImageManager 的

來獲取縮略圖。

本文標(biāo)題：flutter最小內(nèi)存,flutter 數(shù)據(jù)緩存
文章分享：http://sd-ha.com/article46/dsipphg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、服務(wù)器托管、虛擬主機、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站策劃、品牌網(wǎng)站制作

廣告

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