這種方法最常見，但是有些地方引用的話，刷新的成本比較大，刷新的是整個(gè)頁面，數(shù)據(jù)太多加載太慢的話，會(huì)有閃爍的現(xiàn)象
創(chuàng)新互聯(lián)的客戶來自各行各業(yè)，為了共同目標(biāo)，我們?cè)诠ぷ魃厦芮信浜?，從?chuàng)業(yè)型小企業(yè)到企事業(yè)單位，感謝他們對(duì)我們的要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。專業(yè)領(lǐng)域包括成都網(wǎng)站制作、網(wǎng)站建設(shè)、電商網(wǎng)站開發(fā)、微信營銷、系統(tǒng)平臺(tái)開發(fā)。
這種方法類似于iOS中的set方法，通過設(shè)置某個(gè)屬性的時(shí)候，去刷新某個(gè)控件。在flutter中這種刷新方式，是對(duì)上面setState(){}方法的改進(jìn)，根本的方法還是setState(){}，只不過是通過方法去刷新某個(gè)控件。如下：
首先在pubspec.yaml中添加provider依賴
下面通過provider來實(shí)現(xiàn)一個(gè)發(fā)送驗(yàn)證碼的案例。
創(chuàng)建一個(gè)TimerModel文件
頁面布局如下：
最近項(xiàng)目中，用到了flutter中的webview加載帶有echarts控件的html文件，但是發(fā)現(xiàn)圖表一直無法顯示，通過查詢相關(guān)資料，分析apk包文件，知道了是由于flutter項(xiàng)目中的文件打包后的路徑發(fā)生變化，造成找不到相關(guān)依賴，特此記錄一下，使用下面這個(gè)方法便可以解析出Android和IOS打包后的apk中資源文件的實(shí)際位置。
例如，你的資源文件是在flutter項(xiàng)目的根目錄下的 'assets/files/echart-pie.html',
那 'getAssetsPath('assets/files/echart-pie.html')'才是打包成apk后，資源文件的實(shí)際路徑。
按照上面的操作，你會(huì)發(fā)現(xiàn)在android設(shè)備上已經(jīng)可以正常顯示本地html頁面了，但是IOS設(shè)備上還是一臉懵逼；不要慌，這塊是由于webview_flutter本來就不支持加載本地文件，這時(shí)我們還需要修改下插件IOS部分的源碼，F(xiàn)lutterWebView.m文件：
通過以上騷操作，就可以實(shí)現(xiàn)webview_flutter在android和ios設(shè)備上加載本地html文件了。
最后：推薦一個(gè)插件，已經(jīng)在官方的基礎(chǔ)上進(jìn)行了優(yōu)化
webview_flutter_plus
網(wǎng)站：
Flutter官網(wǎng)
國內(nèi)Flutter中文資源網(wǎng)
Flutter中文網(wǎng)
Dart官網(wǎng)
Dart中文網(wǎng)
第三方包官網(wǎng)
國內(nèi)第三方包官網(wǎng)
必讀書籍：
《Dart語言實(shí)戰(zhàn)：基于Angular框架的Web開發(fā)》
《Flutter實(shí)戰(zhàn)》
本文對(duì)比的是 UIWebView、WKWebView、flutter_webview_plugin（在iOS中使用的是WKWebView）的加載速度，內(nèi)存使用情況。
測(cè)試網(wǎng)頁打開的速度，只需要獲取 WebView 在開始加載網(wǎng)頁和網(wǎng)頁加載完成時(shí)的時(shí)間戳，時(shí)間戳的差即為打開網(wǎng)頁的時(shí)間
為了使差異更明顯，我們選擇較為復(fù)雜的 新浪首頁 進(jìn)行加載的對(duì)比，為了減小網(wǎng)絡(luò)對(duì)加載速度的影響，我們讓手機(jī)連接同一個(gè)網(wǎng)絡(luò)，分別進(jìn)行 10 次測(cè)試然后取平均值，另外，我們需要關(guān)閉 WebView 的緩存，防止緩存對(duì)加載速度產(chǎn)生影響
下面使筆者進(jìn)行 10 次測(cè)試所得到的數(shù)據(jù)
結(jié)果讓我有點(diǎn)驚訝，一直以為 WKWebView 會(huì)是個(gè)王者。結(jié)果看，速度上 WKWebView 略慢一點(diǎn)，不過總體差異不大（該結(jié)果僅僅是測(cè)試新浪的結(jié)果，僅供參考啦）
在這里，筆者又加了一個(gè)測(cè)試，嘗試記錄從 viewController 的 viewDidLoad 到 webview 的 didFinish 時(shí)間，測(cè)試了新浪的數(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 主站的時(shí)間；UIWebViewA 的數(shù)據(jù)是因?yàn)樵诩虞d完 sina 主站之后，新浪又加載了一個(gè) ，所以導(dǎo)致總時(shí)間延長，不過即使按照 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。
首先看之前測(cè)試時(shí)，連續(xù)打開十次新浪的內(nèi)存情況
接著我們?cè)诳匆幌麓蜷_淘寶首頁的內(nèi)存情況
從圖上可以看出，WKWebView 在內(nèi)存方面有很大的優(yōu)勢(shì)啊，UIWebView 的內(nèi)存是真的傷啊，然后 debug 看了一下 flutter_webView，他使用的就是原生的 webView 。
他相比較原生 WKWebView 的內(nèi)存開銷稍大一點(diǎn)，從測(cè)試表現(xiàn)來看，一般大個(gè) 30 MB 左右。
結(jié)論：內(nèi)存 WKWebView flutter_webview UIWebView
可以在 html5test 中對(duì)瀏覽器的兼容性進(jìn)行評(píng)分，通過測(cè)試發(fā)現(xiàn)得分分別如下
因?yàn)?flutter 里使用的就是 WK，所以和原生的 WKWebView 一樣都是 444 分，比 UIWebView 的 437 略勝一籌
結(jié)論：兼容性 WKWebView = flutter_webview UIWebView
UIWebView : 速度相比較 WKWebView 稍快一點(diǎn)，但是內(nèi)存是一大硬傷，所以只要條件允許，就不推薦使用了
WKWebView : 速度略慢一點(diǎn)，不過差別不大，總體可以接受。是比UIWebView更好的選擇，推薦使用。
flutter_webView_plugin ：在iOS中使用的就是原生的WKWebView，所以總體和 native WKWebView 表現(xiàn)差不多。如果是混編項(xiàng)目中，因?yàn)樗话艘粚?，所以頁面加載上存在一定的劣勢(shì)，所以混編項(xiàng)目中仍然推薦使用 WKWebView。不過如果從多端考慮、以及項(xiàng)目可遷移等，那么使用也未嘗不可，就是維護(hù)成本要增加一些，需要維護(hù)兩套 webView。這個(gè)就需要根據(jù)自己的情況自己取舍了。
重慶分公司
重慶分公司
