Flutter 如何封裝一個 Banner 輪播圖？

時間 2019-11-17

標籤 flutter 如何封裝一個 banner 欄目軟件設計简体版

原文原文鏈接

實際業務開發中，首頁通常都會存在一個輪播圖。git

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

瞭解需求

首先，咱們在開發一個功能的時候要了解這個功能的需求，那一個輪播須要有什麼功能？數組

能夠自定義高度和一些屬性
展現圖片
自動翻頁播放
點擊事件
指示器
人爲拖動的時候關閉自動播放

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

自定義高度和一些屬性

這裏主要是作一些前期的工做，若是咱們的 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

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

展現圖片

通常的 Banner 都是由一些圖片組成，而後在固定的時間內翻頁，this

那可以翻頁的 Widget，咱們首先想到的是 PageView，而 PageView 也正好能知足咱們的需求，spa

它有以下幾個屬性：.net

多頁面翻頁
有控制器控制翻頁
翻頁的回調
無限頁面

那咱們首先就來定義一個 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,
  ),
);
複製代碼