阅读 660

Flutter挑战之手势冲突

前言

手势冲突一直是 Flutter 里面一个高频的问题。图片浏览组件，更是该问题的重灾区。 extended_image | Flutter Package (flutter-io.cn) 支持缩放拖拽图片，图片浏览(微信掘金效果)，滑动退出页面(微信掘金效果)，编辑图片(裁剪旋转翻转)，也避免不了手势的问题。

as design ，我是从上一家外企里面学到的词汇。每次有人提到手势冲突的问题，因为懒和认知不足，也都习惯性地回复 as design 。

43F14D9E-F39A-49DF-ADF2-166775E3ACF0.png

但是原生都可以解决，难道 Flutter 就不行吗？当然不是了，只是我们对 Flutter 还不够了解。

image.png

为了跟原生的体验更加接近，需要解决下面的几个问题:

  • 对缩放手势和水平/垂直手势判断不准确
  • 放大状态，缩放手势和水平/垂直手势不能无缝切换
  • PageView 滚动未结束时，无法立刻进行缩放
  • PageView 支持间距

老惯例，先放图，后放代码，小姐姐镇楼。

1632324441882.gif

接着上一期挑战 Flutter挑战之增大点击范围 - 掘金 (juejin.cn)，其实我们已经一窥手势是如何而来的，只是我们还不知道，从引擎传递过来的 raw 的 event 怎么转换成 Tap，onLongPress，Scale 等我们熟悉的事件。

对缩放手势和水平/垂直手势判断不准确

代码准备，我们这里以 Scale 和 HorizontalDrag 为例子( VerticalDrag 也是一样的道理)。

           GestureDetector(
              onScaleStart: (details) {
                print('onScaleStart');
              },
              onScaleUpdate: (details) {
                print('onScaleUpdate');
              },
              onScaleEnd: (details) {
                print('onScaleEnd');
              },
              onHorizontalDragDown: (details) {
                print('onHorizontalDragDown');
              },
              onHorizontalDragStart: (details) {
                print('onHorizontalDragStart');
              },
              onHorizontalDragUpdate: (details) {
                print('onHorizontalDragUpdate');
              },
              onHorizontalDragEnd: (details) {
                print('onHorizontalDragEnd');
              },
              onHorizontalDragCancel: () {
                print('onHorizontalDragCancel');
              },
              child: Container(
                color: Colors.red,
              ),
            ),
复制代码

加入竞技场

HorizontalDragGestureRecognizer 和 ScaleGestureRecognizer 是什么时候加入的竞技场呢？

F687C9AA-6C7A-40CD-B006-7D7DD89FE6A1.png

RawGestureDetectorState._handlePointerDown 为入口，最终加入到GestureBinding.instance!.gestureArena 

  void _handlePointerDown(PointerDownEvent event) {
    assert(_recognizers != null);
    for (final GestureRecognizer recognizer in _recognizers!.values)
      recognizer.addPointer(event);
  }
复制代码

那么我们现在竞技场里面就有2个手势识别器了。

手势获胜

HorizontalDragGestureRecognizer 和 ScaleGestureRecognizer都是继承于 GestureArenaMember，这2个方法比较重要。

abstract class GestureArenaMember {
  /// Called when this member wins the arena for the given pointer id.
  void acceptGesture(int pointer);


  /// Called when this member loses the arena for the given pointer id.
  void rejectGesture(int pointer);
}
复制代码

接下来我们要看看 HorizontalDragGestureRecognizer 和 ScaleGestureRecognizer 胜利的条件是什么？

  • HorizontalDragGestureRecognizer
  if (_hasSufficientGlobalDistanceToAccept(event.kind))
      resolve(GestureDisposition.accepted);

复制代码

  @override
  bool _hasSufficientGlobalDistanceToAccept(PointerDeviceKind pointerDeviceKind) {
    return _globalDistanceMoved.abs() > computeHitSlop(pointerDeviceKind);
  }
复制代码

阈值: 鼠标 1.0，触摸 18.0。

/// Determine the appropriate hit slop pixels based on the [kind] of pointer.
double computeHitSlop(PointerDeviceKind kind) {
  switch (kind) {
      // const double kPrecisePointerHitSlop = 1.0; 
      // 等于 1.0
    case PointerDeviceKind.mouse:
      return kPrecisePointerHitSlop;
    case PointerDeviceKind.stylus:
    case PointerDeviceKind.invertedStylus:
    case PointerDeviceKind.unknown:
    case PointerDeviceKind.touch:
      // const double kTouchSlop = 18.0; // Logical pixels   
      // 等于 18.0
      return kTouchSlop;
  }
}
复制代码
  • ScaleGestureRecognizer
      final double spanDelta = (_currentSpan - _initialSpan).abs();
      final double focalPointDelta = (_currentFocalPoint - _initialFocalPoint).distance;
       // 大于 鼠标 1.0 或者 触摸 18.0
      if (spanDelta > computeScaleSlop(pointerDeviceKind) || 
      // 大于 鼠标 2.0 或者 触摸 36.0
      focalPointDelta > computePanSlop(pointerDeviceKind))
        resolve(GestureDisposition.accepted);
复制代码
  • spanDelta 多指 Scale 的偏移量，阈值: 鼠标 1.0，触摸 18.0。

