如何阻止PageView.builder滑动超过最大页面

你的问题根源在于未设置itemCount且用index % pages.length实现了无限循环滑动，导致PageView无法感知实际页面总数，自然不会在最后一页限制右滑。只需做以下修改即可实现需求：

修改步骤 #

1. 取消itemCount的注释，将其设置为pages.length，让PageView明确知晓总页数
2. 移除index % pages.length的取模操作，直接返回pages[index]

修改后的完整代码 #

PageView部分 #

child: PageView.builder(
  controller: controller,
  itemCount: pages.length, // 恢复并设置总页数
  itemBuilder: (_, index) {
    return pages[index]; // 直接返回对应索引的页面，无需取模
  },
),

Pages代码（保持不变） #

final pages = List.generate(
    6,
    (index) => Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(16),
            color: Colors.grey.shade300,
          ),
          margin: EdgeInsets.symmetric(horizontal: 10, vertical: 4),
          child: Container(
            height: 280,
            child: Center(
                child: Text(
              "Page $index",
              style: TextStyle(color: Colors.indigo),
            )),
          ),
        ));

Controller代码（保持不变） #

final controller = PageController(viewportFraction: 0.8, keepPage: true);

原理说明 #

当PageView通过itemCount明确总页数后，会自动处理边界滑动限制：

• 处于第一页时，向左滑动被禁用
• 处于最后一页时，向右滑动被禁用
  无需额外编写自定义滑动拦截逻辑，即可实现你需要的效果。

内容的提问来源于stack exchange，提问作者Mr. Tacio