Flutter——PageView的PageController源码分析笔记

前言

由于公司需求,对PageView的PageController的进行了拆解,这里将所记得笔记分享一哈。

PageController

构造函数 简介

PageController继承自ScrollController extends ChangeNotifier(pageController并没有做什么扩展、只是复写了一些方法),由ChangeNotifier可见controller中的属性是可以向外通知的。(具体可见Provider)
构造函数:

  PageController({
    this.initialPage = 0,   //初始显示的页面
    this.keepPage = true,   //是否保持页面
    this.viewportFraction = 1.0, //viewport 系数
  })

viewportFraction是一个系数,决定pageview的page的大小,即(假设是横向):外层容器宽度*viewportFraction。
同时在滚动的位置计算也会用到这个变量,具体后面会见到

PageController 内部结构图

image

createScrollPosition()

其中这个方法会在父类的_updatePosition()中调用,而 _updatePosition()在这里两个生命周期中会调用:

didChangeDependencies(),didUpdateWidget(),

由此可见,createScrollPosition()在页面创建和刷新时是会调用。
它会返回一个 _PagePosition():

return _PagePosition(
      physics: physics,
      context: context,
      initialPage: initialPage,
      keepPage: keepPage,
      viewportFraction: viewportFraction,
      oldPosition: oldPosition,
    )

其中physics,我们没传的话,系统会默认传一个_kPagePhysics(类PageScrollPhysics),另外在使用pageview时,如果我们不传controller,系统也会传一个默认的 _defaultPageController(类PageController)。

接下来我们看一下PageScrollPhysics,(之后再回来看_PagePosition)

PageScrollPhysics 及结构图

image

PageScrollPhysics 继承自ScrollPhysics,用来决定滚动时的物理特性。如果你对pageview、listview等等的滚动效果不满意,就可以从这里入手,定义自己的physics。

它主要有4个方法,分别是:

_getPage(ScrollMetrics position)

_getPixels(ScrollMetrics position, double page)

_getTargetPixels(ScrollMetrics position, Tolerance tolerance, double velocity)

以上三个是用于根据页面取得滚动位置或者根据位置取得页面的,他们三个组合到一起,就可以实现pageview 的一次滚动一个页面、滑动过半自动滚动到下一页的效果。

第4个方法createBallisticSimulation(ScrollMetrics position, double velocity)

该方法会组装一个含有起点和终点的,滑动时带有弹簧阻尼效果的Simulation,并返回。
具体哪里用到,后面会说,这里我们回到_PagePosition

_PagePosition

这里结构比较复杂,较深的类我只贴结构图(内带注释),尽量减少文字。
继承关系(上到下:子到父):
_PagePosition
    ↓
ScrollPositionWithSingleContext implements ScrollActivityDelegate
    ↓
ScrollPosition with ScrollMetrics
    ↓
ViewportOffset
    ↓
ChangeNotifier (可以发现、它的子类是具有向外通知的功能的)

ViewportOffset

image

ScrollPosition

image

ScrollMetrics

image

ScrollPositionWithSingleContext

这个类是pagePosition的直接父类,它实现了接口ScrollActivityDelegate(抽象类。dart实际没有接口的概念),ScrollActivityDelegate定义了几个方法其中常用的是:

void goIdle();  //停止滚动

void goBallistic(double velocity);//弹性滚动

我们就来看一看goBallistic的具体实现吧:

  @override
  void goBallistic(double velocity) {
    assert(pixels != null);
    final Simulation simulation = physics.createBallisticSimulation(this, velocity);
    if (simulation != null) {
      beginActivity(BallisticScrollActivity(this, simulation, context.vsync));
    } else {
      goIdle();
    }
  }

注意这句:physics.createBallisticSimulation(this, velocity); 这里就是调用我们上面说的PageScrollPhysics中的方法createBallisticSimulation,它返回的simulation用于生成一个BallisticScrollActivity会交给beginActivity来处理(没有返回的话就呆住啦~)。

我们先来了解一下ScrollActivity

ScrollActivity

ScrollActivity是个抽象类、内部有一些分发通知的方法和几个变量,如:是否滚动、滚动速度等等。
flutter里,据我所知各种的滚动样式活动(drag、fling等)都是继承自ScrollActivity。如上面的BallisticScrollActivity。对于它的理解我是这样想的:
Simulation是描述一个物理效果、ScrollActivity的子类来展现这个效果,我们看一下他的构造函数就一目了然了:

  BallisticScrollActivity(
    ScrollActivityDelegate delegate,
    Simulation simulation,
    TickerProvider vsync,
  ) : super(delegate) {
    _controller = AnimationController.unbounded(
      debugLabel: kDebugMode ? objectRuntimeType(this, 'BallisticScrollActivity') : null,
      vsync: vsync,
    )
      ..addListener(_tick)
      ..animateWith(simulation)
       .whenComplete(_end); // won't trigger if we dispose _controller first
  }

回到ScrollPositionWithSingleContext

虽然pagePosition 继承自ScrollPositionWithSingleContext,但是pagePosition里的方法并不多、主要是加了这两个方法:

getPageFromPixels(),getPixelsFromPage()

这些方法在PageScrollPhysics中会用到(辅助达到一次一页的效果)。

父类ScrollPositionWithSingleContext内部定义了我们常见animateTo(),jumpTo()等等、对应的会生成一些列scrollActivity的子类用于驱动,如:DrivenScrollActivity\BallisticScrollActivity\IdleScrollActivity

这里再放一下controller的结构图(注意左侧):
image

到这里pagePosition的内部结构就基本解剖完了,同时也回到了最初的controller的createScrollPosition,即整个控制流程的分析就结束了。

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

意外发现

扒源码的时候,我发现官方的scrollcontroller 实际上是支持指定item进行滚动的,我们可以看一下上面scrollPosition的结构图(图内底部),其中有一个方法ensureVisible(),可以滚动到指定的RenderObject,目前我试了一下scrollView等(非回收的)效果完美。但是listview不行(屏幕内可以),应该是由于listview的屏外child(超出缓存)会被回收的原因的,拿不到RenderObject,这个还是有待研究。 大家有啥想法可以交流一哈。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,826评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,968评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,234评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,562评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,611评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,482评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,271评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,166评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,608评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,814评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,926评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,644评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,249评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,866评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,991评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,063评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,871评论 2 354

推荐阅读更多精彩内容