實(shí)際業(yè)務(wù)開(kāi)發(fā)中，首頁(yè)一般都會(huì)存在一個(gè)輪播圖。

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

了解需求

首先，我們?cè)陂_(kāi)發(fā)一個(gè)功能的時(shí)候要了解這個(gè)功能的需求，那一個(gè)輪播需要有什么功能？

1. 可以自定義高度和一些屬性 2. 展示圖片 3. 自動(dòng)翻頁(yè)播放 4. 點(diǎn)擊事件 5. 指示器 6. 人為拖動(dòng)的時(shí)候關(guān)閉自動(dòng)播放

其中「人為拖動(dòng)的時(shí)候關(guān)閉自動(dòng)播放」是比較難的，我們后續(xù)會(huì)說(shuō)，那先一個(gè)一個(gè)功能來(lái)實(shí)現(xiàn)。

自定義高度和一些屬性

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

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

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

CustomBanner(

 this._images, {

 this.height = 200,

 this.onTap,

 this.curve = Curves.linear,

}) : assert(_images != null);

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

• height：其次，高度可以讓用戶(hù)自己定義，默認(rèn)為200

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

• curve：圖片在切換時(shí)候的效果，默認(rèn)為  Curves.linear

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

展示圖片

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

那能夠翻頁(yè)的 Widget，我們首先想到的是 PageView ，而  PageView 也正好能滿(mǎn)足我們的需求，

它有如下幾個(gè)屬性：

1. 多頁(yè)面翻頁(yè)

2. 有控制器控制翻頁(yè)

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

4. 無(wú)限頁(yè)面

那我們首先就來(lái)定義一個(gè) 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,
 );
 },
 ),
 );
}

這里定義了一個(gè)方法通過(guò) PageView.builder 來(lái)生成  PageView ，用該方法的好處是可以生成無(wú)限個(gè) Page，這樣就不用擔(dān)心滑到右側(cè)邊界的問(wèn)題。

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

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

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

在 PageView 的上方也是定義了一個(gè) Container 來(lái)限定高度，來(lái)看一下效果：

自動(dòng)翻頁(yè)播放

現(xiàn)在能展示圖片了，那就該來(lái)做自動(dòng)翻頁(yè)了。

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

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

那有了該方法，我們就可以很輕松的寫(xiě)出自動(dòng)播放：

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

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

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

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

animateToPage 有三個(gè)參數(shù)：

1. 跳轉(zhuǎn)的頁(yè)面 2. 跳轉(zhuǎn)到該頁(yè)面動(dòng)畫(huà)持續(xù)時(shí)間（也就是多長(zhǎng)時(shí)間能翻到該頁(yè)） 3. 動(dòng)畫(huà)的效果

定義好后，我們來(lái)看一下效果：

點(diǎn)擊事件

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

點(diǎn)擊事件非常簡(jiǎn)單，我們可以在 PageView 上面加一個(gè)  GestureDetector 來(lái)識(shí)別手勢(shì)，

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

因?yàn)楹罄m(xù)要添加指示器，指示器應(yīng)該也要有自己的點(diǎn)擊事件，比如點(diǎn)擊第二個(gè)小圓點(diǎn)就跳轉(zhuǎn)到第二頁(yè)之類(lèi)的，

所以，我們要在 Image 上面添加手勢(shì)識(shí)別：

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

非常簡(jiǎn)單，就是增加了一個(gè) GestureDetector ，來(lái)看一下效果：

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

但是還并不完善，下面來(lái)做指示器。

指示器

一般的輪播，都會(huì)有一個(gè)指示器，例如下面的小圓點(diǎn)，或者「1 / 3」類(lèi)似于這種，那我們這里就只搞第一種小圓點(diǎn)。

作為指示器，應(yīng)該有如下幾點(diǎn)：

1. 在圖片前面（廢話(huà)，在圖片后面也看不到） 2. 有幾張圖片就有幾個(gè)指示器 3. 顯示出當(dāng)前在第幾頁(yè)

在圖片前面顯示

這個(gè)需求比較簡(jiǎn)單，我們用一個(gè) Stack 來(lái)包裹住  PageView 和  Indicator 就ok了：

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

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

有幾張圖片就有幾個(gè)指示器

