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

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

創(chuàng)新互聯(lián)建站是一家以成都網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計、品牌設(shè)計、軟件運維、成都網(wǎng)站推廣、小程序App開發(fā)等移動開發(fā)為一體互聯(lián)網(wǎng)公司。已累計為除甲醛等眾行業(yè)中小客戶提供優(yōu)質(zhì)的互聯(lián)網(wǎng)建站和軟件開發(fā)服務(wù)。

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通信，通知會沿著當(dāng)前節(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ū)域不是很長的情況下不建議使用，只有當(dāng)頁面足夠長的情況下使用這個組件效果會比較好，因為如果一個頁面過短，點擊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圖片內(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 的

來獲取縮略圖。

分享名稱：Flutter置頂,flutter 隱藏狀態(tài)欄
網(wǎng)頁路徑：http://chinadenli.net/article27/dsgddjj.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機、網(wǎng)站設(shè)計公司、品牌網(wǎng)站設(shè)計、搜索引擎優(yōu)化、微信小程序、網(wǎng)站導(dǎo)航

廣告

聲明：本網(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)