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方法，代码如下：

  @overrideWidget 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/45632cacheExtent: 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@overrideWidget 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: RawGestureDetectorWidget 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/45632cacheExtent: 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);@overrideRenderObjectElement createElement();@protectedRenderObject createRenderObject(BuildContext context);@protectedvoid updateRenderObject(BuildContext context, covariant RenderObject renderObject) { }@protectedvoid 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快速开发框架