Flutter 仿抖音效果 (一) 全屏点爱星
创新互联建站专注于庆阳网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供庆阳营销型网站建设，庆阳网站制作、庆阳网页设计、庆阳网站官网定制、成都小程序开发服务，打造庆阳网络公司原创品牌,更为您提供庆阳网站排名全网营销落地服务。
Flutter 仿抖音效果 (二) 界面布局
[Flutter 仿抖音效果 (三) 视频播放列表] ( )
项目地址: 持续效果更新
1.基本的布局是简单的,外层通过Stack作为根
2.左边点赞的控件组通过Align进行统一布局
3.顶部控件组通过Positioned进行布局,设置顶部距离,其实也可以用align,我们多使用几种来习惯flutter的布局
4.底部同样使用Positioned,设置底部距离
5.子页面的左右滑动使用PageView,一开始我们要从推荐开始左滑到关注,可以使用reverse属性,不需要更多额外的操作
1.pageController监听
刷新顶部的下划线时,我们一样使用StreamController刷新,这样效率比setstate高很多
2.歌曲名走马灯效果
这个效果看起来挺麻烦的其实实现起来超级的简单用最普通的ListView就能快速的实现
首页listview里面套入的是最简单的container+text
listview添加一个ScrollController做为滑动的控制
使用一个定时器,把listview滑到最大的位置之后,在滑回去
先通过scroController.position.maxScrollExtent获取最大位置,
然后通过scroController.animateTo进行滑动,因为我设置一次循环的时间是3000毫秒,所以滑过去和滑回来的时间各占一般 new Duration(milliseconds: (time * 0.5).toInt()),还有就是歌名没有大于最大宽度时候其实我们不需要进行滑动,所以判断maxScrollExtent是否大于0来确定是否进行滑动动画
在玩安卓上有款组件化开源app的项目，一款模仿 Eyepetizer | 开眼视频的 开源app,这款app设计风格特别喜欢的，比较简洁，美观，然后最近又在学flutter的知识，于是就写了一款flutter版本的开源短视频，效果也是听不错的，废话不多说，先上效果图。
先附上项目地址：
项目api会在后面的参考链接里，或者直接项目内查看。
项目地址：
更新：6/30 项目新增下拉刷新，上拉加载功能
kotlin版本开眼短视频开发中，敬请期待...
总结：在此感谢参考的伙伴的文章，写的也很好，然后我将这个项目改写成了flutter，当中也学习到了很多flutter相关的知识，后续还有继续巩固，不断学习。
参考链接（包含本项目的api）
项目地址: 持续效果更新
flutter 有个onTapUp 事件,字面意思就是 点击抬起的,会返回 TapUpDetails details ,通过 localPosition 属性就能获取到x,y坐标
计算double 并不复杂,每次点击的时候记录下当前的事件戳,只要两个点击的时间戳和坐标距离小于自己设定的阈值,就可以视为双击事件
实现双击
我们使用OverlayEntry 控件,控件详细介绍
效果一共有 缩小 → 上移 → 放大 → 消失
第一组动画(缩小 上移) → 第二组动画(放大 消失)
flutter 动画需要两个类
AnimationController 负责管理动画
Animation 负责具体值操作
然后通过 Transform.scale 函数的,对scale值进行改变
补全第一组动画
现实
项目地址: 持续效果更新