顺带提下

 spanDelta= (_currentSpan - _initialSpan).abs()；
 double get _scaleFactor =>
      _initialSpan > 0.0 ? _currentSpan / _initialSpan : 1.0;
复制代码
  • focalPointDelta Scale 中心的偏移量，阈值: 鼠标 2.0，触摸 36.0。

/// Determine the appropriate pan slop pixels based on the [kind] of pointer.
double computePanSlop(PointerDeviceKind kind) {
  switch (kind) {
    case PointerDeviceKind.mouse:
      // const double kPrecisePointerPanSlop = kPrecisePointerHitSlop * 2.0; 
      // 等于 2.0
      return kPrecisePointerPanSlop;
    case PointerDeviceKind.stylus:
    case PointerDeviceKind.invertedStylus:
    case PointerDeviceKind.unknown:
    case PointerDeviceKind.touch:
      // const double kPanSlop = kTouchSlop * 2.0; 
      // 等于 36.0
      return kPanSlop;
  }
}

/// Determine the appropriate scale slop pixels based on the [kind] of pointer.
double computeScaleSlop(PointerDeviceKind kind) {
  switch (kind) {
    case PointerDeviceKind.mouse:
     //const double kPrecisePointerScaleSlop = kPrecisePointerHitSlop; 
      // 等于 1.0
      return kPrecisePointerScaleSlop;
    case PointerDeviceKind.stylus:
    case PointerDeviceKind.invertedStylus:
    case PointerDeviceKind.unknown:
    case PointerDeviceKind.touch:
      /// The distance a touch has to travel for the framework to be confident that
      // const double kScaleSlop = kTouchSlop; // Logical pixels   
      // 等于 18
      return kScaleSlop;
  }
}
复制代码

由于 focalPointDelta(Scale) 的阈值为36.0，而 _globalDistanceMoved(HorizontalDrag)的阈值为18.0。如果你双指在水平上的动作 spanDelta(阈值为18.0)增长速度不如水平移动的 _globalDistanceMoved，那么这个动作就会被认定为 HorizontalDrag 。

看完这些判断，你应该很容易就明白了，为啥双指水平 Scale 的时候经常跟 HorizontalDrag 混淆了？ 我打印一下，双指水平 Scale 的时候的日志。

F60E2B94-79B5-4225-B8B1-EDAD00F3B751.png

Flutter: 我不要你觉得我要我觉得

优化手势判断

我们应该把手势获胜的条件更加精细化，双指水平 Scale 的时候必然是多指操作，并且多指的方向必然是相反方向。

HorizontalDragGestureRecognizer 中的判断胜利的方法修改为如下:

  if (_hasSufficientGlobalDistanceToAccept(event.kind) && _shouldAccpet())
          resolve(GestureDisposition.accepted);
复制代码


  bool _shouldAccpet() {
    // 单指获胜
    if (_velocityTrackers.keys.length == 1) {
      return true;
    }

    // 双指判断每个点的运动方法，是否是相反
    // maybe this is a Horizontal/Vertical zoom
    Offset offset = const Offset(1, 1);
    for (final VelocityTracker tracker in _velocityTrackers.values) {
      final Offset delta =
          (tracker as ExtendedVelocityTracker).getSamplesDelta();
      offset = Offset(offset.dx * (delta.dx == 0 ? 1 : delta.dx),
          offset.dy * (delta.dy == 0 ? 1 : delta.dy));
    }

    return !(offset.dx < 0 || offset.dy < 0);
  }
复制代码

修改之后，我们在进行水平 Scale 的时候几乎不会再跟 HorizontalDrag 产生歧义。

手势失败

这里顺带讲下，当竞技场里面有一个手势获胜的时候，就会将竞技场当中的其他的手势设置为失败，失败的手势将停止获取。

如下堆栈信息，当 HorizontalDrag 胜出的时候，竞技场中的其他竞争者 Scale 的 rejectGesture 方法就会被调用，从而停止对 Pointer 的监听。

截屏2021-09-24 下午5.44.18.png

  @override
  void rejectGesture(int pointer) {
    stopTrackingPointer(pointer);
  }
复制代码
  @protected
  void stopTrackingPointer(int pointer) {
    if (_trackedPointers.contains(pointer)) {
      GestureBinding.instance!.pointerRouter.removeRoute(pointer, handleEvent);
      _trackedPointers.remove(pointer);
      if (_trackedPointers.isEmpty)
        didStopTrackingLastPointer(pointer);
    }
  }
复制代码

放大状态，缩放手势和水平/垂直手势不能无缝切换

这个问题，我们其实已经知道，竞技场里面只能有一个选手胜出，竞技场里面有胜出者的时候，后加入的手势也会被直接 rejectGesture 掉。关键代码和堆栈信息如下:

