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 = const Duration(seconds: 2);
  int _currentIndex = 0;

  @override
  void initState() {
    if (widget.autoScroll) {
      _timer = Timer.periodic(_duration, _timerCallback);
    }
    _pageController = new PageController();
    _tabController = new TabController(length: widget.cycleImages.length,
        vsync: this);

    for (int i = 0; i < widget.cycleImages.length; i++) {
      _pages.add(new GestureDetector(child: Image.network
        (widget.cycleImages[i].imageUrl, fit: BoxFit.fill,),
          onTap: () => _onPageClicked(i)));
    }

    //为pageView的头部添加最后一个widget、尾部加上第一个widget。
    if (widget.cycleImages.length > 1) {
      _pages.insert(0, new GestureDetector(child: Image.network
        (widget.cycleImages[widget.cycleImages.length - 1].imageUrl,
        fit: BoxFit.fill,),
          onTap: () => _onPageClicked(widget.cycleImages.length - 1)));

      _pages.add(new GestureDetector(child: Image.network
        (widget.cycleImages[0].imageUrl, fit: BoxFit.fill,),
          onTap: () => _onPageClicked(0)));
    }
    super.initState();
  }

  @override
  void dispose() {
    _timer.cancel();
    _tabController.dispose();
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new Stack(
      children: <Widget>[
        PageView(
          children: _pages,
          controller: _pageController,
          onPageChanged: _onPageChanged,
        ),
        Align(
          alignment: Alignment(0.0, 1.0),
          child: TabPageSelector(
            color: Colors.white,
            selectedColor: Colors.grey,
            controller: _tabController,
          ),
        )
      ],
    );
  }

  void _onPageClicked(int index) {
    if (widget.onPageClicked != null) {
      widget.onPageClicked(index);
    }
  }

  void _onPageChanged(int index) {
    if (widget.cycleImages.length == 1) {
      return;
    }
    if (index == 0) {
      _tabController.animateTo(_tabController.length - 1);
      //widget.cycleImages.length-1+1
      _pageController.jumpToPage(widget.cycleImages.length);
    } else if (index == _tabController.length + 1) {
      _tabController.animateTo(0);
      _pageController.jumpToPage(1);
    } else {
      _tabController.animateTo(index - 1);
    }
  }

  void _timerCallback(Timer timer) {
    if (widget.cycleImages.length > 1) {
      _currentIndex++;
      _pageController.animateToPage(
          _currentIndex % widget.cycleImages.length,
          duration: const Duration(microseconds: 20),
          curve: Curves.fastOutSlowIn);
    }
  }
}

class CycleImageEntity {
  String cycleContent;
  String imageUrl;
}

---

三：使用方法

  用起来其实很简单了，图片集合必传，其它随意。

CycleView(imgs, onPageClicked: (index) {
          print(imgs[index].cycleContent);
        }, autoScroll: true,)

---

四：The End

  其实我这个 CycleView 还有一些东西没实现，比如：在滚动的时候，如果手指滑动，应该暂停滚动，并且，手指滑动后应该更新 index 的位置。 剩下的，接下来我会再完善的.
  希望这篇文章对你有帮助。