【Flutter】小说阅读器改版 (七)—— 翻页动画的准备工作

816 阅读2分钟

「这是我参与11月更文挑战的第19天,活动详情查看:2021最后一次更文挑战」。

前言

前面完成了对翻页动画的手势和效果处理,那么接下来就是将手势效果应用起来;

覆盖翻页和滚动翻页自然不用提,现有的就完全能实现;

需要处理的是仿真翻页,现在虽然能得知ListView的滚动距离等信息;但按照设计,这些仅仅是当作供Item计算使用的数据,具体是由谁来使用这些数据来展示效果,ListView并不做处理;

所以下一步就是提供出能判断是由谁来获取数据并展示动画效果的方法来;

设计

在仿真翻页中,无论是什么样的手势操作,都是最顶层绘制的Item来做动画效果,换句话说,就是第一个可见项,那么提供一个获取第一个可见项的方法即可,对于这块的实现,我有两种想法:

  • 在之前的文中,已经在Item中加入了对手势信息的曝光,那么也可以用同样的方式曝光一下当前可见项;而得知第一个可见项的Widget,自然就是SliverList,只有它知道具体展示内容;用这种方式可以非常精准的得知当前可见项:

  • 不过对于像现在这种Item等宽的情况,有个名为 PageScrollPhysics 的 physics,其中就通过计算的方式存储了page信息;而判断一下page是否是item的index,也可以实现要求的效果;

实现

由于仿真翻页已经在使用PageScrollPhysics,当前也是Item等宽,不存在需要获取各个Item宽度的情况; 所以直接使用方案二最省事;

在PageScrollPhysics中,是这么计算page的:

image.png

虽说目前没有PagePosition,但是用另一块的也能计算出page;

那么根据page信息,结合Item自身的index,就可以在原来的paint方法中做出修改,简单修改的话,比如说这样:

image.png

如果想偷懒的话,也可以把controller 传入,然后直接拿position;

不过我想更合适的方式还是通过InheritedWidget共享出来,就像PrimaryScrollController那样,不过这块不是特别核心的部分,以后再考虑有无必要;

结尾

这次做了一点点的准备工作,接下来就是按照之前的设计,以Offset(position.pixels , 手势的纵坐标)为准,将翻页动画的效果绘制出来即可;