截屏2021-09-26 上午9.33.21.png

  • 我的第一反应是，写一个 GestureRecognizer 里面直接就包括对 Drag 和 Scale 手势的支持。但是考虑到这2种手势的独特性，以及 PageView 中 ScrollPosition 对 DragStartDetails，DragUpdateDetails，DragEndDetails 的依赖，不想再修改更多的源码了，最终未采取这种方式。

  • 取巧，在 Scale 大于 1 的状态下，禁止 HorizontalDragGestureRecognizer 胜出。这种方式就相当灵活了，为 HorizontalDragGestureRecognizer 增加一个回调，来判断是否要让它能胜出。

  bool get canDrag =>
      canHorizontalOrVerticalDrag == null || canHorizontalOrVerticalDrag!();

  bool _shouldAccpet() {
    if (!canDrag) {
      return false;
    }
    if (_velocityTrackers.keys.length == 1) {
      return true;
    }

    // if pointers are not the only, check whether they are in the negative
    // maybe this is a Horizontal/Vertical zoom
    Offset offset = const Offset(1, 1);
    for (final VelocityTracker tracker in _velocityTrackers.values) {
      final Offset delta =
          (tracker as ExtendedVelocityTracker).getSamplesDelta();
      offset = Offset(offset.dx * (delta.dx == 0 ? 1 : delta.dx),
          offset.dy * (delta.dy == 0 ? 1 : delta.dy));
    }

    return !(offset.dx < 0 || offset.dy < 0);
  }
复制代码

这样，在 Scale 大于 1 的状态下，我们就只会触发 Scale 相关的事件。我们只需要在特殊条件下，比如滚动到边界了将要切换上下一页的时候，将下面转换成 Drag 相关即可。

  • ScaleUpdateDetails => DragDownDetails，DragStartDetails, DragUpdateDetails

  • ScaleEndDetails => DragEndDetails

PageView 滚动未结束时，无法立刻进行缩放

场景重现和调试

  1. 在第一页快速滑动
  2. 惯性滑动到第二页(列表未停止)，双指立即 Scale 操作。
  • ExtendedImageGesturePageView 注册的 HorizontalDrag 事件。
  • ExtendedGestureDetector(Image) 注册的 Scale 事件。

我在关键位置打上了 log ， 我们来看看这个过程中到底发生了什么。

  • 第一页的 Image 中的 ExtendedGestureDetector 中获得 hittest ，并且把 ExtendedScaleGestureRecognizer 增加到竞技场中。

