Flutter（二十一）：輪播圖

使用 flutter_swiper 輪播庫。

10年積累的成都網站設計、網站制作經驗，可以快速應對客戶對網站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網絡服務。我雖然不認識你，你也不認識我。但先網站設計后付款的網站建設流程，更有平安免費網站建設讓你可以放心的選擇與我們合作。

使用 AspectRatio 結合實現效果，設置對應的比例。

Flutter實現堆疊式卡輪播效果

在本博客中，我們將探討Flutter中的堆疊式卡輪播。 我們還將實現一個演示程序，并學習在您的flutter應用程序中使用 stacked_card_carousel 包創建一個帶有垂直輪播的堆疊卡。

用于創建帶有堆疊卡片的垂直輪播的小部件。 下面的演示視頻顯示了如何在Flutter中創建帶有垂直旋轉木馬的堆疊卡。 它顯示了在您的flutter應用程序中如何使用stacked_card_carousel軟件包來使用堆疊式卡輪播。 它顯示了垂直圓盤傳送帶滑動卡的列表，所有卡向上滑動并堆疊，稱為堆疊式卡傳送帶。 它會顯示在您的設備上。

堆疊式卡輪播的一些屬性是：

在lib文件夾中創建一個名為style_card.dart的新dart文件。

首先，我們創建StyleCard類，將在后續的DEMO中調用它

我們將制作一個 card 控件. 在card控件中, 我們加入一個elevation 屬性和一個column控件。 在column中, 我們加入一個container用于包含image, title 和 description. 然后在stacked_card_demo頁面中使用它。

在lib文件夾中創建一個新的名為stacked_card_demo.dart的dart文件。

現在，我們將創建一個styleCards列表，并在其中添加一個StyleCard類。

我們創建了八個卡片控件，并在其中添加了image，title和description。 程序運行后，我們將看到一個卡片列表， 當用戶向上滑動時，所有卡片都將堆疊在一起； 當用戶向下滑動時，卡片都將回到原始位置；

效果如下：

Demo地址：

Flutter實現馬蜂窩小紅書自適應高度輪播圖

NotificationListener 可以監聽 PageView 的改變，比如滑動的距離，頁面索引等，目前只使用的了索引。里面的一些方法挺有用的。

使用 AnimatedContainer 組件保證切換以后會有流程的過渡效果,表現的會平滑一些。

首先，返回數據需要包含圖片的寬高信息，就像這樣:

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

自適應輪播圖的高度我們需要原始圖片的寬高比，或者知道原始圖的寬高。顯示的時候按照原始的寬高比進行等比例縮放。

_controller.page 獲取到的是一個浮點數，類似 1.0325441 ,使用 round 四舍五入出現的效果就是我們拖到一半或以上就可以得到下一個 activeIndex ， activeIndex 是一個整數。

我們動態獲取了圖片的寬度以后放入 AnimatedContainer 就可以有過渡效果，真機和模擬器測試都很流暢，可以已60幀渲染。

Flutter PageView使用案例

現在的小目標是要實現一個 「圖片輪播」的效果，我們在 Android 中可以使用 ViewPager 結合 handler 或者 Timer 去實現。

而我們在 Flutter 中，其實也是類似的。

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

我們來看一下

Flutter PageView 官網

根據官網的介紹， PageView 在需要展示的頁面很多時，有「控件復用」功能，而且，我們還可以通過

來設置滾動的方向，也就是說，我們還可以完成「縱向滾動」，真的很棒有么有？

偷的小米官網的輪播圖

看一下效果圖

GestureDetector ，或者直接返回一個 button 類型的 Widget 即可

ok,了解了這個PageView，接下來，我們想法子搞一個「輪播效果」，請見下一篇文章。

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

先制作一個縱軸滾動的pageview

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

在視覺上完全看不出來，這樣就造成了無縫循環滾動的假象，同理如果你想反方向也可以無縫循環滾動，那么你在構造pageview item的時候就可以 這樣c a b c a構造,只要控制好邏輯，完全沒有任何問題

Flutter 121: 圖解簡易 Slider 滑動條

小菜在業務開發過程中會自定義 Slider 滑動條，而在自定義之前，小菜先簡單了解一下 Flutter 自帶的 Slider ；

簡單分析源碼可得， Slider 是一個有狀態的 StatefulWidget 組件，屬性也很清晰易懂，其中滑動過程中對應的 value 值和 onChanged 回調是必須參數；

value 未滑動過程中對應的值，在 min 和 max 之間； onChanged 是在滑動過程中回調，當 onChanged 為 null 或 value 所在的 min 和 max 集合范圍為空時， Slider 禁止滑動；

min 和 max 為滑動條范圍，而 value 的取值范圍是在 min 和 max 之間，無論 value 為正還是負，均需要在 min 和 max 之間；

activeColor 為滑動條已滑動過的顏色； inactiveColor 為滑動條中未滑動的顏色；兩者均可以在 SliderTheme 中設置；

label 為滑動條滑動到某一節點的標簽文案； divisions 是把 min 和 max 等分為 divisions 份數；只有在 divisions 生效時， label 才會展示；

onChangeStart 和 onChangeEnd 分別對應滑動過程中 value 值何時開始更改或何時完成更改時對應的回調；

Slider 的主題效果可以通過 SliderTheme 或 ThemeData.sliderTheme 中獲取更新，相較于 Slider 只提供已滑動和未滑動顏色效果，屬性粒度更細；

activeTrackColor 和 inactiveTrackColor 分別對應 Slider 已滑動過和未滑動過的軌道顏色；

thumbColor 對應滑動按鈕顏色，而 overlayColor 對應滑動按鈕映射的疊層顏色，通常設置為半透明狀態； overlayShape 對應疊層樣式；

valueIndicatorColor 對應 label 氣泡顏色； valueIndicatorShape 對應氣泡內文字屬性； valueIndicatorShape 對應氣泡樣式，可以再此進行自定義氣泡；

activeTickMarkColor 對應已選中刻度顏色； inactiveTickMarkColor 對應未選中刻度顏色； tickMarkShape 對應刻度樣式；

trackHeight 為 Slider 軌道高度； trackShape 對應軌道樣式，主要再此處進行自定義樣式；

對于不可滑動狀態， SliderThemeData 提供了對應屬性；

Slider 案例源碼

小菜本節暫未涉及自定義滑動條樣式，對于底層的 Slider 了解還不夠深入；如有錯誤，請多多指導！