在 上篇文章–Flutter 实现支持上拉加载和下拉刷新的 ListView 中,我们最终实现的效果是在 listView 上面留下了一段空白,本意是用来加载轮播图的,于是今天就开发了一下,希望能给各位灵感。
一 、效果如下
![](https://i-blog.csdnimg.cn/blog_migrate/fa17e83c8b657903b1cf64723be40ab4.gif)
说一下大体思路
其实图片展示是用的 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 =