Flutter中获取PageController.page最终值及解决UI状态异常问题

咱们先把核心问题拆解清楚：

• PageController.page 属性本身就是连续的浮点数值，它反映的是滚动过程中的精确位置，所以滚动时出现0.37、1.58这类带小数的结果是正常行为。直接拿它和整数类型的index对比，自然大部分时候都不匹配，UI也就不会更新。
• 用GestureDetector.onTap直接修改选中状态却丢失滚动位置，是因为你只更新了UI的状态变量，没有同步让PageController滚动到对应的页面位置，导致两者状态脱节了。

解决方案1：获取滚动停止后的整数页面（适合稳定选中场景） #

如果你的需求是滚动停止后，对应页面的按钮高亮，可以在监听里判断滚动状态，只有当滚动停止时，再把currentPageValue设置为整数：

void initState() {
  setUp();
  pageController.addListener(() {
    // 仅当滚动停止时，更新当前页面为整数
    if (!pageController.position.isScrollingNotifier.value) {
      setState(() {
        currentPageValue = pageController.page!.roundToDouble();
      });
    }
    print(currentPageValue);
  });
  super.initState();
}

这样滚动过程中不会频繁更新状态，只有滚动停止后，currentPageValue才会变成1.0、2.0这类整数，和index对比就能正确触发UI变化了。

解决方案2：同步点击按钮与PageController的滚动状态 #

针对点击按钮丢失滚动位置的问题，你需要在onTap里不仅更新currentPageValue，还要让PageController滚动到对应的页面，保证两者状态一致：

GestureDetector(
  onTap: () {
    setState(() {
      currentPageValue = index.toDouble();
    });
    // 同步滚动到对应页面，可选瞬间跳转或带动画跳转
    pageController.jumpToPage(index);
    // 带动画的写法：
    // pageController.animateToPage(
    //   index,
    //   duration: Duration(milliseconds: 300),
    //   curve: Curves.ease,
    // );
  },
  child: Container(
    // 根据currentPageValue和index对比设置背景色/边框色
    decoration: BoxDecoration(
      color: currentPageValue == index.toDouble() ? Colors.blue : Colors.grey,
      border: Border.all(
        color: currentPageValue == index.toDouble() ? Colors.blueAccent : Colors.grey[300]!,
      ),
    ),
    child: Text("按钮 $index"),
  ),
)

额外优化：用PageView替代ListView（如果场景匹配） #

如果你的布局是类似横向分页的结构，更推荐用PageView组件，它本身和PageController深度绑定，自带onPageChanged回调可以直接拿到整数类型的页面索引，不用自己处理滚动监听：

PageView(
  controller: pageController,
  onPageChanged: (int index) {
    setState(() {
      currentPageValue = index.toDouble();
    });
  },
  children: [
    // 你的页面内容
  ],
)

这样代码会更简洁，也不容易出现状态不一致的问题。

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