第三十一回：GestureDetector Widget

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

概念介绍

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

顺便说一下我们介绍它的原因，上一章回中介绍了ListView响应事件的内容，主要分为滑动事件和点击事件，当时感觉主ListView响应事件比较复杂，因此想找一个比较方便的方法来响应事件，于是找到了GestureDetector Widget.

使用方法

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

• onTap属性:主要用来响应点击事件；
• onDoubleTap属性:主要用来响应双击事件；
• onLongPress属性:主要用来响应长按事件;
• onHorizontalDragStart属性：主要用来响应水平方向的滑动事件；
• onVerticalDragStart属性：主要用来响应垂直方向的滑动事件；
• child属性：各种事件的响应载体。

注意：GestureDetector组件是一个容器类Widget,child属性对应的Wiget才是各种事件的载体。因此该属性是必须属性。

示例代码

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相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!