實際業務開發中，首頁一般都會存在一個輪播圖。
在 Flutter 中，如何開發一個輪播？
瞭解需求
首先，我們在開發一個功能的時候要了解這個功能的需求，那一個輪播需要有什麼功能？
- 可以自定義高度和一些屬性
- 展示圖片
- 自動翻頁播放
- 點選事件
- 指示器
- 人為拖動的時候關閉自動播放
其中「人為拖動的時候關閉自動播放」是比較難的，我們後續會說，那先一個一個功能來實現。
自定義高度和一些屬性
這裡主要是做一些前期的工作，如果我們的 Banner 要開源讓別人來使用，那我們肯定是要給使用者一些可以自定義的屬性的，比如：
- Banner 的高度
- 圖片切換的效果
- 點選事件的回撥
既然我們是封裝一個 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 也正好能滿足我們的需求，
它有如下幾個屬性：
- 多頁面翻頁
- 有控制器控制翻頁
- 翻頁的回撥
- 無限頁面
那我們首先就來定義一個 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 來限定高度，來看一下效果：
自動翻頁播放
現在能展示圖片了，那就該來做自動翻頁了。
一般在 Dart 中，使用 Timer.periodic() 來做迴圈定時任務，該方法有兩個引數：
- duration：指隔多長時間執行一次
- callback：時間到的時候執行的任務
那有了該方法，我們就可以很輕鬆的寫出自動播放：
_timer = Timer.periodic(Duration(seconds: 3), (t) {
_curIndex++;
_pageController.animateToPage(
_curIndex,
duration: Duration(milliseconds: 300),
curve: Curves.linear,
);
});
複製程式碼在上面我們給 PageView 定義了一個 controller，這裡就可以用上了，
首先定義 Timer.periodic 方法，指出每三秒執行一次，然後在回撥任務中執行：
- _curIndex++：index +1
- 使用 controller 的
animateToPage方法，該方法是有動畫效果的跳轉
animateToPage 有三個引數：
- 跳轉的頁面
- 跳轉到該頁面動畫持續時間（也就是多長時間能翻到該頁）
- 動畫的效果
定義好後，我們來看一下效果：
點選事件
現在自動播放也 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，來看一下效果：
講道理，現在一個最最基本的 Banner 就已經完成了，能看圖片，有輪播，有點選事件。
但是還並不完善，下面來做指示器。
指示器
一般的輪播，都會有一個指示器，例如下面的小圓點，或者「1 / 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(),
),
);
}
複製程式碼邏輯為：
- 首先獲取到圖片資料的長度
- Stack 定義了 Aligment 為
bottomCenter - 然後定義了一個
Positioned來控制距離底部的距離 - child 為
Row，橫向排列小圓點 - 給每個小圓點設定邊距為3
- 小圓點的大小為8
看一下效果：
可以發現小圓點確實是出來了，但是並沒有指示到當前是哪一個。
顯示出當前在第幾頁
那接下來就要顯示出當前是在第幾頁，其實這個也很簡單（如果不做特殊效果的話），
我們剛才指示器的小圓點是灰色的，那當前頁的小圓點我們給弄成白色的：
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 的值。
重新構建一下重新整理頁面，這個時候看一下效果：
這個時候這個 Banner 可以說是很完善了，但是如果我們手動的去幹預滑動會出現什麼問題呢？
因為我們剛才寫的是 3 秒一切換，所以我們在，手動切換的時候，它在到達第三秒後，就會出現連續換頁的情況。
人為拖動的時候關閉自動播放
所以，根據上述情況，我們就要在監聽到有人為拖動的時候去關閉自動播放，然後在沒有人為的情況下開啟。
剛才已經在 Image 上面加了一個 GesutreDetector，正好，我們新增 onPanDown 引數來暫停定時任務。
然後在手指離開的時候恢復任務。
但是！這裡有很大的坑！
Timer沒有暫停方法- 因為用的是
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秒，而我們滑動檢視圖片也就一兩秒的時間，這段時間之內如果再次手動滑動，那麼也會取消掉之前的任務，重新開始新的任務，這樣就達到了我們的效果。
來看一下：
那到現在為止整個 Banner 的封裝就結束了。
總結
首先，在封裝一個 Widget 的時候，首先要了解該 Widget 的功能，根據功能的需求來實現，
而且在實現的過程中，要考慮到靈活的問題，可以給使用者來設定的就要暴露出來，而不能暴露的方法就要寫成私有的。
完整程式碼已經傳至GitHub：github.com/wanglu1209/…