Flutter TabPageSelector 异常：循环切换页面时指示器跳动

问题场景 #

调试Flutter官方PageView示例时，修改了左右箭头IconButton的点击逻辑，实现页面循环切换（第三页点右箭头回到第一页，第一页点左箭头跳转到第三页）。页面切换功能正常，但TabPageSelector指示器出现异常：从第三页切换到第一页时，指示器先跳至第一点，随后跳到第二点再回到第一点。

异常原因 #

直接修改currentPageIndex并触发setState后，TabPageSelector会立刻更新为目标索引；但PageController默认的滚动动画是按线性路径执行（从索引2到0时，会走2→1→0的滚动路径），动画过程中PageController的page值会经过1，导致TabPageSelector跟着更新为第二点，直到动画结束后才回到第一点，最终出现指示器来回跳变的异常。

修复方案 #

方案1：无动画直接跳转（简单快速） #

移除直接修改currentPageIndex后依赖PageController自动滚动的逻辑，改用jumpToPage直接跳转，避免动画带来的中间状态：

// 左箭头IconButton
onPressed: () {
  int targetPage = currentPageIndex == 0 ? 2 : currentPageIndex - 1;
  _pageController.jumpToPage(targetPage);
  setState(() {
    currentPageIndex = targetPage;
  });
},

// 右箭头IconButton
onPressed: () {
  int targetPage = currentPageIndex == 2 ? 0 : currentPageIndex + 1;
  _pageController.jumpToPage(targetPage);
  setState(() {
    currentPageIndex = targetPage;
  });
},

方案2：保留平滑动画且同步指示器状态 #

通过监听PageController的滚动状态更新currentPageIndex，确保TabPageSelector与页面滚动状态完全同步，同时让PageController执行正确的循环动画：

1. 初始化PageController并添加监听：

final PageController _pageController = PageController(initialPage: 0);
int currentPageIndex = 0;

@override
void initState() {
  super.initState();
  // 监听PageController的页面变化，同步更新currentPageIndex
  _pageController.addListener(() {
    setState(() {
      currentPageIndex = _pageController.page?.round() ?? 0;
    });
  });
}

2. 修改箭头点击逻辑，通过animateToPage控制滚动：

// 左箭头IconButton
onPressed: () {
  int targetPage = currentPageIndex == 0 ? 2 : currentPageIndex - 1;
  _pageController.animateToPage(
    targetPage,
    duration: const Duration(milliseconds: 300),
    curve: Curves.ease,
  );
},

// 右箭头IconButton
onPressed: () {
  int targetPage = currentPageIndex == 2 ? 0 : currentPageIndex + 1;
  _pageController.animateToPage(
    targetPage,
    duration: const Duration(milliseconds: 300),
    curve: Curves.ease,
  );
},

注：如果希望循环切换的动画更符合直觉（比如从最后一页滑到第一页是向左滑动，而非向右滑过中间页），可以手动计算滚动偏移量，先滚动到超出边界的位置再跳转至目标页，避免中间页的显示。

内容的提问来源于stack exchange，提问作者Arnold Kumaraku