Flutter：如何在PageViewController控制PageView时应用自定义物理效果？

手指滑动切换PageView页面时，自定义的CustomPageViewScrollPhysics能正常生效，但调用PageViewController的nextPage()或previousPage()方法切换页面时，自定义的弹簧物理效果没起作用。

原因 #

nextPage()和previousPage()方法依赖传入的固定动画曲线（如你代码里的Curves.linear）完成滚动，不会触发ScrollPhysics中的物理模拟逻辑，因此自定义的spring参数无法被应用。

解决方案 #

改用PageViewController.animateTo()方法，结合自定义的SpringSimulation复用你在CustomPageViewScrollPhysics中定义的弹簧参数，实现和手指滑动一致的物理效果。

修改步骤： #

1. 扩展自定义物理类，添加生成弹簧模拟的方法

import 'package:flutter/cupertino.dart';

class CustomPageViewScrollPhysics extends ScrollPhysics {
  const CustomPageViewScrollPhysics({super.parent});

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

  @override
  SpringDescription get spring => const SpringDescription(
        mass: 10,
        stiffness: 200,
        damping: 1,
      );

  // 生成对应弹簧物理的模拟实例
  SpringSimulation createSpringSimulation(double startOffset, double endOffset) {
    return SpringSimulation(
      spring,
      startOffset,
      endOffset,
      0, // 初始滚动速度设为0
    );
  }
}

2. 修改页面切换方法，使用自定义物理模拟

/// 返回上一页
void showPreviousPage() {
  final physics = const CustomPageViewScrollPhysics();
  final currentPage = pageViewController.page!;
  final targetPage = currentPage - 1;
  // 垂直滚动时，目标偏移量 = 页面高度 × 目标页码
  final targetOffset = targetPage * MediaQuery.of(pageViewController.context!).size.height;

  pageViewController.animateTo(
    targetOffset,
    duration: null, // 由物理模拟自动控制时长，无需固定值
    curve: Curves.noAnimation, // 禁用默认曲线，使用自定义模拟
    simulation: physics.createSpringSimulation(
      pageViewController.offset,
      targetOffset,
    ),
  ).then((_) => emit(state.copyWith(
        currentOnBoardingPage: pageViewController.page!.toInt(),
      )));
}

/// 前往下一页
void showNextPage() {
  final physics = const CustomPageViewScrollPhysics();
  final currentPage = pageViewController.page!;
  final targetPage = currentPage + 1;
  final targetOffset = targetPage * MediaQuery.of(pageViewController.context!).size.height;

  pageViewController.animateTo(
    targetOffset,
    duration: null,
    curve: Curves.noAnimation,
    simulation: physics.createSpringSimulation(
      pageViewController.offset,
      targetOffset,
    ),
  ).then((_) => emit(state.copyWith(
        currentOnBoardingPage: pageViewController.page!.toInt(),
      )));
}

可选优化 #

如果不想每次切换都创建CustomPageViewScrollPhysics实例，可以在Cubit中提前持有PageView的physics引用，比如：

// 在Cubit中初始化时保存physics
final pageViewPhysics = const CustomPageViewScrollPhysics();

// 切换方法中直接使用该引用
simulation: pageViewPhysics.createSpringSimulation(...)

修改完成后，调用代码切换页面时就会应用自定义的弹簧物理效果，和手指滑动的表现完全一致。

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