Flutter——PageView源码和Gesture竞技场消歧的浅析

前言

接上回：

pageController源码分析

这次记录一下pageView的拆解过程，其中没有太大关系的变量和方法会被忽略掉，还有一些在pageController 源码分析这篇文章中有介绍过的，我会标注。

PageView

我们先看构造函数：
（它有三个构造函数，我们以PageView为入口）

  PageView({
    Key key,
    this.scrollDirection = Axis.horizontal,
    this.reverse = false,
    PageController controller,
    this.physics,
    this.pageSnapping = true,
    this.onPageChanged,
    List<Widget> children = const <Widget>[],
    this.dragStartBehavior = DragStartBehavior.start,
    this.allowImplicitScrolling = false,
  })

结构图：

其中controller、physics可以参见 pageController源码分析

DragStartBehavior 这个参数需要讲一下。

DragStartBehavior

DragStartBehavior 是一个枚举类，代码如下：

enum DragStartBehavior {
  down,

  start,
}

注释是这样说的：配置传给DragStartDetails的offset（位置）。 DragStartDetails 在一些手势回调、通知里经常可以看到。

经过进一步查找，在monodrag.dart中有这样一段注释:

  /// Configure the behavior of offsets sent to [onStart].
  ///
  /// If set to [DragStartBehavior.start], the [onStart] callback will be called
  /// at the time and position when this gesture recognizer wins the arena. If
  /// [DragStartBehavior.down], [onStart] will be called at the time and
  /// position when a down event was first detected.

大致意思是：
配置"位置"(例如你的手势触发的)传给回调onStart的行为。

如果设置为.start时，当手势识别器在竞技场胜出时才会把对应的位置和时间传给onStart回调。

如果设置为.down，传给onStart的时间和位置是 第一次检测到事件的时候。

例如：

手指按在屏幕上时，位置为（500,500），在赢得竞技场前移动到了（510,500）。
这时我们行为采用DragStartBehavior.down，那么onStart回调收到的offset是（500,500）。
而如果采用的是DragStartBehavior.start，那么onStart回调收到的offset是（510,500）。

手势识别器：如咱们设置在GestureDector中的各种回调：tap,longPress,水平/垂直滑动等等

竞技场又是什么呢？

竞技场&手势消歧

我在注释中有这样一个链接：

https://flutter.dev/docs/development/ui/advanced/gestures#gesture-disambiguation
你可能需要fq，原文如下：

用俺蹩脚的英文翻一哈，有错的还请指正。

释义：

屏幕上某一个位置可能有多个手势识别器。所有这些识别器都监听来自stream所流出的指针事件，并识别它们所需要的手势。具体识别哪些手势，这个由GestureDector 这个widget中不为空的回调来决定。

当用户手指在屏幕上的一个位置触发事件，而同时有多个识别器可以匹配到这个事件时，那么framework disambiguates会让这些事件进入竞技场，胜出的规则如下：

· 任何时候，竞技场上只有一个手势识别器时，那么这个识别器就算胜出。

· 任何时候，因为某一因素导致其中一个识别器胜出，那么剩余的识别器全算输。

举个栗子，在水平和垂直拖动的消歧时，一旦按下事件出现（这里预设水平和垂直识别器都能收到事件），两个识别器都进入竞技场。之后这俩识别器按兵不动，继续观察后续事件（移动），如果用户水平移动了一段距离（逻辑像素），那么水平识别器宣布胜出，后续手势会被看做水平手势（horizontal gesture），垂直同理。

而对于只设置了一个手势识别器，例如水平（垂直）识别器，竞技场依然是非常有效的。假设，当竞技场中只有一个水平识别器，那么当用户第一次接触屏幕时，触摸点的像素会被当做水平拖动来对待，而不用用户后续的操作再去判定。

至此，pageView就讲完了，因为pageview是Statefulwidget，我们接着看它的state

_PageViewState

