我们在前面章回中介绍了PageView这个Widget,本章回中将介绍 如何给PageView添加指示器.闲话休提，让我们一起Talk Flutter吧。

概念介绍

我们在这里说的指示器表示PageView底部的小圆圈，它用来指示当前哪个页面被选中。常用的场景是滑动页面时小圆圈高亮显示当前被选中的页面，其它小圆圈显示为暗色，表示其它页面没有被选中。本章回中将详细介绍如何给PageView添加这种小圆圈。

添加方法

1. 指示器为小圆圈，使用Material的圆形实现，这里不理解不要紧，看代码就能明白；
2. 创建n个指示器(这里的n是PageView中Page的数量)，并且使用Row容器把它们排列中一行；
3. 使用Column当作外层容器，第一行存放PageView，第二行存放排在一行的小圆圈，它们就是PageView的指示器；

示例代码

//创建小圆圈指示器:代码中的r表示小圆圈的半径，s表示小圆圈之间的间隔，它们的值通过参数传入Widget _Indicator(int index, int pageCount, double r, double s) {//通过pageController中的索引值来判断当前页面是否被选中bool isIndexPageSelected = (index ==(pageController.page != null ? pageController.page?.round() : 0));//通过参数传递的索引值来判断当前页面是否被选中// bool isIndexPageSelected = (index == currentIndex) ? true : false;//打印索引值，调试使用// print("page count ${pageController.page?.round()}");// print("current : ${currentIndex}");return Container(//宽度是圆的半径，宽度是半径+左右两边的间隔(space)height: r,width: r + 2 * s,child: Material(color: isIndexPageSelected ? Colors.greenAccent : Colors.grey,type: MaterialType.circle,child: Container(width: r,height: r,),),);}//把三个小圆圈组成一行@overrideWidget build(BuildContext context) {return Row(mainAxisAlignment: MainAxisAlignment.center,children: [_Indicator(0, 3, 20, 18),_Indicator(1, 3, 20, 18),_Indicator(2, 3, 20, 18),],);}
}
//使用Column当作外层容器，第一行存放PageView，第二行存放排在一行的小圆圈，它们就是PageView的指示器；
return Scaffold(appBar: AppBar(title: const Text("Example of PaveView"),backgroundColor: Colors.purpleAccent,),body: Column(mainAxisAlignment: MainAxisAlignment.spaceAround,children: [Container(width: double.infinity,height: 500,child: PageView(), //PageView详细的内容省略不写),Indicator(pageController: mPageController,count: 3,currentIndex: pageIndex,)],),
);

上面的代码中只列出了核心代码，完整的代码可以查看Github上ex015中的内容。编译并且运行上面的代码可以得到一个显示三个Page的页面，每个Page对应一个小圆圈指示器，滑动Page时小圆圈的颜色跟着变化。我在这里就不演示程序运行结果了，建议大家自己动手去实践。

指示器联动

代码中还有一部分内容大家可能看不明白，一个是pageController，另外一个是小圆圈的颜色设置。它们两结合起来可以让小圆圈与page联动，什么是联动？就是Page滑动到哪一页,与该页对应的小圆圈高亮显示，其它页的小圆圈显示为暗色，这样就可以通过小圆圈来指示出当前被选中的页面，这也是我们叫它指示器的原因。

联动的原理：通过pageController获取当前被选中页的索引值，把该值与参数中传入的索引值index进行比较，如果它们相同说明当前页被选中了，反之则说明当前页没有被选中。对于被选中的指示器，我们把它的颜色设置为高亮色，没有被选中的指示器，我们把它的颜色设置为暗色或者叫浅色。

该原理中核心的内容是获取当前被选中页的索引值，除了使用pageController外还有一种方法：在代码中定义一个变量用来存放被选中页的索引值(代码中为currentIndex变量)，然后在PageView的onPageChanged()方法中通过setState()方法修改索引值，最后通过指示器的参数传递给指示器。这部分内容对应的代码被注释起来了，大家可以打开注释后再编译程序，从程序运行效果中可以看到这种方法也可以实现指示器联动效果。

看官们，关于"如何给PageView添加指示器"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!