腳本之家服務器常用軟件

快捷導航

Flutter 封裝一個 Banner 輪播圖效果的實例代碼

更新時間：2019年07月25日 10:26:43 作者：Flutter筆記

這篇文章主要介紹了Flutter 封裝一個 Banner 輪播圖效果，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下

實際業(yè)務開發(fā)中，首頁一般都會存在一個輪播圖。

在 Flutter 中，如何開發(fā)一個輪播？

了解需求

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

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

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

自定義高度和一些屬性

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

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

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

CustomBanner(

 this._images, {

 this.height = 200,

 this.onTap,

 this.curve = Curves.linear,

}) : assert(_images != null);

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

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

• onTap：用戶點擊的回調(diào)，是一個 ValueChanged<int> ，回調(diào)一個 index

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

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

展示圖片

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

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

它有如下幾個屬性：

1. 多頁面翻頁

2. 有控制器控制翻頁

3. 翻頁的回調(diào)

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，這樣就不用擔心滑到右側(cè)邊界的問題。

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

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

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

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

自動翻頁播放

現(xiàn)在能展示圖片了，那就該來做自動翻頁了。

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

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

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

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

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

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

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

animateToPage 有三個參數(shù)：

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

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

點擊事件

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

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

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

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

所以，我們要在 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 ，來看一下效果：

講道理，現(xiàn)在一個最最基本的 Banner 就已經(jīng)完成了，能看圖片，有輪播，有點擊事件。

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

指示器

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

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

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

在圖片前面顯示

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

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

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

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

我們這里說的指示器就是小圓點，也很簡單，用 ClipOval 來創(chuàng)建一個圓形就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. 首先獲取到圖片數(shù)據(jù)的長度 2. Stack 定義了 Aligment 為 bottomCenter 3. 然后定義了一個 Positioned 來控制距離底部的距離 4. child 為 Row ，橫向排列小圓點 5. 給每個小圓點設置邊距為3 6. 小圓點的大小為8

看一下效果：

可以發(fā)現(xiàn)小圓點確實是出來了，但是并沒有指示到當前是哪一個。

顯示出當前在第幾頁

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

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

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 的值相等，

如果相等則變?yōu)榘咨?，如果不相等則是灰色。

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

順便更新 _curIndex 的值。

重新構(gòu)建一下刷新頁面，這個時候看一下效果：

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

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

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

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

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

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

但是！這里有很大的坑！

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

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

1.

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

2.

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

所以我們應該這么寫：

/// 點擊到圖片的時候取消定時任務
_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 進行初始化。

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

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

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

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

來看一下：