_PageViewState中的代码很简单，我们直接看build方法，代码如下：

  @override
  Widget build(BuildContext context) {
    final AxisDirection axisDirection = _getDirection(context);
    final ScrollPhysics physics = _ForceImplicitScrollPhysics(
      allowImplicitScrolling: widget.allowImplicitScrolling,
    ).applyTo(widget.pageSnapping
        ? _kPagePhysics.applyTo(widget.physics)
        : widget.physics);

    return NotificationListener<ScrollNotification>(
      onNotification: (ScrollNotification notification) {
        if (notification.depth == 0 && widget.onPageChanged != null && notification is ScrollUpdateNotification) {
          final PageMetrics metrics = notification.metrics as PageMetrics;
          final int currentPage = metrics.page.round();
          if (currentPage != _lastReportedPage) {
            _lastReportedPage = currentPage;
            widget.onPageChanged(currentPage);
          }
        }
        return false;
      },
      child: Scrollable(
        dragStartBehavior: widget.dragStartBehavior,
        axisDirection: axisDirection,
        controller: widget.controller,
        physics: physics,
        viewportBuilder: (BuildContext context, ViewportOffset position) {
          return Viewport(
            // TODO(dnfield): we should provide a way to set cacheExtent
            // independent of implicit scrolling:
            // https://github.com/flutter/flutter/issues/45632
            cacheExtent: widget.allowImplicitScrolling ? 1.0 : 0.0,
            cacheExtentStyle: CacheExtentStyle.viewport,
            axisDirection: axisDirection,
            offset: position,
            slivers: <Widget>[
              SliverFillViewport(
                viewportFraction: widget.controller.viewportFraction,
                delegate: widget.childrenDelegate,
              ),
            ],
          );
        },
      ),
    );
  }

1、final AxisDirection axisDirection = _getDirection(context); 得到方向

2、定义物理效果，这个可以参见Pagecontroller：https://juejin.im/post/5ef99d89f265da22b4256b84

3、构建子widget树，先是外面包了一层NotificationListener，用于根据子widget的滚动来算出当前在多少页(page)。子widget是一个Scrollable

Scrollable

Scrollable创建一个滚动的wiget，参数跟pageview几乎一样，这里不再赘述。其本身是一个statefulWidget，并没有child参数，而是viewportBuilder取而代之，参数也很有意思，一个context和一个position。

我们先看它的state，结构图如下：

setCanDrag(bool)，用于设置是否可以拖动，如果可以的话，就进一步生成识别器（水平/垂直）

_updatePosition()，这个方法看了前一篇文章的应该有印象，具体参见：

PageController源码解析

接下来是build()方法，源码如下：

    // DESCRIPTION
    
  @override
  Widget build(BuildContext context) {
    assert(position != null);
    // _ScrollableScope must be placed above the BuildContext returned by notificationContext
    // so that we can get this ScrollableState by doing the following:
    //
    // ScrollNotification notification;
    // Scrollable.of(notification.context)
    //
    // Since notificationContext is pointing to _gestureDetectorKey.context, _ScrollableScope
    // must be placed above the widget using it: RawGestureDetector
    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),
            ),
          ),
        ),
      ),
    );
    
    //这段不用看
    <!--if (!widget.excludeFromSemantics) {-->
    <!--  result = _ScrollSemantics(-->
    <!--    key: _scrollSemanticsKey,-->
    <!--    child: result,-->
    <!--    position: position,-->
    <!--    allowImplicitScrolling: widget?.physics?.allowImplicitScrolling ?? _physics.allowImplicitScrolling,-->
    <!--    semanticChildCount: widget.semanticChildCount,-->
    <!--  );-->
    <!--}-->

    return _configuration.buildViewportChrome(context, result, widget.axisDirection);
  }

这个build方法上面有一行：

// DESCRIPTION 描述

实际上，这个build方法内，也确实没有构建新的子widget，只是用一些widget来对齐进行包裹,并return一个：

_configuration.buildViewportChrome(context, result, widget.axisDirection);
此方法主要是根据不同系统返回不同的效果。例如：安卓机，滚动到尾部后继续滚动，会出现蓝色的水印

咱们来看_ScrollableScope

_ScrollableScope

其继承inheritWidget，另外多存储一个position，之所以用_ScrollableScope对自己包裹原因是Scollable中的一个静态方法：

  static Future<void> ensureVisible(
    BuildContext context, {
    double alignment = 0.0,
    Duration duration = Duration.zero,
    Curve curve = Curves.ease,
    ScrollPositionAlignmentPolicy alignmentPolicy = ScrollPositionAlignmentPolicy.explicit,
  }) {
    final List<Future<void>> futures = <Future<void>>[];

    ScrollableState scrollable = Scrollable.of(context);
    while (scrollable != null) {
      futures.add(scrollable.position.ensureVisible(
        context.findRenderObject(),
        alignment: alignment,
        duration: duration,
        curve: curve,
        alignmentPolicy: alignmentPolicy,
      ));
      context = scrollable.context;
      scrollable = Scrollable.of(context);
    }

    if (futures.isEmpty || duration == Duration.zero)
      return Future<void>.value();
    if (futures.length == 1)
      return futures.single;
    return Future.wait<void>(futures).then<void>((List<void> _) => null);
  }

可以滚动到指定的context，内部会调用controller.position.ensureVisible 通过这个context，找到对应的renderObject并滚动到该位置。

