Flutter 仿京東商品詳情頁嵌套滾動組件

這是領(lǐng)苗確認記錄詳情頁需要展示給用戶的內(nèi)容，大家可以看到這個頁面要承載很多的信息，要向下滾動一段很長的距離才能展示完，想要實現(xiàn)的效果是在頁面的頂部有一個TabBar，用戶可以通過點擊TabBar進行錨點(jumpTo到指定位置)，AppBar下的整個頁面是可以自由滾動的，在滾動過程中AppBar始終固定在頂部，TabBar在第一次進入詳情頁的時候不顯示，只有在向下滑動的時候會由透明漸變?yōu)椴煌该鞑⒐潭ㄔ陧敳浚瑫r當頁面滑動到TabBar錨點位置的時候TabBar會切換到對應(yīng)的下標，也就是要實現(xiàn)TabBar和ScrollView聯(lián)動的雙向控制，Tabbar的切換可以控制頁面的跳轉(zhuǎn)，頁面的滑動又可以反過來控制TabBar的切換，類似與京東、淘寶的商品詳情頁效果。

創(chuàng)新互聯(lián)建站是專業(yè)的懷仁網(wǎng)站建設(shè)公司，懷仁接單;提供成都網(wǎng)站制作、網(wǎng)站設(shè)計,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行懷仁網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

SliverAppBar基本已經(jīng)達到了我們想要的效果，但在界面頂部會有塊空白區(qū)域試了很多方法怎么都去不掉，最后看了SliverAppBar這個控件的源碼發(fā)現(xiàn)是它自帶的初始高度。

這個沒法設(shè)置或消除，不可能直接去改源碼，所以后來換了一種實現(xiàn)思路，舍棄了SliverAppBar這個控件，以Stack的形式將TabBar置于ScrollView之上也能達到我們想要的效果，那么問題來了，如何實現(xiàn)TabBar的滾動漸變？很容易想到Opacity透明度控件，通過滾動監(jiān)聽來控制TabBar透明度的改變，借助Notificaion可以完美實現(xiàn)我們的需求。

Notification是Flutter中一個重要的機制，在Widget樹中，每一個節(jié)點都可以分發(fā)通知（Notification）與父(包括祖先)Widget通信，通知會沿著當前節(jié)點（context）向上傳遞，所有父節(jié)點都可以通過NotificationListener來監(jiān)聽自己關(guān)注的通知，F(xiàn)lutter中稱這種通知由子向父的傳遞為“通知冒泡”（Notification Bubbling）。

　 Flutter中很多地方使用了通知，如可滾動(Scrollable) Widget中滑動時就會分發(fā)ScrollNotification，而Scrollbar正是通過監(jiān)聽ScrollNotification來確定滾動條位置的。除了ScrollNotification，F(xiàn)lutter中還有SizeChangedLayoutNotification、KeepAliveNotification 、LayoutChangedNotification等。

通過NotificationListener監(jiān)聽滾動事件和通過ScrollController有兩個主要的不同：

通過改造后，目前這個組件的原型已經(jīng)實現(xiàn)并且可以滿足我們的需求，最后就是對該demo進行完善使其能夠完美接入我們的業(yè)務(wù)，做到技術(shù)賦能業(yè)務(wù)。

在一個頁面滾動區(qū)域不是很長的情況下不建議使用，只有當頁面足夠長的情況下使用這個組件效果會比較好，因為如果一個頁面過短，點擊TabBar最后一欄進行錨點時，頁面最后一個子模塊內(nèi)容無法置頂，只會將頁面最后的內(nèi)容推到屏幕范圍內(nèi)，并且由于TabBar監(jiān)聽到的是滾動的位置，會導(dǎo)致TabBar無法切換到對應(yīng)的下標，看上去會像個bug，其實是因為底部已經(jīng)沒有內(nèi)容了。

這個組件本身并沒有太大的技術(shù)難度，但是有一些比較細節(jié)的小邏輯得處理好，并且從中衍生出來的很多瑣碎的小的知識點都可以進行拓展。 在組件開發(fā)的過程中遇到問題時不局限于控件本身的設(shè)計模式，轉(zhuǎn)變開發(fā)思維去找尋一些比較新穎的解決方案可能會有意外的收獲。同時技術(shù)不能脫離于業(yè)務(wù)，技術(shù)賦能業(yè)務(wù)才能創(chuàng)造價值。

Flutter動態(tài)化方案調(diào)研

騰訊課堂14M

今日頭條3M

閑魚22M

百度貼吧13M

螞蟻財富56.8M

百度網(wǎng)盤14M

手機淘寶15M

貝殼找房8M

由粗粒度小組件動態(tài)拼裝出頁面，Native端已經(jīng)有很多成熟的框架，如天貓的Tangram。

開發(fā)語言：iOS、Android

適用場景：快速迭代的活動營銷頁面

優(yōu)點：無侵入，更新簡單

缺點：提前預(yù)埋，擴展性差，靈活性差

以webview作為容器的app，歷史悠久，最早到2011年。

開發(fā)語言：HTML

