Flutter-Android开发者文档 - 手势检测及触摸事件

喜欢我的小伙伴，一定要关注我的微信公众号啊！！！谢谢啦
AllAboutCoding

AllAboutCoding

此文章为翻译Flutter官网的Flutter for Android Developers - Gesture detection and touch event handling有兴趣的小伙伴可以移步官网查看。

手势检测及触摸事件处理

在Flutter中如何给Widget添加点击事件监听？

Widget的手势事件如何处理？

使用** GestureDetector**，你可以监听大部分手势，例如：

• 点击
  • onTapDown 指针在屏幕的某个地方接触产生点击
  • onTapUp 指针在屏幕的某个地方触发点击
  • onTap 点击已发生
  • onTapCancel
• 双击
  • onDoubleTap 用户在同一个地方连续点击两下
• 长按
  • onLongPress 指针在同一位置长时间与屏幕接触
• 垂直拖拽
  • onVerticalDragStart 指针已经接触屏幕，并且可能垂直移动。
  • onVerticalDragUpdate 指针已经接触屏幕并且进一步垂直移动。
  • onVerticalDragEnd 指针之前与屏幕接触并在屏幕上垂直移动，停止与屏幕接触时以一个特定的速度。
• 水平拖拽
  • onHorizontalDragStart 指针已经接触屏幕，并且可能水平移动。
  • onHorizontalDragUpdate 指针已经接触屏幕并且进一步水平移动。
  • onHorizontalDragEnd 指针之前与屏幕接触并在屏幕上水平移动，停止与屏幕接触时以一个特定的速度。
    下面的例子展示了使用GestureDetector双击后旋转Flutter Logo：

AnimationController controller;
CurvedAnimation curve;

@override
void initState() {
  controller = new AnimationController(duration: const Duration(milliseconds: 2000), vsync: this);
  curve = new CurvedAnimation(parent: controller, curve: Curves.easeIn);
}

class SampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        body: new Center(
          child: new GestureDetector(
            child: new RotationTransition(
                turns: curve,
                child: new FlutterLogo(
                  size: 200.0,
                )),
            onDoubleTap: () {
              if (controller.isCompleted) {
                controller.reverse();
              } else {
                controller.forward();
              }
            },
        ),
    ));
  }
}