我們這里說(shuō)的指示器就是小圓點(diǎn)，也很簡(jiǎn)單，用 ClipOval 來(lái)創(chuàng)建一個(gè)圓形就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ù)的長(zhǎng)度 2. Stack 定義了 Aligment 為  bottomCenter 3. 然后定義了一個(gè)  Positioned  來(lái)控制距離底部的距離 4. child 為  Row ，橫向排列小圓點(diǎn) 5. 給每個(gè)小圓點(diǎn)設(shè)置邊距為3 6. 小圓點(diǎn)的大小為8

看一下效果：

可以發(fā)現(xiàn)小圓點(diǎn)確實(shí)是出來(lái)了，但是并沒(méi)有指示到當(dāng)前是哪一個(gè)。

顯示出當(dāng)前在第幾頁(yè)

那接下來(lái)就要顯示出當(dāng)前是在第幾頁(yè)，其實(shí)這個(gè)也很簡(jiǎn)單（如果不做特殊效果的話(huà)），

我們剛才指示器的小圓點(diǎn)是灰色的，那當(dāng)前頁(yè)的小圓點(diǎ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(),
 ),
 );
}

這里的重點(diǎn)是 Container 的 color 屬性，判斷一下當(dāng)前的值是否是和當(dāng)前 index 的值相等，

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

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

順便更新 _curIndex 的值。

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

這個(gè)時(shí)候這個(gè) Banner 可以說(shuō)是很完善了，但是如果我們手動(dòng)的去干預(yù)滑動(dòng)會(huì)出現(xiàn)什么問(wèn)題呢？

因?yàn)槲覀儎偛艑?xiě)的是 3 秒一切換，所以我們?cè)?，手?dòng)切換的時(shí)候，它在到達(dá)第三秒后，就會(huì)出現(xiàn)連續(xù)換頁(yè)的情況。

人為拖動(dòng)的時(shí)候關(guān)閉自動(dòng)播放

所以，根據(jù)上述情況，我們就要在監(jiān)聽(tīng)到有人為拖動(dòng)的時(shí)候去關(guān)閉自動(dòng)播放，然后在沒(méi)有人為的情況下打開(kāi)。

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

然后在手指離開(kāi)的時(shí)候恢復(fù)任務(wù)。

但是！這里有很大的坑！

1. Timer 沒(méi)有暫停方法 2. 因?yàn)橛玫氖?nbsp; PageView ，有滑動(dòng)沖突， 所以監(jiān)聽(tīng)不到手指離開(kāi)的方法

這里只能采用曲線(xiàn)救國(guó)的方法：

1.

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

2.

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

所以我們應(yīng)該這么寫(xiě)：

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

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

隨后再對(duì) _timer 進(jìn)行初始化。

為什么要這么做？取消的同時(shí)進(jìn)行初始化？

因?yàn)槲覀儾⒉恢朗裁磿r(shí)候手指離開(kāi)屏幕，所以我們?cè)谑种更c(diǎn)擊后就 重新開(kāi)始計(jì)時(shí) ，

這樣既能保證點(diǎn)擊的時(shí)候沒(méi)有定時(shí)任務(wù)，又能保證在后續(xù)的一段時(shí)間后會(huì)重新開(kāi)始定時(shí)任務(wù)。

因?yàn)槎〞r(shí)任務(wù)的時(shí)間是3秒，而我們滑動(dòng)查看圖片也就一兩秒的時(shí)間，這段時(shí)間之內(nèi)如果再次手動(dòng)滑動(dòng)，那么也會(huì)取消掉之前的任務(wù)，重新開(kāi)始新的任務(wù)，這樣就達(dá)到了我們的效果。

來(lái)看一下：

那到現(xiàn)在為止整個(gè) Banner 的封裝就結(jié)束了。

總結(jié)

首先，在封裝一個(gè) Widget 的時(shí)候，首先要了解該 Widget 的功能，根據(jù)功能的需求來(lái)實(shí)現(xiàn)，

而且在實(shí)現(xiàn)的過(guò)程中，要考慮到靈活的問(wèn)題，可以給用戶(hù)來(lái)設(shè)置的就要暴露出來(lái)，而不能暴露的方法就要寫(xiě)成私有的。

完整代碼已經(jīng)傳至GitHub：https://github.com/wanglu1209/WFlutterDemo

以上所述是小編給大家介紹的Flutter 封裝一個(gè) Banner 輪播圖的實(shí)例代碼詳解,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

最新評(píng)論