Flutter PageView指示器异常：切换至最后索引时同时显示两个

问题现象 #

使用Flutter的PageView实现轮播组件时，切换到最后一个索引位置，指示器无法正确更新为最后一个，反而同时显示两个指示器，该问题仅在最后一个索引出现：

• 异常状态：
• 期望效果：

尝试的修正代码 #

为解决该问题，尝试过以下偏移量计算逻辑，但未达到预期效果：

double get _offset {
  try {
    var offset = controller.page!;
    if (offset > (count - 2) && offset < (count - 1)) {
      var innerOffset = controller.page!;
      int newOffset = innerOffset.toInt() + 1;
      while (offset < newOffset) {
        innerOffset = innerOffset + 0.0001;
     
        return innerOffset % count;
      }
      return innerOffset % newOffset;
    } else {
      return offset % count;
    }
  } catch (_) {
    return controller.initialPage.toDouble();
  }
}

问题分析与修复方案 #

上述代码存在逻辑缺陷：while循环内直接return导致循环仅执行一次，偏移量计算逻辑混乱，无法正确映射到最后一个索引。以下是两种可靠的修复方式：

方式一：修正偏移量计算逻辑 #

通过设置容错阈值，当页面接近最后一个时，强制将偏移量固定为最后一个索引：

double get _offset {
  try {
    final page = controller.page!;
    // 0.01为容错阈值，避免滚动精度误差导致的误判
    if (page >= count - 1 - 0.01) {
      return (count - 1).toDouble();
    }
    return page % count;
  } catch (_) {
    return controller.initialPage.toDouble();
  }
}

方式二：直接计算当前激活索引 #

跳过复杂的偏移量计算，直接通过page值的整数部分确定激活索引，更简洁可靠：

int get currentIndex {
  try {
    final page = controller.page!;
    // 处理最后一个页面的边界情况
    if (page >= count - 1 - 0.01) {
      return count - 1;
    }
    return page.round();
  } catch (_) {
    return controller.initialPage;
  }
}

在指示器组件中使用currentIndex来标记激活状态，即可避免偏移量精度问题导致的异常。

关键注意事项 #

• PageView的page值为浮点数，滚动过程中存在精度误差，设置小阈值（如0.01）可有效避免边界误判。
• 复杂的模运算和循环容易引入逻辑漏洞，边界场景直接通过条件判断处理更直观可靠。

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