妹子再好看，不是自己的也没啥用。轮子虽然好用，自己不知道原理照样用的心里不踏实。
下面手把手一起来撸一个滑动轮播图。
素面朝天的效果图
撸前须知：这个实现十分以及万分简单，保证不会让你丢一丝一毫的头发。我们先来分析一下这个简陋的轮播图。简陋轮播图主要有两部分组成：和。他们俩的关系很纯洁也很简单 ✌️ 🤪 ✌️，就像学生时代的爱情一样。
有多少个图片就有多少个指示器每个图片对应一个指示器，也就是小圆点所以下面请打开Android撕肚兜。
pageCount、currentIndex 恭喜你！解锁了一半的成就！！！pageCount：图片个数，由于图片个数和指示器是一一对应的关系，所以用来决定构造多少个指示器（小圆点）——有多少个图片就有多少个指示器。currentIndex：记录当前被选定的图片和指示器——每个图片对应一个指示器，也就是小圆点。下面逻辑比较简单，代码中也有详细的注释🙃，
import 'package:flutter/material.dart';
import 'package:money_poket/fantastic/pageIndicator.dart';
class Fans extends StatefulWidget {
@override
_FansState createState() => _FansState();
}
class _FansState extends State<Fans> {
int currentIndex = 0;
List pics = ['images/page1.jpg', 'images/page2.jpg', 'images/page3.jpg'];
// currentIndex需要不断地增加，才能在向左滑动的时候显示后一个图片
increase() {
if (currentIndex < pics.length - 1)
setState(() {
currentIndex++;
});
else
// 在滑动到最后一个图片后，currentIndex便不再增加
currentIndex = currentIndex;
}
// currentIndex需要不断地减少，才能在向右滑动的时候显示前一个图片
decrease() {
if (currentIndex > 0)
setState(() {
currentIndex--;
});
else
// 在滑动到第一个图片后，currentIndex便不再减少
currentIndex = 0;
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Stack(
alignment: Alignment.bottomCenter,
children: <Widget>[
GestureDetector(
child: Image.asset(pics[currentIndex]),
onHorizontalDragEnd: (DragEndDetails details) {
// 使用details.velocity.pixelsPerSecond.dx来获取滑动距离
// 向右滑动为正，向左滑动为负
print('${details.velocity.pixelsPerSecond.dx}');
if (details.velocity.pixelsPerSecond.dx > 0) {
decrease();
} else if (details.velocity.pixelsPerSecond.dx < 0) {
increase();
}
},
),
Container(
width: 100,
child: PageIndicator(
currentIndex: currentIndex,
pageCount: pics.length,
),
),
],
),
),
);
}
}
其实整体逻辑很简单，代码中也做了充分的解释。
由于指示器位于图片之上，所以使用一个Stack,Stack能够让子Widget重叠显示，默认是左上对齐的，这里使用alignment: Alignment.bottomCenter让子Widget纵向沉底，横向居中。
然后需要相应屏幕滑动事件，所以使用了一个GestureDetector，添加一个onHorizontalDragEnd属性，用来监听屏幕滑动，onHorizontalDragEnd的回调函数中传递了一个DragEndDetails类型的参数，使用这个参数的对象方法details.velocity.pixelsPerSecond.dx就能获得用户横向滑动的距离，根据距离的值来判断用户是向左划还是向右划。然后通过增减currentIndex的值来切换图片的指示器。
虽然逻辑很简单，但是解释起来总感觉不够清晰，自己撸一撸就清晰了。嘻嘻。