適用場景：雙端嚴格一致的銀行類app，容器類的支付寶小程序等

優(yōu)點：動態(tài)更新，跨平臺

缺點：性能，加載速度

UI用Xml+JS表達，用Native View渲染。

開發(fā)語言：Xml+JS

適用場景：雙端嚴格一致的銀行類app，容器類的支付寶小程序等

優(yōu)點：native組件，生態(tài)成熟

缺點：三方庫crash，性能缺陷

UI用Dart表達，用Dart engine渲染。

Flutter官方不支持動態(tài)化。原因是Flutter在 Release 模式下構(gòu)建的是 AOT 編譯產(chǎn)物，在 Debug 模式下構(gòu)建的是 JIT ，AOT 依賴的 Dart VM 和 JIT 并不一樣， JIT Release 并不支持 iOS 設(shè)備。可行的方案是：AOT 需要一個編譯后的 “Dart VM”。抽離一份 DartVM 獨立編譯，再以動態(tài)庫的形式引入項目。

開發(fā)語言：Dart

適用場景：iOS、Android、Web、Desktop、Embed

優(yōu)點：性能最佳

缺點：增大包體積 20MB+

大廠的主流方案。UI用JS表達，用Dart engine渲染。

開發(fā)語言：JS、類JS

適用場景：iOS、Android

優(yōu)點：性能最佳

缺點：需要掌握JS、Dart兩個語言和框架

大廠的主流方案。UI用Dart表達，用Dart engineX渲染。

開發(fā)語言：Dart

適用場景：iOS、Android

優(yōu)點：性能最佳

缺點：需要改造Dart engine

1、 美團外賣Flutter動態(tài)化實踐

2、 攜程App 首頁動態(tài)化探索

3、 Flutter 動態(tài)化在最右 App 中的實踐

4、 Flutter 動態(tài)化熱更新的思考與實踐

5、 NOW直播Flutter動態(tài)搜索列表頁實現(xiàn)

6、 Flutter動態(tài)化的方案對比及最佳實現(xiàn)-閑魚

7、 基于JavaScript 的MXFlutter

我的第一個flutter項目：購物app

這是個產(chǎn)假作業(yè)。故事是這樣的。

生了娃，生活一地雞毛。擦，碎鈔機的需求怎么那么多。

當時，有一堆返利優(yōu)惠券app比較火

...這里扯多了這篇文章被鎖了....

我就想，來扒一扒，他們是怎么賺錢的。

結(jié)論：淘寶聯(lián)盟。

淘寶聯(lián)盟是阿里巴巴旗下的親兒子，不那么有名是因為是個私生子吧，官網(wǎng)上還有個沒聽過的名號叫“阿里媽媽”，呵呵。淘寶聯(lián)盟是給淘寶上推廣商品的人用的，他們有一個專門的名稱，叫做淘寶客，即“推廣者（Publisher）”，他們幫電商平臺推薦商品給別的買家，買家購買后，電商平臺可以增加銷量，而他們則可以獲得推廣傭金。

后來，知道京東也有自己的聯(lián)盟平臺，叫做“京東聯(lián)盟”，拼多多也有，叫做“多多進寶”。

回到這些app的賺錢邏輯上來。對于用戶而言，它們的兩個噱頭是：

“用我們的app買，你可以自用省錢”

“用我們的app，分享給別人下單，你可以賺錢！”

所以，這些app推廣起來很容易啊，因為誰用誰賺錢呀！

那么為何不自己搭一個呢？

與其這些傭金落到別人口袋，不如自己直接做最頂層上線，發(fā)展出N個下線，豈不是躺著賺錢，哈哈哈哈哈

搞清楚賺錢邏輯之后，我發(fā)現(xiàn)淘寶聯(lián)盟的api是很開放的。

商品鏈接： ;pid=mm_343780171_368000361_101527600308itemId=595640102734src=qtka_wxxtdx=1

其中，activityId是優(yōu)惠券id，pid是推廣者在阿里媽媽官網(wǎng)注冊的id，只有這個id是我注冊的，那么傭金就到我口袋去了，哈哈哈。

剛好練一下flutter，一次開發(fā)，兩端使用，我一個人就可以了。app暫時取名為“小豬購”，拿粉紅豬貼牌。

演示視頻：

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ù)自己的情況自己取舍了。

做混合的話Uniapp和Flutter我應(yīng)該學(xué)哪個啊？

Uniapp目前比較成熟，而且用的是Vue語法，學(xué)習(xí)成本比較低，而且行業(yè)里面用的也比較廣泛，而Flutter的話，學(xué)習(xí)成本略高，因為要學(xué)習(xí)新的語言，還有就是目前生態(tài)不是特別完備，等他再發(fā)展發(fā)展吧。黑馬程序員官網(wǎng)有成套免費視頻哦，有什么不懂的可以直接過去學(xué)習(xí)。您的采納是對我成長的鞭策

網(wǎng)頁題目：淘寶flutter,淘寶網(wǎng)
URL分享：http://chinadenli.net/article43/dsgpoes.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、網(wǎng)站改版、手機網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、外貿(mào)建站、網(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)