Flutter如何封裝一個Banner輪播圖效果

這篇文章主要介紹Flutter如何封裝一個Banner輪播圖效果，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

成都創新互聯公司網站建設提供從項目策劃、軟件開發，軟件安全維護、網站優化(SEO)、網站分析、效果評估等整套的建站服務，主營業務為網站設計、網站制作，成都App定制開發以傳統方式定制建設網站，并提供域名空間備案等一條龍服務，秉承以專業、用心的態度為用戶提供真誠的服務。成都創新互聯公司深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

在 Flutter 中，如何開發一個輪播？

了解需求

首先，我們在開發一個功能的時候要了解這個功能的需求，那一個輪播需要有什么功能？

1. 可以自定義高度和一些屬性 2. 展示圖片 3. 自動翻頁播放 4. 點擊事件 5. 指示器 6. 人為拖動的時候關閉自動播放

其中「人為拖動的時候關閉自動播放」是比較難的，我們后續會說，那先一個一個功能來實現。

自定義高度和一些屬性

這里主要是做一些前期的工作，如果我們的 Banner 要開源讓別人來使用，那我們肯定是要給用戶一些可以自定義的屬性的，比如：

1. Banner 的高度 2. 圖片切換的效果 3. 點擊事件的回調

既然我們是封裝一個 Widget，那我們新建一個文件 widget_banner.dart ，類名叫 CustomBanner ，構造函數如下：

CustomBanner(

 this._images, {

 this.height = 200,

 this.onTap,

 this.curve = Curves.linear,

}) : assert(_images != null);

? _images：首先，圖片的鏈接必須有，并且在后面也做了一個斷言驗證

? height：其次，高度可以讓用戶自己定義，默認為200

? onTap：用戶點擊的回調，是一個 ValueChanged<int> ，回調一個 index

? curve：圖片在切換時候的效果，默認為 Curves.linear

這樣初期的準備工作已經做完，下面就開始做展示圖片的功能。

展示圖片

一般的 Banner 都是由一些圖片組成，然后在固定的時間內翻頁，

那能夠翻頁的 Widget，我們首先想到的是 PageView ，而 PageView 也正好能滿足我們的需求，

它有如下幾個屬性：

1. 多頁面翻頁

2. 有控制器控制翻頁

3. 翻頁的回調

4. 無限頁面

那我們首先就來定義一個 PageView ：

Widget _buildPageView() {
 var length = widget._images.length;
 return Container(
 height: widget.height,
 child: PageView.builder(
 controller: _pageController,
 onPageChanged: (index) {
 if (index == 0) {
 _curIndex = length;
 }
 },
 itemBuilder: (context, index) {
 return Image.network(
 widget._images[index % length],
 fit: BoxFit.cover,
 );
 },
 ),
 );
}

這里定義了一個方法通過 PageView.builder 來生成 PageView ，用該方法的好處是可以生成無限個 Page，這樣就不用擔心滑到右側邊界的問題。

那有人會問如果是左側的邊界該怎么辦？

看 onPageChange 方法，我們判斷了如果 index == 0 那就把 _curIndex 改為 length，為什么改為 length？

因為在 itemBuilder 中，返回的是 widget._images[index % length] ，用 index 對 length 取余，這樣就保證了我們的圖片不會數組越界，并且第 length 個圖片就是第一個圖片，這樣就保證左側的邊界也不會被觸碰到了。

在 PageView 的上方也是定義了一個 Container 來限定高度，來看一下效果：

Flutter如何封裝一個Banner輪播圖效果

自動翻頁播放

現在能展示圖片了，那就該來做自動翻頁了。

一般在 Dart 中，使用 Timer.periodic() 來做循環定時任務，該方法有兩個參數：

1. duration：指隔多長時間執行一次 2. callback：時間到的時候執行的任務

那有了該方法，我們就可以很輕松的寫出自動播放：

_timer = Timer.periodic(Duration(seconds: 3), (t) {
 _curIndex++;
 _pageController.animateToPage(
 _curIndex,
 duration: Duration(milliseconds: 300),
 curve: Curves.linear,
 );
});

在上面我們給 PageView 定義了一個 controller ，這里就可以用上了，

首先定義 Timer.periodic 方法，指出每三秒執行一次，然后在回調任務中執行：

1. _curIndex++：index +1 2. 使用 controller 的 animateToPage 方法，該方法是有動畫效果的跳轉

animateToPage 有三個參數：

1. 跳轉的頁面 2. 跳轉到該頁面動畫持續時間（也就是多長時間能翻到該頁） 3. 動畫的效果

定義好后，我們來看一下效果：

Flutter如何封裝一個Banner輪播圖效果

點擊事件

現在自動播放也 ok 了，那基本的就剩一個點擊事件了。

點擊事件非常簡單，我們可以在 PageView 上面加一個 GestureDetector 來識別手勢，

但是我又不想在 PageView 上面加，為什么？

因為后續要添加指示器，指示器應該也要有自己的點擊事件，比如點擊第二個小圓點就跳轉到第二頁之類的，

所以，我們要在 Image 上面添加手勢識別：

return GestureDetector(
 onTap: () {
 Scaffold.of(context).showSnackBar(
 SnackBar(
 content: Text('當前 page 為 ${index % length}'),
 duration: Duration(milliseconds: 500),
 ),
 );
 },
 child: Image.network(
 widget._images[index % length],
 fit: BoxFit.cover,
 ),
);

非常簡單，就是增加了一個 GestureDetector ，來看一下效果：

