Flutter實(shí)現(xiàn)馬蜂窩小紅書(shū)自適應(yīng)高度輪播圖

NotificationListener 可以監(jiān)聽(tīng) PageView 的改變，比如滑動(dòng)的距離，頁(yè)面索引等，目前只使用的了索引。里面的一些方法挺有用的。

創(chuàng)新互聯(lián)建站是一家專業(yè)提供金塔企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站建設(shè)、成都網(wǎng)站制作、H5場(chǎng)景定制、小程序制作等業(yè)務(wù)。10年已為金塔眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進(jìn)行中。

使用 AnimatedContainer 組件保證切換以后會(huì)有流程的過(guò)渡效果,表現(xiàn)的會(huì)平滑一些。

首先，返回?cái)?shù)據(jù)需要包含圖片的寬高信息，就像這樣:

如果返回的只有圖片信息沒(méi)有寬高數(shù)據(jù)可以使用以下方法去獲得圖片的信息,這樣也可以得到圖片的寬高信息，不太建議，還是直接叫后端給，我們也方便處理，要是后端說(shuō)他們給不了就拿上磚頭去叫他們加，就想偷懶。

自適應(yīng)輪播圖的高度我們需要原始圖片的寬高比，或者知道原始圖的寬高。顯示的時(shí)候按照原始的寬高比進(jìn)行等比例縮放。

_controller.page 獲取到的是一個(gè)浮點(diǎn)數(shù)，類似 1.0325441 ,使用 round 四舍五入出現(xiàn)的效果就是我們拖到一半或以上就可以得到下一個(gè) activeIndex ， activeIndex 是一個(gè)整數(shù)。

我們動(dòng)態(tài)獲取了圖片的寬度以后放入 AnimatedContainer 就可以有過(guò)渡效果，真機(jī)和模擬器測(cè)試都很流暢，可以已60幀渲染。