TabPageSelector 奇怪的行为

Question

我正在尝试使用here

提供的这段代码

现在，代码末尾有 2 个

IconButton

，多亏了它们，我们才能从一页移动到下一页（总共 3 页），它的工作原理如下：

• 您从第一页开始
• 单击向右箭头即可转到第二页
• 单击向右箭头并转到最后一页和第三页 如果您再次单击向右箭头，它不会执行任何操作，因为代码是这样编程的。

但我不太喜欢这样，我希望它能这样工作：

• 您已经在第三页了
• 单击向右箭头即可返回第一页 当然，如果我在第一页，这次单击向左箭头，我就会转到第三页。

愿意改变这一点，我将函数

IconButton

内的2

OnPressed

的代码修改为：

    //first IconButton
    onPressed: () {
              if (currentPageIndex == 0) {
                 onUpdateCurrentPageIndex(2);
              } else {
                 onUpdateCurrentPageIndex(currentPageIndex - 1);
              }
            },

还有这个：

    //second IconButton
    onPressed: () {
              if (currentPageIndex == 2) {
                onUpdateCurrentPageIndex(0);
              } else {
                onUpdateCurrentPageIndex(currentPageIndex + 1);
              }
            },

现在它像我想要的那样工作，但是

TabPageSelector

（2 个箭头之间的 3 个点）有问题。

• 我在第三页第三个点上
• 我点击向右箭头
• 从第三页到第一页，点也是如此（从第三个点到第一个点）
• 之后，它从第一点转到第二点，然后再次返回到第一点

您可以自己尝试一下，点击我提供的链接并用我写的代码修改代码。

这是一种非常随机的行为，我不明白为什么，有人可以向我解释为什么会发生这种情况吗？以及我如何修复它。预先感谢！

Answer 1

问题出在

_updateCurrentPageIndex()

方法上。

方法内部有一个

.animateToPage

调用，它返回

Future<void>

(refs)。

void _updateCurrentPageIndex(int index) {
  _tabController.index = index;
  _pageViewController.animateToPage( // <- return the Future<void>
    index,
    duration: const Duration(milliseconds: 400),
    curve: Curves.easeInOut,
  );
}

那么为什么你的点指示器移动得这么奇怪

是因为你同时改变了指示器位置和页面视图位置，但是

animateToPage()

需要等待一点时间才能完成，所以当点移动到目标位置时，它会再次移动到中间，因为目前浏览量位置仍然在中心。

解决方案很简单：

void _updateCurrentPageIndex(int index) async { // <- add async
  await _pageViewController.animateToPage( // <- move this up and add await
    index,
    duration: const Duration(milliseconds: 400),
    curve: Curves.easeInOut,
  );
  _tabController.index = index; // <- move this below the animateToPage
}

1. 将

   async

   关键字添加到方法中
2. 将

   _tabController

   的分配移至

   animateToPage

   调用下方
3. 将

   await

   关键字添加到

   animateToPage

现在，点指示器将在

animateToPage

完成后移动。

希望能解决您的问题，谢谢😉