Flutter如何封裝一個Banner輪播圖效果

講道理，現在一個最最基本的 Banner 就已經完成了，能看圖片，有輪播，有點擊事件。

但是還并不完善，下面來做指示器。

指示器

一般的輪播，都會有一個指示器，例如下面的小圓點，或者「1 / 3」類似于這種，那我們這里就只搞第一種小圓點。

作為指示器，應該有如下幾點：

1. 在圖片前面（廢話，在圖片后面也看不到） 2. 有幾張圖片就有幾個指示器 3. 顯示出當前在第幾頁

在圖片前面顯示

這個需求比較簡單，我們用一個 Stack 來包裹住 PageView 和 Indicator 就ok了：

return Stack(
 alignment: Alignment.bottomCenter,
 children: <Widget>[
 _buildViewPager(),
 _buildIndicator(),
 ],
);

定義了一個 _buildIndicator() 方法，該方法用來構建一個指示器。

有幾張圖片就有幾個指示器

我們這里說的指示器就是小圓點，也很簡單，用 ClipOval 來創建一個圓形就ok了，

具體代碼如下：

Widget _buildIndicator() {
 var length = widget._images.length;
 return Positioned(
 bottom: 10,
 child: Row(
 children: widget._images.map((s) {
 return Padding(
 padding: const EdgeInsets.symmetric(horizontal: 3.0),
 child: ClipOval(
 child: Container(
 width: 8,
 height: 8,
 color: Colors.grey,
 ),
 ),
 );
 }).toList(),
 ),
 );
}

邏輯為：

1. 首先獲取到圖片數據的長度 2. Stack 定義了 Aligment 為 bottomCenter 3. 然后定義了一個 Positioned 來控制距離底部的距離 4. child 為 Row ，橫向排列小圓點 5. 給每個小圓點設置邊距為3 6. 小圓點的大小為8

看一下效果：

Flutter如何封裝一個Banner輪播圖效果

可以發現小圓點確實是出來了，但是并沒有指示到當前是哪一個。

顯示出當前在第幾頁

那接下來就要顯示出當前是在第幾頁，其實這個也很簡單（如果不做特殊效果的話），

我們剛才指示器的小圓點是灰色的，那當前頁的小圓點我們給弄成白色的：

Widget _buildIndicator() {
 var length = widget._images.length;
 return Positioned(
 bottom: 10,
 child: Row(
 children: widget._images.map((s) {
 return Padding(
 padding: const EdgeInsets.symmetric(horizontal: 3.0),
 child: ClipOval(
 child: Container(
 width: 8,
 height: 8,
 color: s == widget._images[_curIndex % length]
 ? Colors.white
 : Colors.grey,
 ),
 ),
 );
 }).toList(),
 ),
 );
}

這里的重點是 Container 的 color 屬性，判斷一下當前的值是否是和當前 index 的值相等，

如果相等則變為白色，如果不相等則是灰色。

如果光寫成這樣，小圓點是不會變的，所以我們要在 PageView 的 onPageChanged 回調中去 setState() ，

順便更新 _curIndex 的值。

重新構建一下刷新頁面，這個時候看一下效果：

Flutter如何封裝一個Banner輪播圖效果

這個時候這個 Banner 可以說是很完善了，但是如果我們手動的去干預滑動會出現什么問題呢？

因為我們剛才寫的是 3 秒一切換，所以我們在，手動切換的時候，它在到達第三秒后，就會出現連續換頁的情況。

人為拖動的時候關閉自動播放

所以，根據上述情況，我們就要在監聽到有人為拖動的時候去關閉自動播放，然后在沒有人為的情況下打開。

剛才已經在 Image 上面加了一個 GesutreDetector ，正好，我們添加 onPanDown 參數來暫停定時任務。

然后在手指離開的時候恢復任務。

但是！這里有很大的坑！

1. Timer 沒有暫停方法 2. 因為用的是 PageView ，有滑動沖突，所以監聽不到手指離開的方法

這里只能采用曲線救國的方法：

雖然 Timer 沒有暫停，但是他有取消 cancel() 方法。

雖然監聽不到手指離開的方法，但是我們可以監聽到手指觸碰的方法

所以我們應該這么寫：

/// 點擊到圖片的時候取消定時任務
_cancelTimer() {
 if (_timer != null) {
 _timer.cancel();
 _timer = null;
 _initTimer();
 }
}
/// ------------------------
return GestureDetector(
 onPanDown: (details) {
 _cancelTimer();
 },
 onTap: () {
 Scaffold.of(context).showSnackBar(
 SnackBar(
 content: Text('當前 page 為 ${index % length}'),
 duration: Duration(milliseconds: 500),
 ),
 );
 },
 child: Image.network(
 widget._images[index % length],
 fit: BoxFit.cover,
 ),
);

先定義一個方法， _cancelTimer() ，里面首先判斷如果 _timer 不是 null 的時候則把 _timer 取消掉，然后置空。

隨后再對 _timer 進行初始化。

為什么要這么做？取消的同時進行初始化？

因為我們并不知道什么時候手指離開屏幕，所以我們在手指點擊后就重新開始計時，

這樣既能保證點擊的時候沒有定時任務，又能保證在后續的一段時間后會重新開始定時任務。

因為定時任務的時間是3秒，而我們滑動查看圖片也就一兩秒的時間，這段時間之內如果再次手動滑動，那么也會取消掉之前的任務，重新開始新的任務，這樣就達到了我們的效果。

來看一下：

Flutter如何封裝一個Banner輪播圖效果