第二十七回：如何给PageView添加指示器

我们在前面章回中介绍了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,
        ),
      ),
    );
  }

//把三个小圆圈组成一行
  @override
  Widget 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添加指示器"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!