Flutter 自定义 轮播图的实现

  在 上篇文章–Flutter 实现支持上拉加载和下拉刷新的 ListView 中，我们最终实现的效果是在 listView 上面留下了一段空白，本意是用来加载轮播图的，于是今天就开发了一下，希望能给各位灵感。

一 、效果如下

说一下大体思路

   其实图片展示是用的 PageView ，然后，下面的指示器 是用的 TabPageSelector ，当然整体是用 Stack 包裹起来的。

1、如何实现 PageView与 TabPageSelector 联动

   可以通过 PageView 的 onPageChanged 方法来改变。

2、如何实现 PageView 的定时滚动

   可以通过 Timer 来实现。

3、关于边界处理的问题，最后一项怎么滑动到第一项

   我们可以在 pageView 的头部和尾部 分别加上 图片的 最后一张 和 第一张。比如：原先的图片组合是 1、2、3 那么我们加了之后就变成了 3、1、2、3、1。这样当滚动到最后一项（最后一个 1）的时候，用动画跳转到第一个 1 即可。 gif 也可以看出，还是很流畅的。

---

二：上代码

import 'package:flutter/material.dart';
import 'dart:async';

class CycleView extends StatefulWidget {
   

  //图片集合
  List<CycleImageEntity> cycleImages = new List();
  //点击事件回调
  Function onPageClicked;
  //是否自动滚动
  bool autoScroll;

  CycleView(@required this.cycleImages,
      {
   this.onPageClicked, this.autoScroll})
      :assert(cycleImages != null);

  @override
  State<StatefulWidget> createState() => _Cycle();

}

class _Cycle extends State<CycleView> with SingleTickerProviderStateMixin {
   

  TabController _tabController;
  PageController _pageController;
  List<Widget> _pages = new List();
  Timer _timer;
  var _duration =