Flutter中PageView结合AnimateToPage如何动态识别手动滚动位置实现轮播

问题根源 #

你手动维护的_currentPage变量没有和PageView的实际滑动位置同步，手动滑动页面时_currentPage的值不会跟着更新，定时器触发时仍然用旧的数值计算下一页，才会出现回到起始位置的问题。不需要额外加GestureDetector，PageView自带的回调就能满足需求。

具体修改步骤 #

• 第一步：给你的PageView组件添加onPageChanged回调，每次页面切换时同步更新_currentPage的值，示例：

PageView(
  controller: _pageController,
  onPageChanged: (int page) {
    // 不管是手动滑动还是代码触发的页面切换，都会同步更新当前页数值
    _currentPage = page;
  },
  // 保留你原来的其他PageView配置
)

• 第二步：优化定时器内的逻辑，避免数组越界，也可根据需求添加循环滚动逻辑：

Timer.periodic(Duration(seconds: 5), (Timer timer) {
  // 到最后一页时，需要循环就重置为0，不需要循环就终止自增
  if (_currentPage < results.length - 1) {
    _currentPage++;
  } else {
    // 不需要循环就注释掉下面的重置代码，保留return即可停止自动滚动
    _currentPage = 0;
    // return;
  }
  _pageController.animateToPage(
    _currentPage,
    duration: Duration(milliseconds: 350),
    curve: Curves.easeIn,
  );
});

• 第三步：你原来的results初始化逻辑存在重复冗余问题，循环了tests长度次，每次都添加所有非空label，会导致results出现大量重复数据，优化后代码：

// 原来的整个for循环直接删掉，换成这行即可
results = tests.where((label) => label.isNotEmpty).toList();

额外注意事项 #

页面销毁时要记得销毁定时器和PageController，避免内存泄漏：

@override
void dispose() {
  _mytimer?.cancel();
  _pageController.dispose();
  super.dispose();
}

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