I[/flutter]() (20180): _handlePointerDown: ExtendedGestureDetector(startBehavior: start)----{DoubleTapGestureRecognizer: DoubleTapGestureRecognizer#e58e1(debugOwner: ExtendedGestureDetector), ExtendedScaleGestureRecognizer: ExtendedScaleGestureRecognizer#56dd2(debugOwner: ExtendedGestureDetector)}

  • ExtendedImageGesturePageView 中获得 hittest ，并且把 ExtendedHorizontalDragGestureRecognizer 增加到竞技场中。

I[/flutter]() (20180): _handlePointerDown: ExtendedImageGesturePageViewState#7e333(ticker inactive)----{ExtendedHorizontalDragGestureRecognizer: ExtendedHorizontalDragGestureRecognizer#33ed0(debugOwner: ExtendedImageGesturePageViewState#7e333(ticker inactive), start behavior: start)}

  • 开始竞争
I[/flutter]() (20180): ExtendedGestureDetector(startBehavior: start)---_TransformedPointerDownEvent

I[/flutter]() (20180): ExtendedGestureDetector(startBehavior: start)---spanDelta: 0.0 focalPointDelta:0.0 ---多指个数: 1

I[/flutter]() (20180): ExtendedGestureDetector(startBehavior: start)---_TransformedPointerMoveEvent

I[/flutter]() (20180): ExtendedGestureDetector(startBehavior: start)---spanDelta: 0.0 focalPointDelta:0.0 ---多指个数: 1

I[/flutter]() (20180): ExtendedImageGesturePageViewState#7e333(ticker inactive)---_globalDistanceMoved: 0.0 ---多指个数: 1

I[/flutter]() (20180): ExtendedGestureDetector(startBehavior: start)---_TransformedPointerMoveEvent

I[/flutter]() (20180): ExtendedGestureDetector(startBehavior: start)---spanDelta: 0.0 focalPointDelta:5.666666666666686 ---多指个数: 1

I[/flutter]() (20180): ExtendedImageGesturePageViewState#7e333(ticker inactive)---_globalDistanceMoved: -5.666666666666686 ---多指个数: 1

I[/flutter]() (20180): ExtendedGestureDetector(startBehavior: start)---_TransformedPointerMoveEvent

I[/flutter]() (20180): ExtendedGestureDetector(startBehavior: start)---spanDelta: 0.0 focalPointDelta:15.666666666666686 ---多指个数: 1

I[/flutter]() (20180): ExtendedImageGesturePageViewState#7e333(ticker inactive)---_globalDistanceMoved: -15.666666666666686 ---多指个数: 1

I[/flutter]() (20180): ExtendedGestureDetector(startBehavior: start)---_TransformedPointerMoveEvent

I[/flutter]() (20180): ExtendedGestureDetector(startBehavior: start)---spanDelta: 0.0 focalPointDelta:29.683515814524238 ---多指个数: 1

I[/flutter]() (20180): ExtendedImageGesturePageViewState#7e333(ticker inactive)---_globalDistanceMoved: -29.666666666666714 ---多指个数: 1
复制代码
  • Scale 手势输掉

I[/flutter]() (20180): ExtendedGestureDetector(startBehavior: start)---rejectGesture

  • HorizontalDrag 继续

I[/flutter]() (20180): ExtendedImageGesturePageViewState#7e333(ticker inactive)---_globalDistanceMoved: -29.666666666666714 --- 多指个数:1

I[/flutter]() (20180): ExtendedImageGesturePageViewState#7e333(ticker inactive)---_globalDistanceMoved: -29.666666666666714 --- 多指个数:1

  • 滑动到第二页，双指立即做出 Scale 操作。

I[/flutter]() (20180): _handlePointerDown: ExtendedImageGesturePageViewState#7e333(ticker inactive)----{ExtendedHorizontalDragGestureRecognizer: ExtendedHorizontalDragGestureRecognizer#33ed0(debugOwner: ExtendedImageGesturePageViewState#7e333(ticker inactive), start behavior: start)}

ExtendedImageGesturePageView 中获得 hittest ，并且把 ExtendedHorizontalDragGestureRecognizer 增加到竞技场中。

  • 竞技场中只剩下 ExtendedHorizontalDragGestureRecognizer ，直接获胜。

I[/flutter]() (20180): ExtendedImageGesturePageViewState#7e333(ticker inactive)---_globalDistanceMoved: 0.0 --- 多指个数:2

I[/flutter]() (20180): ExtendedImageGesturePageViewState#7e333(ticker inactive)---_globalDistanceMoved: 0.0 --- 多指个数:2

I[/flutter]() (20180): ExtendedImageGesturePageViewState#7e333(ticker inactive)---_globalDistanceMoved: 0.0 --- 多指个数:2

I[/flutter]() (20180): ExtendedImageGesturePageViewState#7e333(ticker inactive)---_globalDistanceMoved: 0.0 --- 多指个数:2

看到这里，我们应该了解到了，这种场景下面，第2页的 Image 中的 ExtendedGestureDetector 中未能获得 hittest。

为了找到真相，我们增加更多的日志

修改代码，打印没有符合的 _size!.contains(position) 元素。

    if (_size!.contains(position)) {
      if (hitTestChildren(result, position: position) ||
          hitTestSelf(position)) {
        result.add(BoxHitTestEntry(this, position));
        return true;
      }
    } else {
      print('hittest is false $debugCreator');
    }
复制代码

注意 debugOwner 是我自己增加进来的。

  @override
  bool hitTest(BoxHitTestResult result, {required Offset position}) {
    bool hitTarget = false;
    if (size.contains(position)) {
      hitTarget =
          hitTestChildren(result, position: position) || hitTestSelf(position);
      if (hitTarget || behavior == HitTestBehavior.translucent) {
        if (debugOwner != null) {
          print('hittest is true $debugOwner');
        }
        result.add(BoxHitTestEntry(this, position));
      } else {
        if (debugOwner != null) {
          print('hittest is false $debugOwner hitTestChildren is not true ');
        }
      }
    } else {
      if (debugOwner != null) {
        print('hittest is false $debugOwner $size not contains $position');
      }
    }
    return hitTarget;
  }
复制代码

日志如下:

I[/flutter]() (25134): ExtendedImageGesturePageViewState#9c964(ticker inactive)---_globalDistanceMoved: -17.0 ---多指个数: 1

I[/flutter]() (25134): ExtendedGestureDetector(startBehavior: start)---_TransformedPointerMoveEvent

I[/flutter]() (25134): ExtendedGestureDetector(startBehavior: start)---spanDelta: 0.0 focalPointDelta:30.066592756745816 ---多指个数: 1

I[/flutter]() (25134): ExtendedImageGesturePageViewState#9c964(ticker inactive)---_globalDistanceMoved: -30.0 ---多指个数: 1

I[/flutter]() (25134): ExtendedGestureDetector(startBehavior: start)---rejectGesture

I[/flutter]() (25134): ExtendedImageGesturePageViewState#9c964(ticker inactive)---_globalDistanceMoved: -30.0 --- 多指个数:1

I[/flutter]() (25134): ExtendedImageGesturePageViewState#9c964(ticker inactive)---_globalDistanceMoved: -30.0 --- 多指个数:1

I[/flutter]() (25134): hittest is true ExtendedImageGesturePageViewState#9c964(ticker inactive)

I[/flutter]() (25134): _handlePointerDown: ExtendedImageGesturePageViewState#9c964(ticker inactive)----{ExtendedHorizontalDragGestureRecognizer: ExtendedHorizontalDragGestureRecognizer#82215(debugOwner: ExtendedImageGesturePageViewState#9c964(ticker inactive), start behavior: start)}

I[/flutter]() (25134): hittest is true ExtendedImageGesturePageViewState#9c964(ticker inactive)

I[/flutter]() (25134): _handlePointerDown: ExtendedImageGesturePageViewState#9c964(ticker inactive)----{ExtendedHorizontalDragGestureRecognizer: ExtendedHorizontalDragGestureRecognizer#82215(debugOwner: ExtendedImageGesturePageViewState#9c964(ticker inactive), start behavior: start)}

I[/flutter]() (25134): ExtendedImageGesturePageViewState#9c964(ticker inactive)---_globalDistanceMoved: 0.0 --- 多指个数:2

I[/flutter]() (25134): ExtendedImageGesturePageViewState#9c964(ticker inactive)---_globalDistanceMoved: 0.0 --- 多指个数:2
复制代码

通过日志我们可以发现：

  • ExtendedImageGesturePageView 的 hittest 是通过。
  • 没有发现 ExtendedGestureDetector 的相关日志，并且连 print('hittest is false $debugCreator'); 都没有打印过。

我的第一反应就是，有东西阻止它参与 hittest 了。我们再思考一下这个场景的一个条件，那就是滚动未停止，是不是这个里面有点门道？

截屏2021-09-26 下午3.07.57.png

其实我在讲解 Sliver 系列的时候已经提过一下 Flutter 重识 NestedScrollView - 掘金 (juejin.cn)，那就是滚动组件 Scrollable 会在滚动开始之后其 child 将不再接受 PointerEvent 事件，看看官方解释。


  /// Whether the contents of the widget should ignore [PointerEvent] inputs.
  ///
  /// Setting this value to true prevents the use from interacting with the
  /// contents of the widget with pointer events. The widget itself is still
  /// interactive.
  ///
  /// For example, if the scroll position is being driven by an animation, it
  /// might be appropriate to set this value to ignore pointer events to
  /// prevent the user from accidentally interacting with the contents of the
  /// widget as it animates. The user will still be able to touch the widget,
  /// potentially stopping the animation.
  void setIgnorePointer(bool value);

复制代码
  • 滚动开始

截屏2021-09-26 下午3.16.03.png

  @override
  @protected
  void setIgnorePointer(bool value) {
    if (_shouldIgnorePointer == value) return;
    _shouldIgnorePointer = value;
    if (_ignorePointerKey.currentContext != null) {
      final RenderIgnorePointer renderBox = _ignorePointerKey.currentContext!
          .findRenderObject()! as RenderIgnorePointer;
      renderBox.ignoring = _shouldIgnorePointer;
    }
  }
复制代码

将 RenderIgnorePointer 的 ignoring 设置为 true，阻止 child 接受 PointerEvent 事件。

    Widget result = _ScrollableScope(
      scrollable: this,
      position: position,
      // TODO(ianh): Having all these global keys is sad.
      child: Listener(
        onPointerSignal: _receivedPointerSignal,
        child: RawGestureDetector(
          key: _gestureDetectorKey,
          gestures: _gestureRecognizers,
          behavior: HitTestBehavior.opaque,
          excludeFromSemantics: widget.excludeFromSemantics,
          child: Semantics(
            explicitChildNodes: !widget.excludeFromSemantics,
            child: IgnorePointer(
              key: _ignorePointerKey,
              ignoring: _shouldIgnorePointer,
              ignoringSemantics: false,
              child: widget.viewportBuilder(context, position),
            ),
          ),
        ),
      ),
    );
复制代码
  • 滚动结束

再将 RenderIgnorePointer 的 ignoring 设置为 false。这就解释了，为啥等列表停止了之后，ExtendedGestureDetector(Image) 又能触发 Scale 事件了。 截屏2021-09-26 下午3.19.20.png

解决问题

试试改源码

首先我们是不大可能去修改 Scrollable 的源码的，涉及的代码太多。我们可以尝试从 ScrollPositionWithSingleContext( ScrollPostion ) 的源码去尝试。从堆栈信息来看，ScrollActivity.shouldIgnorePointer 是关键。而继承 ScrollActivity 的类有以下

截屏2021-09-26 下午3.34.05.png

类名解释shouldIgnorePointer
HoldScrollActivityDragDown 的时候 ScrollPositionWithSingleContext( ScrollPostion ).hold 方法中生成true
DragScrollActivityDragStart 的时候 ScrollPositionWithSingleContext( ScrollPostion ).drag 方法中生成true
DrivenScrollActivityScrollPositionWithSingleContext( ScrollPostion ).animateTo 使用动画滑动使用true
BallisticScrollActivityScrollPositionWithSingleContext( ScrollPostion ).goBallistic 惯性滑动true
IdleScrollActivityScrollPositionWithSingleContext( ScrollPostion ).goIdle 滑动结束false

接下来就是苦力活了，把相关代码复制出来，将上面 4个 ScrollActivity 的 shouldIgnorePointer 设置成 false 即可。(稳妥一点其实 DrivenScrollActivity 我们可以不设置成 false，但是图片浏览组件中，应该很少有人会去做动画效果，所以暂时都统一设置成 false)。

另一条路

说实话，用上一个方式解决问题之后，我还是有一些担忧，毕竟，官方在列表滚动设置 shouldIgnorePointer 为 true 肯定有它的道理(尽管官方只举例了想保护动画不被用户操作终止，但其他情况我们还是未知的)。那么我们有没有其他方式来解决呢？

实际上，我们注意到，ExtendedImageGesturePageView 不管在什么情况下，它都能 hittest 命中，那么我们其实只需要为 ExtendedImageGesturePageView 也注册 Scale 事件，然后传递给 ExtendedGestureDetector(Image) 即可。代码比较简单，感兴趣的可以查看。

github.com/fluttercand…

需要注意的是，如果 Scale 的动作如果比较快，那么就有可能出现同时 Scale 两张图片的情况，毕竟是没法简单的区分出来当前需要 Scale 的图片。

最终我选择增加了一个参数 shouldIgnorePointerWhenScrolling 来控制到底使用哪种方式来处理这个问题。

github.com/fluttercand…

PageView 支持间距

这个其实是参考了原生系统自带相册的功能，发现每个图片之间都会有一定的间隔，PageView 显然不支持这个。

8EC856EC3AD0D744ECCED3CABD0F52CD.jpg

看过 Sliver 系列的应该对于 Sliver 列表绘制的过程比较了解了。这个功能不难，下面提一下主要修改哪些地方。

RenderSliverFillViewport

github.com/flutter/flu…

PageView 的每一页宽度(水平)相当于 viewport 的宽度。( viewportFraction 自行百度)

  @override
  double get itemExtent =>
      constraints.viewportMainAxisExtent * viewportFraction;
复制代码

RenderSliverFixedExtentBoxAdaptor

github.com/flutter/flu…

RenderSliverFixedExtentBoxAdaptor 的 performLayout 方法中，很容易看出来是根据 itemExtent 来计算每个 child 的位置，以及 layout。

    final double itemExtent = this.itemExtent;

    final double scrollOffset = constraints.scrollOffset + constraints.cacheOrigin;
    assert(scrollOffset >= 0.0);
    final double remainingExtent = constraints.remainingCacheExtent;
    assert(remainingExtent >= 0.0);
    final double targetEndScrollOffset = scrollOffset + remainingExtent;

    final BoxConstraints childConstraints = constraints.asBoxConstraints(
      minExtent: itemExtent,
      maxExtent: itemExtent,
    );

    final int firstIndex = getMinChildIndexForScrollOffset(scrollOffset, itemExtent);
    final int? targetLastIndex = targetEndScrollOffset.isFinite ?
        getMaxChildIndexForScrollOffset(targetEndScrollOffset, itemExtent) : null;
复制代码

对于我们这个场景，child layout 的大小还是应该是 itemExtent。只不过计算下一个 child 的时候位置的时候，我们需要增加间距 pageSpacing 。修改之后的代码如下。

    final double itemExtent = this.itemExtent + pageSpacing;
    final double scrollOffset =
        constraints.scrollOffset + constraints.cacheOrigin;
    assert(scrollOffset >= 0.0);
    final double remainingExtent = constraints.remainingCacheExtent;
    assert(remainingExtent >= 0.0);
    final double targetEndScrollOffset = scrollOffset + remainingExtent;

    final BoxConstraints childConstraints = constraints.asBoxConstraints(
      minExtent: this.itemExtent,
      maxExtent: this.itemExtent,
    );
复制代码

光是这样，肯定是不行的，这样会知道最后一页，也会有 pageSpacing，这样就不好看了。

github.com/flutter/flu…

    final int lastIndex = indexOf(lastChild!);
    final double leadingScrollOffset =
        indexToLayoutOffset(itemExtent, firstIndex);
    double trailingScrollOffset =
        indexToLayoutOffset(itemExtent, lastIndex + 1);
复制代码

可以看到，trailingScrollOffset 的位置，是靠计算最后一个元素的下一个元素的开始位置。那么我们这里就可以修改 trailingScrollOffset 来移除掉最后一个元素的 pageSpacing，代码如下。

    final int lastIndex = indexOf(lastChild!);
    final double leadingScrollOffset =
        indexToLayoutOffset(itemExtent, firstIndex);
    double trailingScrollOffset =
        indexToLayoutOffset(itemExtent, lastIndex + 1);

    if (lastIndex > 0) {
      // lastChild don't need pageSpacing
      trailingScrollOffset -= pageSpacing;
    }
复制代码

_PagePosition

上面我们把 ui 绘制的位置给搞定了，但是还没有完成全部的工作。我们在拖动 PageView 的时候，是靠 _PagePosition 中的代码来实现滑动一整页的，直接到核心位置。

github.com/flutter/flu…

  double get _initialPageOffset => math.max(0, viewportDimension * (viewportFraction - 1) / 2);

  double getPageFromPixels(double pixels, double viewportDimension) {
    final double actual = math.max(0.0, pixels - _initialPageOffset) / math.max(1.0, viewportDimension * viewportFraction);
    final double round = actual.roundToDouble();
    if ((actual - round).abs() < precisionErrorTolerance) {
      return round;
    }
    return actual;
  }

  double getPixelsFromPage(double page) {
    return page * viewportDimension * viewportFraction + _initialPageOffset;
  }

  @override
  double? get page {
    assert(
      !hasPixels || (minScrollExtent != null && maxScrollExtent != null),
      'Page value is only available after content dimensions are established.',
    );
    return !hasPixels ? null : getPageFromPixels(pixels.clamp(minScrollExtent, maxScrollExtent), viewportDimension);
  }
复制代码

Page 如何而来？都跟一个叫 viewportDimension 的东西有关系，实际上它就是 viewport 的宽度。那办法就简单了，将 viewportDimension 相关的地方增加上 pageSpacing。一共需要修改 2 个地方，直接上代码。

  // fix viewportDimension
  @override
  double get viewportDimension => super.viewportDimension + pageSpacing;
复制代码
  @override
  bool applyViewportDimension(double viewportDimension) {
    final double? oldViewportDimensions =
        hasViewportDimension ? this.viewportDimension : null;
    // fix viewportDimension
    if (viewportDimension + pageSpacing == oldViewportDimensions) {
      return true;
    }
    final bool result = super.applyViewportDimension(viewportDimension);
    final double? oldPixels = hasPixels ? pixels : null;
    final double page = (oldPixels == null || oldViewportDimensions == 0.0)
        ? _pageToUseOnStartup
        : getPageFromPixels(oldPixels, oldViewportDimensions!);
    final double newPixels = getPixelsFromPage(page);

    if (newPixels != oldPixels) {
      correctPixels(newPixels);
      return false;
    }
    return result;
  }
复制代码

结语

通过这2篇挑战，相信大家对于手势系统方面的问题，应该都有一战之力了，希望能给大家带来帮助。

FlutterChallenges qq 群 321954965 喜欢折腾自己的童鞋欢迎加群，欢迎大家提供新的挑战或者解决挑战 。

爱 Flutter，爱糖果，欢迎加入Flutter Candies，一起生产可爱的Flutter小糖果QQ群:181398081

最最后放上 Flutter Candies 全家桶，真香。

相关阅读

文章分类
前端
文章标签
Flutter
iOS
Android
相关推荐
  • 杭州程序员张张
    22天前
    Flutter
    20个你应该了解的Flutter库
    库是一堆函数的集合，它们以简单的方式帮助大量的编码工作，只需添加到您的代码中即可。 在本文中，我们将讨论20个最有用和最常用的库，许多开发人员都喜欢它们，如果你从事flutter的开发工作，你应该知道
    • 1835
    • 1
    20个你应该了解的Flutter库
  • 恋猫de小郭
    22天前
    Flutter 前端 iOS
    国内大厂应用在移动端 Flutter 框架使用分析
    在去年 6 月份我做过一份关于 《国内大厂在移动端跨平台的框架接入分析》 ，里面主要通过对 Android Apk 的分析统计了各类跨平台框架的使用情况。 时隔一年多，这次将针对 iOS 做一次国内大
    • 8761
    • 67
    国内大厂应用在移动端 Flutter 框架使用分析
  • 恋猫de小郭
    5天前
    Flutter Android 前端
    【译】macOS 上 Flutter Desktop 与 Electron 的性能对比
    本文主要讨论 Flutter 和 Electron 之间的性能差异，通过数据对比 Flutter 和 Electron 之间的优劣。
    • 1319
    • 7
    【译】macOS 上 Flutter Desktop 与 Electron 的性能对比
  • Tecode
    22天前
    Flutter 前端
    Flutter在开发中遇到的问题【满满干货】
    前言 目前使用Flutter开发App已有两年时间，上线了两款App，App store者应用宝搜索脑学家可以下载体验。下面介绍一下我在开发中遇到的坑。
    • 752
    • 7
    Flutter在开发中遇到的问题【满满干货】
  • 岛上码农
    20天前
    Flutter iOS
    Flutter 入门与实战（八十四）：GetX 真的那么香吗？
    GetX 广受欢迎，用了的人几乎都说好，那么它真的像大家说的那么好吗？我们从客观的角度来分析分析 GetX 的缺陷。
    • 1095
    • 16
    Flutter 入门与实战（八十四）：GetX 真的那么香吗？
  • 愚不可及
    7月前
    Flutter
    Flutter For Web 踩坑日记
    前段时间用Flutter For Web撸了一个公司内部使用的项目，本篇文章就把开发过程中碰到的坑点记录一下。 Flutter For Web的开发需要将Flutter SDK升级至任意一个非Stable版本即可，升级完成后需要开启相关配置。 什么都没开启过的同学跟我上图的状态…
    • 957
    • 4
  • 海的原滋味
    3年前
    iOS Android 微信
    撸一款Flutter版『微信』
    Flutter也学了一段时间，这个项目自己是想对于布局这一块做一点的总结和尝试，Flutter的布局和IOS差别很大，作为一个IOS的菜鸟和不懂安卓和web的人可能很长一段时间都是云里雾里，不知道怎么下手。官方的文档有给安卓选手指路的，也有给前端选手指路的，为啥就没有给IOS选…
    • 1.2w
    • 13
  • 单总不会亏待你
    10天前
    Flutter Android
    Flutter开发·Future的理解与使用
    面试官：你是怎么理解Future的？之前在找工作时，被问到过两次这个问题，其实突然冷不丁的被这么一个抽象的问题一问还挺懵的，今天就总结一下自己对Future的理解以及一些用法。
    • 329
    • 5
    Flutter开发·Future的理解与使用
  • 单总不会亏待你
    6天前
    Flutter Android
    Flutter开发·Stream的理解与简单使用
    Stream和Future都是在Flutter中常用来处理异步事件的对象，之前讲了Future的使用，那么Stream你了解多少呢？
    • 143
    • 评论
    Flutter开发·Stream的理解与简单使用
  • 尽管如此世界依然美丽
    11天前
    Flutter 前端
    【flutter】在Win11中开发Linux桌面应用
    恰逢今天重装电脑，给电脑整上了Win11，先前所有的配置都没了，正好来整个 `在Win11中开发Linux桌面应用` 。
    • 869
    • 7
    【flutter】在Win11中开发Linux桌面应用
  • yuxiyu
    3年前
    iOS Android React Native
    基于Flutter的俄罗斯方块小游戏
    基于Flutter的俄罗斯方块小游戏，支持Android与iOS。
    • 4685
    • 16
  • KIMI_LEE的Flutter之旅
    24天前
    Flutter 前端
    Flutter | Log日志显示不全的处理方法
    在使用IDE开发的时候，我们常常会遇到Console打印接口日志不全的情况，下面是几种常用的处理方法 处理方法一 引包导入 处理方法二 自定义方法 处理方法三
    • 91
    • 评论
  • 国孩
    10月前
    Flutter
    Flutter-为什么那么多公司钟爱Flutter
    目录本人会针对Flutter从入门到相对熟练【具备开发水平】，在掘金上开辟一个专栏，专门讲述掌握Flutter的基本过程，每周会定期更新1-2篇博客！Flutter-为什么那么多公司钟爱Flutter
    • 8349
    • 24
  • Jimi
    1月前
    Flutter
    Flutter 手势系列教程---Listener
    Listener介绍 Listener它是主要的功能是用来监听屏幕触摸事件，取决于它的子组件区域范围，比如按下、移动、抬起、取消等操作时可以添加监听。 我们知道Flutter组件只有按钮才会有事件，那
    • 182
    • 评论
    Flutter 手势系列教程---Listener
  • 小呆呆666
    4月前
    Flutter 前端
    【源码篇】Flutter Provider的另一面（万字图文+插件）
    阅读此文的彦祖，亦菲们，附送一枚Provider模板代码生成插件！ 我将尽可能全面且详细的说清楚Provider的刷新机制，末尾将使用Provider刷新机制实现一个状态管理框架！
    • 4246
    • 33
    【源码篇】Flutter Provider的另一面（万字图文+插件）
  • LeoLu
    9月前
    Flutter
    Flutter的滑动冲突 - 右滑父响应，左滑子响应
    滑动模拟器，将用户的交互处理成更接近真实世界的行为，例如，手指快速滑动之后，产生的惯性滑动效果。 获取发生的所有「指针事件」，检测手势类型， 并将其发送到注册的识别器。 当识别为滑动手势，控制器会调用「Drag.update」触发组件更新。同理，手势结束/取消，会调用「Drag…
    • 985
    • 3
  • 闲鱼技术
    3年前
    Flutter iOS Dart
    Flutter Plugin调用Native APIs
    Flutter是Google使用Dart语言开发的一套移动应用开发框架。它不同于其他开发框架： （1）因为Flutter使用AOT预编译代码为机器码，所以它的运行效率更高。 （2）Flutter的UI控件并没有使用底层的原生控件，而是使用Skia渲染引擎绘制而成，因为不依赖…
    • 2973
    • 3
    Flutter Plugin调用Native APIs
  • 张风捷特烈
    23天前
    Android Flutter
    【Flutter 状态管理】第一论： 对状态管理的看法与理解
    前言 由 编程技术交流圣地[-Flutter群-] 发起的 状态管理研究小组，将就 状态管理 相关相关话题进行为期 两个月 的讨论。小组将于两个月后解散，并发布相关讨论成果。 目前只有内定的 5 个人
    • 1208
    • 5
    【Flutter 状态管理】第一论： 对状态管理的看法与理解
  • Neal_yang
    2年前
    前端框架 Flutter
    Flutter 开发者国服最强辅助 App：FlutterGo 2.0 强势归来！！！
    沉淀了数月，FlutterGo 终于迎来了第二次迭代更新！不仅新增个人中心的概念，还提供了第三方共建工具、并且，我们还完成了 FlutterGo web 版的开发。而这些~都在我们FlutterGo官网可见!!! Flutter 依旧在不断地更新，但仅凭我们几个 Flutter…
    • 2.2w
    • 65
    Flutter 开发者国服最强辅助 App：FlutterGo 2.0 强势归来！！！
  • pangyongsheng
    2年前
    CSS JavaScript
    H5实现移动端图片预览：手势缩放， 手势拖动，双击放大...
    自定义手势事件, （双指缩放，滑动，双击。。。） 图片预览即点击图片在页面中插入一个黑色全屏背景框并将图片居中显示。封装时，为了只对指定图片添加功能，可通过监听指定类名或添加某种属性的img标签监听；另外需在对背景框绑定点击事件，退出预览模式。一下是一个简单示例代码：
    • 1.1w
    • 9
    • 关于作者
    您的 Flutter Bug 已创建完毕，请查收 @ FlutterCandies QQ群:181398081
    获得点赞2,962
    文章被阅读305,878
    下载手机APP
    一个帮助开发者成长的社区
    相关文章
    Flutter 可以缩放拖拽的图片
    39
    14
    Flutter Assets 生成工具
    35
    17
    Flutter和iOS手势冲突解决思路
    4
    2
    Flutter Sliver你要的瀑布流小姐姐
    80
    40
    Flutter 仿掘金微信图片滑动退出页面效果
    44
    17