实际上在所有有滚动组件的页面，你调用这个静态方法，并传入目标item的context
，都可以滚过去。不过一些会回收child的，如listview，你可能就滚沟里去了（报空）。

因为上面的功能设定，所以这个是静态方法。如何拿到context对应的ScrollableState并取得其中的position（好调用它的方法ensureVisible）呢？我们可以通过.of(context)，如下：

  static ScrollableState of(BuildContext context) {
    final _ScrollableScope widget = context.dependOnInheritedWidgetOfExactType<_ScrollableScope>();
    return widget?.scrollable;
  }

为什么要拿position（ScrollPosition），可以参见pageController源码分析

可以看到 context.dependOnInheritedWidgetOfExactType返回了我们想要的，但是前提是，返回的东西必须要继承自InheritedWidget，这也就是为什么我们上面要用_ScrollableScope来进行包裹了。

我们回到 Scrollablestate中的build方法向下看，_ScrollableScope的child就相对简单了，对父widget传过来的的builder用Listener和RawGestureDetector，进行了包裹。

Listener

Listener可以分发事件，结构图如下：

RawGestureDetector

RawGestureDetector则可以帮助child识别指定的手势（参数gestures），而这个手势，是在上面的setCanDrag()方法中生成的。

ScrollableState就分解完了，接下来我们看一下Scrollable的viewportBuilder，也就是上面我们对它包了好几层的东西。

viewportBuilder

这个方法会返回一个ViewPort，按我的理解给它起了个名字叫视窗。

代码如下：

        viewportBuilder: (BuildContext context, ViewportOffset position) {
          return Viewport(
            // TODO(dnfield): we should provide a way to set cacheExtent
            // independent of implicit scrolling:
            // https://github.com/flutter/flutter/issues/45632
            cacheExtent: widget.allowImplicitScrolling ? 1.0 : 0.0,
            cacheExtentStyle: CacheExtentStyle.viewport,
            axisDirection: axisDirection,
            offset: position,
            slivers: <Widget>[
              SliverFillViewport(
                viewportFraction: widget.controller.viewportFraction,
                delegate: widget.childrenDelegate,
              ),
            ],
          );
        },

它的继承关系是如下（上到下，子到父）

viewport
    ↓
MultiChildRenderObjectWidget
    ↓
RenderObjectWidget
    ↓
Widget

这里说一下，我们常用的statelessWidget和statefulWidget也是继承自Widget。
RenderObjectWidget和MultiChildRenderObjectWidget内容过多不在这里展开，有兴趣的可以去查阅相关资料。

简单的介绍一下RenderObjectWidget：我们知道RenderObject是直接用于渲染的和绘制的，而RenderObjectWidget则是这个渲染和绘制的配置信息，同时配置变更需要重新绘制时，会调用updateRenderObject()。
它的源码：

abstract class RenderObjectWidget extends Widget {

  const RenderObjectWidget({ Key key }) : super(key: key);

  @override
  RenderObjectElement createElement();

  @protected
  RenderObject createRenderObject(BuildContext context);

  @protected
  void updateRenderObject(BuildContext context, covariant RenderObject renderObject) { }

  @protected
  void didUnmountRenderObject(covariant RenderObject renderObject) { }
}

它也会创建element，整体看起和状态widget很像，那为什么那么这里的viewPort要用RenderObjectWidget呢？

viewPort开头有这样一句话：

  /// The viewport listens to the [offset], which means you do not need to
/// rebuild this widget when the [offset] changes.

换言之，它只是一个窗户，你之前创建的children（slivers）在窗户外面滚动，你透过窗户来浏览（具体浏览哪个跟上面传进来的position（offset）有关），这个窗户是不会变动的。因此直接使用RenderObjectWidget一步到位更为精简。

viewportBuilder（BuildContext context, ViewportOffset position) 再看这个方法就一目了然

Viewport的另外一个参数slivers：

slivers: <Widget>[
              SliverFillViewport(
                viewportFraction: widget.controller.viewportFraction,
                delegate: widget.childrenDelegate,
              ),
            ],

这里是比较简单的，之所以可以传了一个SliverFillViewport包裹你的children，只是为了保证你的展示效果符合pageView：一个child（sliver）充满一个视窗。

至此我们整个pageview粗略剖析完了

文章比较长，谢谢大家观看。若有错误的地方或者没说明白的，还请指正，感谢。

关联文章

pageController源码分析

其他文章：

Bedrock——基于MVVM+Provider的Flutter快速开发框架

本文地址：https://blog.csdn.net/ljq5945/article/details/107183321