使用Flutter仿写TikTok的手势交互

写在前面

Flutter 是 Google推出并开源的移动应用开发框架，主打跨平台、高保真、高性能。开发者可以通过 Dart语言开发 App，一套代码同时运行在 iOS 和 Android平台。

Flutter官网：https://flutter-io.cn

抖音，英文名TikTok，一款火遍全球的短视频App。在玩抖音的日子里，最令我感到舒服的就是抖音的手势交互，加上近期都在进行Flutter方面的学习，因此就产生了使用Flutter来仿写TikTok手势交互的想法。

来看看实现的效果：

Gif：https://giphy.com/gifs/Y0nMQwaOg14vWmwQDz

Github地址：https://github.com/ditclear/tiktok_gestures

demo下载:

GestureDetector以及Transform

既然是手势交互，那么就必然要检测手势，在Flutter中提供了GestureDetector来帮助开发者，并提供了多个回调来处理手势。

Property/Callback	Description
onTapDown	用户每次和屏幕交互时都会被调用
onTapUp	用户停止触摸屏幕时触发
onTap	短暂触摸屏幕时触发
onTapCancel	用户触摸了屏幕，但是没有完成Tap的动作时触发
onDoubleTap	用户在短时间内触摸了屏幕两次
onLongPress	用户触摸屏幕时间超过500ms时触发
onVerticalDragDown	当一个触摸点开始跟屏幕交互，同时在垂直方向上移动时触发
onVerticalDragStart	当触摸点开始在垂直方向上移动时触发
onVerticalDragUpdate	屏幕上的触摸点位置每次改变时，都会触发这个回调
onVerticalDragEnd	当用户停止移动，这个拖拽操作就被认为是完成了，就会触发这个回调
onVerticalDragCancel	用户突然停止拖拽时触发
onHorizontalDragDown	当一个触摸点开始跟屏幕交互，同时在水平方向上移动时触发
onHorizontalDragStart	当触摸点开始在水平方向上移动时触发
onHorizontalDragUpdate	屏幕上的触摸点位置每次改变时，都会触发这个回调
onHorizontalDragEnd	水平拖拽结束时触发
onHorizontalDragCancel	onHorizontalDra