Flutter（二十一）：輪播圖

使用 flutter_swiper 輪播庫(kù)。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：國(guó)際域名空間、網(wǎng)頁(yè)空間、營(yíng)銷(xiāo)軟件、網(wǎng)站建設(shè)、長(zhǎng)春網(wǎng)站維護(hù)、網(wǎng)站推廣。

使用 AspectRatio 結(jié)合實(shí)現(xiàn)效果，設(shè)置對(duì)應(yīng)的比例。

Flutter實(shí)戰(zhàn)：擼半個(gè)知乎日?qǐng)?bào)

感謝 知乎日?qǐng)?bào)-API-分析 提供的api幫助完成這個(gè)demo

該項(xiàng)目完全開(kāi)源，單純?yōu)榱藢W(xué)習(xí)與交流，希望大家喜歡，多多提意見(jiàn)。

后續(xù)會(huì)將未來(lái)學(xué)到的新知識(shí)點(diǎn)用到該項(xiàng)目，持續(xù)更新

1.今日熱點(diǎn)

2.主題分類(lèi)

3.文章詳情

4.抽屜列表增加緩存, 防止多次拉去數(shù)據(jù)

5.評(píng)論列表 (界面，動(dòng)畫(huà)優(yōu)化)

6.主題列表 (界面，動(dòng)畫(huà)優(yōu)化)

7.主頁(yè)banner自動(dòng)輪播,手指滑動(dòng)是禁止輪播，放開(kāi)則繼續(xù)

8.刷新數(shù)據(jù)失敗，增加重試按鈕

9.分享UI

9.登錄UI，聯(lián)動(dòng)交互（在評(píng)論界面可以點(diǎn)擊寫(xiě)點(diǎn)評(píng)進(jìn)入）

1.Flutter加載Html

1.注冊(cè)

2.登錄

3.發(fā)表評(píng)論

4.收藏

5.等等

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

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

使用 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ù)，類(lèi)似 1.0325441 ,使用 round 四舍五入出現(xiàn)的效果就是我們拖到一半或以上就可以得到下一個(gè) activeIndex ， activeIndex 是一個(gè)整數(shù)。

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

flutter 基于pageview 制作上下輪播文字功能

先制作一個(gè)縱軸滾動(dòng)的pageview

然后我們利用time組件實(shí)現(xiàn)自動(dòng)輪播，這里面有個(gè)小技巧，掌握了這個(gè)小技巧就可以做無(wú)縫的循環(huán)播放，比如我有 a b c三項(xiàng)，我們?cè)跇?gòu)造pageview item的時(shí)候人為的構(gòu)造成a b c a，在c的后面加上a,當(dāng)c滾動(dòng)到a的時(shí)候，比如每次動(dòng)畫(huà)變換時(shí)間是500毫秒，那么就延遲500好秒快速的跳到第一個(gè)a頁(yè)面，剛好等它滾動(dòng)完就快速變換

在視覺(jué)上完全看不出來(lái)，這樣就造成了無(wú)縫循環(huán)滾動(dòng)的假象，同理如果你想反方向也可以無(wú)縫循環(huán)滾動(dòng)，那么你在構(gòu)造pageview item的時(shí)候就可以 這樣c a b c a構(gòu)造,只要控制好邏輯，完全沒(méi)有任何問(wèn)題

Flutter PageView使用案例

現(xiàn)在的小目標(biāo)是要實(shí)現(xiàn)一個(gè) 「圖片輪播」的效果，我們?cè)?Android 中可以使用 ViewPager 結(jié)合 handler 或者 Timer 去實(shí)現(xiàn)。

而我們?cè)? Flutter 中，其實(shí)也是類(lèi)似的。

那么，在 Flutter 中，代替 Android 中的 ViewPager 組件是 PageView ，而且，這個(gè) PageView 相比 ViewPager 擴(kuò)展性更高。

我們來(lái)看一下

Flutter PageView 官網(wǎng)

根據(jù)官網(wǎng)的介紹， PageView 在需要展示的頁(yè)面很多時(shí)，有「控件復(fù)用」功能，而且，我們還可以通過(guò)

來(lái)設(shè)置滾動(dòng)的方向，也就是說(shuō)，我們還可以完成「縱向滾動(dòng)」，真的很棒有么有？

偷的小米官網(wǎng)的輪播圖

看一下效果圖

GestureDetector ，或者直接返回一個(gè) button 類(lèi)型的 Widget 即可

ok,了解了這個(gè)PageView，接下來(lái)，我們想法子搞一個(gè)「輪播效果」，請(qǐng)見(jiàn)下一篇文章。