Flutter 封裝一個 Banner 輪播圖

airland發表於2021-09-09

實際業務開發中,首頁一般都會存在一個輪播圖。

在 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 來限定高度,來看一下效果:

圖片描述

自動翻頁播放

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

一般在 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 +12.使用 controller 的 animateToPage 方法,該方法是有動畫效果的跳轉

animateToPage 有三個引數:

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

定義好後,我們來看一下效果:
圖片描述

點選事件

現在自動播放也 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」類似於這種,那我們這裡就只搞第一種小圓點。

作為指示器,應該有如下幾點:

1.在圖片前面(廢話,在圖片後面也看不到)2.有幾張圖片就有幾個指示器3.顯示出當前在第幾頁

在圖片前面顯示

這個需求比較簡單,我們用一個 Stack 來包裹住 PageViewIndicator 就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 為 bottomCenter3.然後定義了一個 Positioned 來控制距離底部的距離4.child 為 Row,橫向排列小圓點5.給每個小圓點設定邊距為36.小圓點的大小為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 的值相等,

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

如果光寫成這樣,小圓點是不會變的,所以我們要在 PageViewonPageChanged 回撥中去 setState()

順便更新 _curIndex 的值。

重新構建一下重新整理頁面,這個時候看一下效果:
圖片描述

這個時候這個 Banner 可以說是很完善了,但是如果我們手動的去幹預滑動會出現什麼問題呢?

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

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

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

剛才已經在 Image 上面加了一個 GesutreDetector,正好,我們新增 onPanDown 引數來暫停定時任務。

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

但是!這裡有很大的坑!

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

這裡只能採用曲線救國的方法:

1.

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

2.

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

所以我們應該這麼寫:


/// 點選到圖片的時候取消定時任務
_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 的功能,根據功能的需求來實現,

而且在實現的過程中,要考慮到靈活的問題,可以給使用者來設定的就要暴露出來,而不能暴露的方法就要寫成私有的。

來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/964/viewspace-2823924/,如需轉載,請註明出處,否則將追究法律責任。

相關文章