美文网首页
Flutter——PageView的PageController

Flutter——PageView的PageController

作者: 吉哈达 | 来源:发表于2020-07-01 09:44 被阅读0次

    前言

    由于公司需求,对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,这个还是有待研究。 大家有啥想法可以交流一哈。

    相关文章

      网友评论

          本文标题:Flutter——PageView的PageController

          本文链接:https://www.haomeiwen.com/subject/epxcqktx.html