Flutter控件封装之轮播图Banner

Flutter中实现轮播图的方式有很多种，比如使用三方flutter_swiper，card_swiper等等，使用这些三方，可以很快很方便的实现一个轮播图展示，基本上也能满足我们日常的开发需求，如果说，想要一些定制化的操作，那么就不得不去更改源码或者自己自定义一个，自己定义的话，Flutter中提供了原生组件PageView，可以使用它很方便的来实现一个轮播图。

PageView类似于Android中的ViewPager，可以实现页面的横向或者纵向滑动，具体的使用方式可以直接PageView()，或者使用PageView.builder()，这两种方式都可以实现，区别就是前者会把所有页面一次性初始化出来，而后者则不会，为了便于大家了解这个组件，我们会简单的举一个小案例。

按照以往惯例，我们先看下本篇文章的大纲，大概如下：

1、最终的实现效果一览

2、PageView组件的属性和具体使用

3、轮播图封装注意事项

4、案例源码刨析

5、封装后的源码及使用方式

6、总结

一、最终的实现效果一览

利用PageView，封装了一些特定的效果，比如文字指示器，圆角指示器，以及指示器的位置，轮播图片的缩进展示等等，录制了一个Gif效果图，如下：

二、PageView组件的属性和具体使用

毕竟是使用PageView来实现一个轮播图，那么针对这个组件，我们需要简单的做个介绍：

先看一下基本的常见属性：

在实际的开发中，PageView.builder()方式使用是居多的，也建议大家以这种方式作为使用，很简单，只需要在itemBuilder里返回页面视图即可，代码如下：

PageView.builder(
            itemCount: 6,
            onPageChanged: (position) {
              print("当前索引为：$position");
            },
            itemBuilder: (context, index) {
              return Container(
                  color: Colors.amber,
                  alignment: Alignment.center,
                  child: Text("我是第$index个页面"));
            })

基本效果如下：

三、轮播图封装注意事项

基本掌握了PageView的用法之后，我们就开始着手封装一个轮播图，先分析一下，构成轮播图的几个要素，第一，满足自动轮播的要求，而且可以动态设置轮播时长，第二，要能满足多种指示器要求，而且位置可以动态设置，第三，要满足手动轮播和自动轮播要求，并且要处理好手势和定时之间的冲突，第四，最主要的就是使用起来要简单。

定时器注意事项

简单的确定要素之后，我们就可以动手书写了，自动轮播很简单，我们只需要开启一个定时器即可，但是定时器需要注意开启和暂停，也就是什么时候开始，什么时候暂停，否则很容易造成轮播混乱现象。

轮播图开始，其一，也就是主动设置了自动轮播属性，进入到页面，我们就需要开启定时，如果页面退入后台，再重新回到前台，我们也是需要开启轮播的，其二就是暂停，除了退入后台暂停之外，还有就是手势滑动的时候也需要暂停，否则就会和定时造成冲突。

手势注意事项

关于手势，如果我们直接监听页面组件的手势，发现是和PageView有冲突的，为了解决这个手势问题，我们可以采用原始指针事件Listener来监听手势滑动。

部分代码如下，手指按下后，取消定时，手指抬起后，开启定时，当然了如果只有按下和抬起，那么则是一个点击事件，我们可以把这个事件回调给用户。

Listener(
          onPointerDown: (event) {
            //手指按下，定时取消
            _pauseTimer();
            _isClick = true;
          },
          onPointerMove: (event) {
            _isClick = false;
          },
          onPointerUp: (event) {
            //手指抬起，定时开启
            _startTimer();
            //作为点击事件
            if (_isClick && widget.bannerClick != null) {
              widget.bannerClick!(_currentPage);
            }
          },
          child: PageView.builder()t
)

指示器注意事项

指示器需要注意，如果说自己用，一种指示器无可厚非，如果是给他人用，那么就要丰富多彩，尽量满足多的需求。

四、案例源码刨析

1、创建定时器

定时器使用的是Timer，定义了两个方法，便于开启和暂停，当轮播时间到时，就可以执行页面切换操作，使用PageController的animateToPage来切换。

     /*

      * 开启定时
      * */

      void _startTimer() {
        if (!_isRunning) {
          _isRunning = true;
          _timer = Timer.periodic(Duration(seconds: widget.delay!), (timer) {
            _controller.animateToPage(_pagePosition + 1,
                duration: const Duration(milliseconds: 800),
                curve: Curves.easeInOut);
          });
        }
      }

      /*
      * 暂停定时
      * */
      void _pauseTimer() {
        if (_isRunning) {
          _isRunning = false;
          _timer?.cancel(); //取消计时器
        }
      }

      @override
      void dispose() {
        _controller.dispose();
        _timer?.cancel();
        super.dispose();
      }

2、感知生命周期变化

当页面退入后台和回到前台，我们需要做暂停和开启定时，那么就需要针对页面做监听操作，添加监听后，记得当前类with WidgetsBindingObserver。

     // 添加监听
        WidgetsBinding.instance.addObserver(this);


      /*
      * 感知生命周期变化
      * */
      @override
      void didChangeAppLifecycleState(AppLifecycleState state) {
        super.didChangeAppLifecycleState(state);
        if (state == AppLifecycleState.resumed && widget.autoPlay!) {
          _startTimer(); //页面可见，开启定时
        } else if (state == AppLifecycleState.paused && _isRunning) {
          _pauseTimer(); //页面不可见，关闭定时
        }
      }

