文章目录
- 1 概念介绍
- 2 使用方法
- 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 示例代码
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相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!