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

你可能感兴趣的:(一起Talk,Flutter吧,flutter,android,GestureDetector,双击事件,长按事件)