3、图片圆角

图片的圆角实现就比较多了，比如Container的装饰器，或者使用组件ClipRRect都可以的。

     ClipRRect(
             //设置图片圆角
              borderRadius: BorderRadius.circular(widget.radius!),
              child: getBannerImage(imageUrl)))

4、指示器类型和位置

指示器类型，可以根据业务需求，进行专项定制，目前源码中的类型，有以下几种，分别是，圆形，圆角，矩形，文字，其位置，可以放到中间，左右两边以及轮播图的下方。

     /*

      * 指示器
      * */

      Widget _buildIndicators(mainAxisAlignment) {
        if (widget.indicatorType == IndicatorType.text) {
          //文字
          return Container(
            alignment: widget.textIndicatorAlignment,
            child: VipText(
              "${_currentPage + 1}/${widget.imageList!.length}",
              style: widget.textIndicatorStyle,
              backgroundColor: widget.textIndicatorBgColor,
              padding: widget.textIndicatorPadding,
              paddingLeft: widget.textIndicatorPaddingLeft,
              paddingTop: widget.textIndicatorPaddingTop,
              paddingRight: widget.textIndicatorPaddingRight,
              paddingBottom: widget.textIndicatorPaddingBottom,
            ),
          );
        }
        return Row(
          mainAxisAlignment: mainAxisAlignment,
          children: List.generate(widget.imageList!.length, (index) {
            return Container(
              width: _currentPage == index
                  ? widget.indicatorWidth
                  : widget.indicatorUnWidth ?? widget.indicatorWidth,
              height: _currentPage == index
                  ? widget.indicatorHeight
                  : widget.indicatorUnHeight ?? widget.indicatorHeight,
              margin: EdgeInsets.symmetric(horizontal: widget.indicatorMargin!),
              decoration: BoxDecoration(
                shape: widget.indicatorType == IndicatorType.circle
                    ? BoxShape.circle
                    : BoxShape.rectangle,
                borderRadius: widget.indicatorType == IndicatorType.rectangle
                    ? BorderRadius.all(Radius.circular(widget.indicatorRadius!))
                    : null,
                color: _currentPage == index
                    ? widget.indicatorSelectColor
                    : widget.indicatorUnSelectColor,
              ),
            );
          }),
        );
      }

5、轮播图缩进效果

缩进的话，有两种，一种除了当前图片，左右图片会变小，当滑动到当前图片之后才会放大，一种就是很简单的缩进。

viewportFraction 可以理解为一页内容占据屏幕的比例，铺满就是1，小于1就是不铺满。

    PageController(viewportFraction: widget.viewportFraction!)

如果说，在滑动的时候，想要图片实现放大和缩小动画，那么我们需要执行一个放大和缩小动画Transform.scale。

     return Transform.scale(
                        scale: endScale,
                        child: Container(
                            margin: widget.imageMargin != null
                                ? EdgeInsets.all(widget.imageMargin!)
                                : EdgeInsets.only(
                                    left: widget.imageMarginLeft!,
                                    top: widget.imageMarginTop!,
                                    right: widget.imageMarginRight!,
                                    bottom: widget.imageMarginBottom!),
                            child: ClipRRect(
                                //设置图片圆角
                                borderRadius: BorderRadius.circular(widget.radius!),
                                child: getBannerImage(imageUrl))))

五、封装后的源码及使用方式

目前源码已经上传至了Github，大家需要的话，可以查看，由于篇幅有限，就不全部粘贴了，地址：

github.com/AbnerMing88…

可用属性一览

使用方式

普通加载

     VipBanner(

              imageList: const [


                "https://www.vipandroid.cn/ming/image/gan.png",


                "https://www.vipandroid.cn/ming/image/zao.png"


              ],


              bannerClick: (position) {
                //条目点击
                Toast.toast(context, msg: position.toString());

              })

文字指示器

     VipBanner(

              imageList: const [


                "https://www.vipandroid.cn/ming/image/gan.png",


                "https://www.vipandroid.cn/ming/image/zao.png"


              ],


              indicatorType: IndicatorType.text,
              bannerClick: (position) {
                Toast.toast(context, msg: position.toString());

              })

圆角指示器

    VipBanner(
              imageList: const [


                "https://www.vipandroid.cn/ming/image/gan.png",


                "https://www.vipandroid.cn/ming/image/zao.png"


              ],


              indicatorType: IndicatorType.rectangle,
              indicatorRadius: 5,
              indicatorWidth: 20,
              indicatorHeight: 5,
              bannerClick: (position) {
                Toast.toast(context, msg: position.toString());
              })

使用方式呢，有很多的类型，就不一一举例了，大家可以看源码中的页面，地址是：

github.com/AbnerMing88…

六、总结

在封装的时候，务必要确定的有以下几个要素，一是定时轮播，二是手势和定时冲突解决，三是无限轮播，四是指示器的设置，五是图片轮播的效果，搞定这些潜在的要素，一个简简单单的轮播图封装起来并不难。