【Flutter】小说阅读器改版 (四)—— 让ScrollActivity追踪手势最新位置

1,605 阅读2分钟

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

前言

在上一篇中,实现了让Item先自动定位到手势按下的位置,不过还有一个问题:

如果动画没结束前就移动手势,动画并不会追踪手势最新位置,如图所示:

修改前.gif

现在就来处理下这个问题:

分析

  • 出现这个问题的原因,就是动画并未根据最新手势信息做判断;所以如果想要根据最新手势信息做判断,首先要做的就是传入最新手势;

  • 传入了手势信息,还要能根据手势信息,终止或延长动画;

拓展一下,上面两点所要求的内容,总结一下就是:

  • 对animteTo方法进行修改,使其不再一直重建AnimationController,并在不影响动画播放的前提下,传入最新的手势信息;

  • 对于先按下左边,然后往右滑动的手势,应该延长动画,直到追踪到手指位置;

  • 对于先按下右边,然后往左滑动的手势,应该在遇到手指位置的时候,提前终止动画;

方案

  • 首先,传入手势信息这块,说白了就是activity正在运行的时候,就仅仅更新终点位置即可,简单处理快速验证的话,可以这么做:

    先新建一个方法用于更新目标位置:

    image.png

    然后animateTo方法判断一下当前Activity,是自定义的新Activity,就调用更新方法:

    image.png

  • 对于手势信息的处理这块,我偷懒处理了下:

    其实没必要分别实现上面提到的两种情况,对于这种全屏Item等宽的情况,手势的操作最大距离不会超过Item宽度,所以,可以将重点位置再增加个Item宽度,或者说是屏幕宽度,这样只会存在一种情况,判断 AnimationCroller的 value 是否小于等于目标值,是的话,那么就终止动画,将目标值传入即可;

    首先更改构造器中创建的AnimationController: image.png

    然后修改tick方法,在小于的时候终止动画返回; image.png

结尾

现在看下效果,好像没啥太大问题了:

修改后.gif

虽说现在通过实现一个新的ScrollActivity的方式来勉强实现了效果;但是细想一下,其实对Drag事件并为做出什么处理;或者说,现在手势操作,其实是启动了DragActivity和自定义的Activity,让它俩一起运行;

光看UI效果的话,好像没什么冲突,但是从代码层面,应该是一直在冲突的……这块的问题需要解决下