如何禁止PageView向上滚动 仅允许用户向下滑动页面

前置说明 #

你需要先确认你的PageView已配置垂直滚动参数：scrollDirection: Axis.vertical，且原有snap相关配置保持不变。 #

方案1：自定义滚动物理效果（最稳定，不破坏snap特性） #

这是最优解，通过重写PageView的滚动物理规则直接限制滚动方向，完全保留原生snap效果。

1. 先定义自定义滚动物理类：

class OnlyDownScrollPhysics extends PageScrollPhysics {
  const OnlyDownScrollPhysics({ScrollPhysics? parent}) : super(parent: parent);

  @override
  OnlyDownScrollPhysics applyTo(ScrollPhysics? ancestor) {
    return OnlyDownScrollPhysics(parent: buildParent(ancestor));
  }

  @override
  double applyBoundaryConditions(ScrollMetrics position, double value) {
    // 禁止向上滚动：当尝试滚动到比当前位置更小的偏移时，阻止滚动
    if (value < position.pixels) {
      return value - position.pixels;
    }
    // 向下滚动的默认边界逻辑保持不变
    return super.applyBoundaryConditions(position, value);
  }
}

2. 将PageView的physics参数设置为上面定义的类即可：

Scaffold(
  body: PageView(
    scrollDirection: Axis.vertical,
    // 保留你原有snap配置
    pageSnapping: true,
    physics: const OnlyDownScrollPhysics(),
    children: const [
      // 你的页面组件
    ],
  )
)

方案2：NotificationListener监听实现（适合临时修改滚动规则场景） #

如果不想自定义Physics，可以通过监听滚动通知判断方向，向上滚动时拦截：

Scaffold(
  body: NotificationListener<UserScrollNotification>(
    onNotification: (notification) {
      // 滚动方向为向上时拦截事件
      if (notification.direction == ScrollDirection.forward) {
        return true;
      }
      return false;
    },
    child: PageView(
      scrollDirection: Axis.vertical,
      pageSnapping: true,
      children: const [],
    ),
  )
)

注意：该方案在快速滑动时可能出现小概率抖动，优先选择方案1。

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