这个手势竞争的问题确实很常见，核心原因是当图片被放大后，滚动手势同时被PageView和InteractiveViewer识别，导致交互异常。我们可以通过动态控制PageView的滚动状态，结合监听InteractiveViewer的缩放变化来解决这个问题，具体方案如下：

步骤1：添加缩放状态监听 #

首先需要通过TransformationController来跟踪图片的缩放状态，当缩放比例大于1时（即图片被放大），禁止PageView响应滚动手势；恢复原大小时，重新允许PageView滚动。

步骤2：修改PageView与InteractiveViewer的布局 #

把Image包裹进InteractiveViewer，并移除多余的Expanded（PageView的item本身会自动占满视口，Expanded反而会导致布局问题）。

完整代码示例 #

class ImagePageView extends StatefulWidget {
  final List<SnapshotItem> snapshotList; // 假设你的数据模型是SnapshotItem
  const ImagePageView({super.key, required this.snapshotList});

  @override
  State<ImagePageView> createState() => _ImagePageViewState();
}

class _ImagePageViewState extends State<ImagePageView> {
  final PageController _pageController = PageController();
  final TransformationController _transformationController = TransformationController();
  late VoidCallback _scaleListener;
  int position = 0;
  bool _isScaled = false; // 标记是否处于缩放状态

  @override
  void initState() {
    super.initState();
    // 添加缩放监听
    _scaleListener = () {
      // 获取当前的最大缩放比例（x/y轴取最大值）
      final currentScale = _transformationController.value.getMaxScaleOnAxis();
      // 加个小阈值，避免初始状态的微小数值变化导致误判
      setState(() {
        _isScaled = currentScale > 1.01;
      });
    };
    _transformationController.addListener(_scaleListener);
  }

  @override
  void dispose() {
    // 记得移除监听器并释放资源
    _transformationController.removeListener(_scaleListener);
    _transformationController.dispose();
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return PageView.builder(
      dragStartBehavior: DragStartBehavior.start,
      // 动态控制PageView是否可滚动
      physics: _isScaled ? const NeverScrollableScrollPhysics() : const ClampingScrollPhysics(),
      controller: _pageController,
      itemBuilder: (context, index) {
        return InteractiveViewer(
          transformationController: _transformationController,
          minScale: 1.0, // 最小缩放比例，保持原大小
          maxScale: 3.0, // 最大缩放比例，可根据需求调整
          panEnabled: true, // 允许缩放后拖动图片
          child: Image.network(widget.snapshotList[index].imgUrl),
        );
      },
      onPageChanged: (index) {
        setState(() {
          position = index;
          // 切换页面时重置缩放状态，保证新页面的图片是原大小
          _transformationController.value = Matrix4.identity();
        });
      },
      itemCount: widget.snapshotList.length,
    );
  }
}

关键说明 #

1. 缩放状态监听：通过TransformationController的监听器，实时获取当前缩放比例，动态更新_isScaled状态，从而控制PageView的滚动物理效果。
2. 手势优先级控制：当_isScaled为true时，PageView使用NeverScrollableScrollPhysics，完全禁止其响应滚动手势，让InteractiveViewer独占手势事件。
3. 页面切换重置：在onPageChanged中重置TransformationController，确保切换到新页面时，图片恢复到原始大小，避免残留缩放状态。

这样就能完美解决两个可滚动组件的手势竞争问题，实现图片缩放查看细节时不会触发页面切换的需求啦！

内容的提问来源于stack exchange，提问作者祝望舒