如何实现事件响应功能

文章目录

[1 概念介绍](#1 概念介绍)
[2 使用方法](#2 使用方法)
[3 示例代码](#3 示例代码)

我们在上一章回中介绍了ListView响应事件的内容,本章回中将介绍GestureDetector Widget.闲话休提，让我们一起Talk Flutter吧。

1 概念介绍

我们在这里介绍的GestureDetector是一个事件响应Widget,它可以响应双击事件，长按事件，滑动事件，Flutter中使用GestureDetector类表示该Widget。

本章回中将详细介绍它的用法。顺便说一下我们介绍它的原因，上一章回中介绍了ListView响应事件的内容，主要分为滑动事件和点击事件，当时感觉主ListView响应

事件比较复杂，因此想找一个比较方便的方法来响应事件，于是找到了GestureDetector Widget.

2 使用方法

和其它Widget一样，GestureDetGector提供了相关的属性来响应事件，接下来我们分享一些常用的属性：

onTap属性:主要用来响应点击事件；
onDoubleTap属性:主要用来响应双击事件；
onLongPress属性:主要用来响应长按事件;
onHorizontalDragStart属性：主要用来响应水平方向的滑动事件；
onVerticalDragStart属性：主要用来响应垂直方向的滑动事件；
child属性：各种事件的响应载体。
注意：GestureDetector组件是一个容器类Widget,child属性对应的Wiget才是各种事件的载体。因此该属性是必须属性。

3 示例代码

dart 复制代码

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      backgroundColor: Colors.purpleAccent,
      title: const Text("Example of Gesture"),
    ),
    body: GestureDetector(
      child: Container(
        alignment: Alignment.center,
        color: Colors.greenAccent,
        width: 300,
        height: 300,
        child: const Text("Gesture Test"),
      ),
      onTap: () {
        print("onTap");
      },
      onDoubleTap: () {
        print("onDoubleTap");
      },
      onLongPress: () => print("onLongPress"),
      //向坐标值减小方向的滑动就是Horizon?
      onHorizontalDragStart: (dragDetails) =>
          print("onHorizontalDragStart: ${dragDetails.localPosition}"),
      //向坐标值增加方向的滑动就是Verti?
      onVerticalDragStart: (dragDetails) =>
          print("onVerticalDragStart: ${dragDetails.localPosition}"),
    ),
  );
}

上面的代码中我们给属性进行了赋值操作，操作内容就是打印一行日志。编译运行上面的代码，可以得到一个显示"Gesture Test"的文本，对文件进行双击，长按等

操作，可以输出不同的日志。我在这里就不演示程序运行结果了，建议大家自动动手去实践。

看官们，关于GestureDetector Widget相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!