android 探探左右滑动效果,用Flutter实现一个仿“探探”的左右滑动选择喜欢/不喜欢的效果...

这篇博客详细介绍了在Flutter中实现用户手势监听的Widget,通过平移和旋转动画创建流畅的交互效果。博主探讨了手势到达屏幕边缘时的动画流畅性问题,以及数据刷新的API设计。同时,提出了利用setState刷新布局可能存在的性能问题,并提出了无限刷新的数据展示策略。此外,还实现了底部图标随着手势的放大和颜色变化动画。文章最后感谢了社区的帮助,解决了布局移出后的处理方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

写在前面,效果已经基本OK了,但是有些细节还没处理好。暂时主要有三个问题:

用户手势到达屏幕边缘时释放,如果旋转角度过小,动画总感觉有些不流畅(也可能是我的错觉吧);

给数据刷新提供的API还没想好,现在塞数据比较麻烦;

因为UI设计是根据用户手势移动布局位置的,因此用户每次手势位置改变,都需要刷新布局,现在是用setState的方式去刷新的,不清楚在布局复杂的情况下是否会有性能问题。

支持无限刷新。

效果图:

dffe6fe0cd0642fdc0192d8eb7969373.gif

整体思路

上层是一个支持用户手势监听的Widget,随着用户的手势进行平移+旋转变换;下层Widget虽然不支持手势监听,但是会接收上层布局的动画进度回调,进行放大,因此看起来也是跟随着手势的:d88360dfb55821247fe9547fb1b718f7.png

下层Widget在上层布局移出屏幕时,会缩小至原大小,缩小动画结束时,上下Widget的大小是一致的,因此此时直接将屏幕外的上层布局瞬间移回,用户在视觉上并不会察觉。此时的上层布局就是一个假的“第二层”,而原来的下层布局就变成了假的“第三层”,如此反复,形成了无限循环。

8691ec642b219064c5a35414c49290b3.png

ded15f8bb1848918790f09810503641a.png

要注意,因为有旋转动画的存在,上层布局的实际移动距离应该比控件左上角至屏幕右边缘的距离(右滑时)更大一些,具体为图中黑色标记的距离。但是,我并没有算的这么精确,实际移动距离选择了一个比较靠近的值(因为我觉得,问题不大~)。

什么时候刷新数据

默认上层布局展示第1条数据,下层布局展示第2条数据;在上层布局移出屏幕时,就可以刷新上层布局,展示第2条数据了,对应的回调监听为onSlideCompleted;在下层布局缩小动画完成,上层布局瞬间移回原位置后,下层布局刷新数据,展示第3条数据,对应的回调监听为refreshBelow。

底部喜欢/不喜欢图标的动画实现

跟下层布局一样,也是接收上层布局动画的进度值,来实现随着用户手势而放大+改变颜色的效果。放大至峰值后,再自行进行一个缩小动画,缩小至原大小。

上层监听用户手势的Widget,修改自之前写QQ侧滑菜单时的侧滑控件:Flutter:手把手教你实现一个仿QQ侧滑菜单的功能,怎么监听用户的手势在那篇文章里写的很清楚,就不赘述了。

最后,感谢 Q群:Flutter中文用户组 中各位大佬对我的思路提点,给我提供了将上层布局直接移回,制作一个假的布局的方案,解决了困扰我很久的上层布局移出后该放在哪里的问题。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值