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

时间  2020-07-23
标签 flutter pageview 源码 gesture 竞技场 浅析 繁體版
原文   原文链接

前言

接上回：git

pageController源码分析github

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

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源码分析app

DragStartBehavior 这个参数须要讲一下。less

DragStartBehavior

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

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的行为。post

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

若是设置为.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,
              ),
            ],
          );
        },
      ),
    );
  }
复制代码

一、final AxisDirection axisDirection = _getDirection(context); 获得方向

二、定义物理效果，这个能够参见Pagecontroller：juejin.im/post/5ef99d…

三、构建子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源码分析

俺的过往文章
复制代码

juejin.im/post/5edc91…

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程