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,
  ),
);
复制代码

先定义一个方法，_cancelTimer()，里面首先判断若是 _timer 不是 null 的时候则把 _timer 取消掉，而后置空。

随后再对 _timer 进行初始化。

为何要这么作？取消的同时进行初始化？

由于咱们并不知道何时手指离开屏幕，因此咱们在手指点击后就 从新开始计时，

这样既能保证点击的时候没有定时任务，又能保证在后续的一段时间后会从新开始定时任务。

由于定时任务的时间是3秒，而咱们滑动查看图片也就一两秒的时间，这段时间以内若是再次手动滑动，那么也会取消掉以前的任务，从新开始新的任务，这样就达到了咱们的效果。

来看一下：

那到如今为止整个 Banner 的封装就结束了。

总结

首先，在封装一个 Widget 的时候，首先要了解该 Widget 的功能，根据功能的需求来实现，

并且在实现的过程当中，要考虑到灵活的问题，能够给用户来设置的就要暴露出来，而不能暴露的方法就要写成私有的。

完整代码已经传至GitHub：github.com/wanglu1209/…