flutter学习-day22-使用GestureDetector识别手势事件

这篇具有很好参考价值的文章主要介绍了flutter学习-day22-使用GestureDetector识别手势事件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1. 介绍

在 flutter 中,GestureDetector 是手势识别的组件,可以识别点击、双击、长按、拖动、缩放等手势事件,并且可以与子组件进行交互,构造函数属性如下:

(new) GestureDetector GestureDetector({
    // 可选的Key属性,用于标识该组件
    Key? key,
    // 可选的子组件,将被包裹在GestureDetector中
    Widget? child,
    // 当用户按下手指时触发的事件处理函数
    void Function(TapDownDetails)? onTapDown,
    // 当用户抬起手指时触发的事件处理函数
    void Function(TapUpDetails)? onTapUp,
    // 当用户轻触屏幕时触发的事件处理函数
    void Function()? onTap,
    // 当用户取消触摸屏幕时触发的事件处理函数
    void Function()? onTapCancel,
    // 当用户轻触屏幕的次级区域时触发的事件处理函数
    void Function()? onSecondaryTap,
    // 当用户按下次级区域的手指时触发的事件处理函数
    void Function(TapDownDetails)? onSecondaryTapDown,
    // 当用户抬起次级区域的手指时触发的事件处理函数
    void Function(TapUpDetails)? onSecondaryTapUp,
    // 当用户取消触摸次级区域的屏幕时触发的事件处理函数
    void Function()? onSecondaryTapCancel,
    // 当用户轻触屏幕的三级区域时触发的事件处理函数
    void Function()? onTertiaryTap,
    // 当用户按下三级区域的手指时触发的事件处理函数
    void Function(TapDownDetails)? onTertiaryTapDown,
    // 当用户抬起三级区域的手指时触发的事件处理函数
    void Function(TapUpDetails)? onTertiaryTapUp,
    // 当用户取消触摸三级区域的屏幕时触发的事件处理函数
    void Function()? onTertiaryTapCancel,
    // 当用户双击屏幕时触发的事件处理函数
    void Function()? onDoubleTap,
    // 当用户双击屏幕时触发的事件处理函数
    void Function()? onDoubleTapCancel,
    // 当用户长按屏幕时触发的事件处理函数
    void Function(LongPressDownDetails)? onLongPressDown,
    // 当用户取消长按屏幕时触发的事件处理函数
    void Function()? onLongPressCancel,
    // 当用户长按屏幕时触发的事件处理函数
    void Function()? onLongPress,
    // 当用户开始长按屏幕时触发的事件处理函数
    void Function(LongPressStartDetails)? onLongPressStart,
    // 当用户移动手指以更新长按位置时触发的事件处理函数
    void Function(LongPressMoveUpdateDetails)? onLongPressMoveUpdate,
    // 当用户抬起手指以结束长按时触发的事件处理函数
    void Function()? onLongPressUp,
    // 当用户结束长按屏幕时触发的事件处理函数
    void Function(LongPressEndDetails)? onLongPressEnd,
    // 当用户长按屏幕的次级区域时触发的事件处理函数
    void Function()? onSecondaryLongPress,
    // 当用户长按屏幕的次级区域时触发的事件处理函数
    void Function()? onSecondaryLongPressCancel,
    // 当用户长按屏幕的次级区域时触发的事件处理函数
    void Function(LongPressStartDetails)? onSecondaryLongPressStart,
    // 当用户移动手指以更新次级长按位置时触发的事件处理函数
    void Function(LongPressMoveUpdateDetails)? onSecondaryLongPressMoveUpdate,
    // 当用户抬起手指以结束次级长按时触发的事件处理函数
    void Function()? onSecondaryLongPressUp,
    // 当用户结束次级长按屏幕时触发的事件处理函数
    void Function(LongPressEndDetails)? onSecondaryLongPressEnd,
    // 当用户长按屏幕的三级区域时触发的事件处理函数
    void Function()? onTertiaryLongPress,
    // 当用户长按屏幕的三级区域时触发的事件处理函数
    void Function()? onTertiaryLongPressCancel,
    // 当用户长按屏幕的三级区域时触发的事件处理函数
    void Function(LongPressStartDetails)? onTertiaryLongPressStart,
    // 当用户移动手指以更新三级长按位置时触发的事件处理函数
    void Function(LongPressMoveUpdateDetails)? onTertiaryLongPressMoveUpdate,
    // 当用户抬起手指以结束三级长按时触发的事件处理函数
    void Function()? onTertiaryLongPressUp,
    // 当用户结束三级长按屏幕时触发的事件处理函数
    void Function(LongPressEndDetails)? onTertiaryLongPressEnd,
    // 当用户垂直拖动屏幕时触发的事件处理函数
    void Function(DragDownDetails)? onVerticalDragDown,
    // 当用户开始垂直拖动屏幕时触发的事件处理函数
    void Function(DragStartDetails)? onVerticalDragStart,
    // 当用户更新垂直拖动位置时触发的事件处理函数
    void Function(DragUpdateDetails)? onVerticalDragUpdate,
    // 当用户结束垂直拖动屏幕时触发的事件处理函数
    void Function(DragEndDetails)? onVerticalDragEnd,
    // 当用户取消垂直拖动屏幕时触发的事件处理函数
    void Function()? onVerticalDragCancel,
    // 当用户水平拖动屏幕时触发的事件处理函数
    void Function(DragDownDetails)? onHorizontalDragDown,
    // 当用户开始水平拖动屏幕时触发的事件处理函数
    void Function(DragStartDetails)? onHorizontalDragStart,
    // 当用户更新水平拖动位置时触发的事件处理函数
    void Function(DragUpdateDetails)? onHorizontalDragUpdate,
    // 当用户结束水平拖动屏幕时触发的事件处理函数
    void Function(DragEndDetails)? onHorizontalDragEnd,
    // 当用户取消水平拖动屏幕时触发的事件处理函数
    void Function()? onHorizontalDragCancel,
    // 当用户开始强制按压屏幕时触发的事件处理函数
    void Function(ForcePressDetails)? onForcePressStart,
    // 当用户达到最大按压力时触发的事件处理函数
    void Function(ForcePressDetails)? onForcePressPeak,
    // 当用户更新按压力度时触发的事件处理函数
    void Function(ForcePressDetails)? onForcePressUpdate,
    // 当用户结束按压屏幕时触发的事件处理函数
    void Function(ForcePressDetails)? onForcePressEnd,
    // 当用户开始平移屏幕时触发的事件处理函数
    void Function(DragDownDetails)? onPanDown,
    // 当用户开始平移屏幕时触发的事件处理函数
    void Function(DragStartDetails)? onPanStart,
    // 当用户更新平移位置时触发的事件处理函数
    void Function(DragUpdateDetails)? onPanUpdate,
    // 当用户结束平移屏幕时触发的事件处理函数
    void Function(DragEndDetails)? onPanEnd,
    // 当用户取消平移屏幕时触发的事件处理函数
    void Function()? onPanCancel,
    // 当用户开始缩放屏幕时触发的事件处理函数
    void Function(ScaleStartDetails)? onScaleStart,
    // 当用户更新缩放比例时触发的事件处理函数
    void Function(ScaleUpdateDetails)? onScaleUpdate,
    // 当用户结束缩放屏幕时触发的事件处理函数
    void Function(ScaleEndDetails)? onScaleEnd,
    // 当用户的指针设备类型被识别时触发的事件处理函数
    HitTestBehavior? behavior,
    // 是否从语义中排除此组件,默认为false
    bool excludeFromSemantics = false,
    // 拖动开始时的手势行为,默认为start
    DragStartBehavior dragStartBehavior = DragStartBehavior.start,
    // 是否由跟踪板滚动引起缩放,默认为false
    bool trackpadScrollCausesScale = false,
    // 跟踪板滚动到缩放因子的值,默认为kDefaultTrackpadScrollToScaleFactor
    Offset trackpadScrollToScaleFactor = kDefaultTrackpadScrollToScaleFactor,
    // 支持的设备类型集合,默认为空集
    Set<PointerDeviceKind>? supportedDevices,
})

2. 使用

GestureDetector 内部封装了 Listener,用以识别语义化的手势。

2-1. 单击双击和长按

当同时监听 onTap 和 onDoubleTap 事件时,当用户触发 tap 事件时,会有 200 毫秒左右的延时,这是因为当用户点击完之后很可能会再次点击以触发双击事件,所以 GestureDetector 会等一段时间来确定是否为双击事件。如果只监听了 onTap(没有监听 onDoubleTap)事件时,则没有延时。

import 'package:flutter/material.dart';

/// 定义
class HomePage extends StatefulWidget {
  const HomePage({super.key});

  
  State<HomePage> createState() => HomePageState();
}

/// 实现
class HomePageState extends State<HomePage> {
  String msg = '';

  
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Home'),
        ),
        body: Center(
          child: GestureDetector(
            child: Container(
              alignment: Alignment.center,
              color: Colors.blue,
              width: 200.0,
              height: 100.0,
              child: Text(
                msg,
                style: const TextStyle(color: Colors.white),
              ),
            ),
            onTap: () {
              setState(() {
                msg = '单击';
              });
            },
            onDoubleTap: () {
              setState(() {
                msg = '双击';
              });
            },
            onLongPress: () {
              msg = '长按';
            },
          ),
        ),
        floatingActionButton: FloatingActionButton(
            onPressed: () async {}, child: const Icon(Icons.palette)));
  }
}

2-2. 拖动和滑动

GestureDetector 对于拖动和滑动事件是没有区分的,他们本质上是一样的。GestureDetector 会将要监听的组件的原点(左上角)作为本次手势的原点,当用户在监听的组件上按下手指时,手势识别就会开始。

import 'package:flutter/material.dart';

/// 定义
class HomePage extends StatefulWidget {
  const HomePage({super.key});

  
  State<HomePage> createState() => HomePageState();
}

/// 实现
class HomePageState extends State<HomePage> {
  double topOffset = 0.0;
  double leftOffset = 0.0;

  
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Home'),
        ),
        body: Stack(
          children: [
            Positioned(
              top: topOffset,
              left: leftOffset,
              child: GestureDetector(
                onPanDown: (DragDownDetails ev) {
                  debugPrint('手指按下');
                },
                onPanUpdate: (DragUpdateDetails ev) {
                  setState(() {
                    topOffset += ev.delta.dy;
                    leftOffset += ev.delta.dx;
                  });
                },
                onPanEnd: (DragEndDetails  ev) {
                  debugPrint('手指拿开');
                },
                child: const CircleAvatar(
                  child: Text('拖'),
                ),
              ),
            )
          ],
        ),
        floatingActionButton: FloatingActionButton(
            onPressed: () async {}, child: const Icon(Icons.palette)));
  }
}

2-3. 缩放

GestureDetector 也可以监听缩放事件,如下例子:

import 'package:flutter/material.dart';

/// 定义
class HomePage extends StatefulWidget {
  const HomePage({super.key});

  
  State<HomePage> createState() => HomePageState();
}

/// 实现
class HomePageState extends State<HomePage> {
  double imgW = 200;

  
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Home'),
        ),
        body: Center(
          child: GestureDetector(
            child: Image.asset('static/portrait.png', width: imgW,),
            onScaleUpdate: (ScaleUpdateDetails details) {
              setState(() {
                imgW = 200 * details.scale.clamp(.8, 10.0);
              });
            },
          ),
        ),
        floatingActionButton: FloatingActionButton(
            onPressed: () async {}, child: const Icon(Icons.palette)));
  }
}

3. 注意点

有时候 GestureDetector 实现点击事件时,点击空白区域不能响应,这是因为子元素没有占满全部内容,此时,需要设置 behavior 属性,它有三个值,如下例子:

属性 说明
deferToChild 只有当前容器中的 child 被点击时才会响应点击事件。
opaque 点击整个区域都会响应点击事件,但是点击事件不可穿透向下传递,注释翻译:阻止视觉上位于其后方的目标接收事件。
translucent 同样是点击整个区域都会响应点击事件,和 opaque 的区别是点击事件是否可以向下传递,注释翻译:半透明目标既可以在其范围内接受事件,也可以允许视觉上位于其后方的目标接收事件。
Column(children: [
  GestureDetector(
    behavior: HitTestBehavior.opaque,
    onTap: () {},
    child: Container(
      width: double.infinity,
      height: 64,
      alignment: Alignment.center,
      child: Text('Delete',
          style: TextStyle(
              color: Color(0xFFFB4056),
              fontSize: 18,
              fontWeight: FontWeight.w600)),
    ),
  )
])

本次分享就到这儿啦,我是鹏多多,如果您看了觉得有帮助,欢迎评论,关注,点赞,转发,我们下次见~

往期文章

  • flutter学习-day1-环境搭建和启动第一个项目
  • flutter学习-day12-可滚动组件和监听
  • Vue2全家桶+Element搭建的PC端在线音乐网站
  • vue3+element-plus配置cdn
  • 助你上手Vue3全家桶之Vue3教程
  • 助你上手Vue3全家桶之VueX4教程
  • 助你上手Vue3全家桶之Vue-Router4教程
  • 超详细!Vue的九种通信方式
  • 超详细!Vuex手把手教程
  • 使用nvm管理node.js版本以及更换npm淘宝镜像源
  • vue中利用.env文件存储全局环境变量,以及配置vue启动和打包命令
  • 超详细!Vue-Router手把手教程

个人主页文章来源地址https://www.toymoban.com/news/detail-770081.html

  • CSDN
  • GitHub
  • 简书
  • 博客园
  • 掘金

到了这里,关于flutter学习-day22-使用GestureDetector识别手势事件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 计算机竞赛 题目:基于深度学习的手势识别实现

    🔥 优质竞赛项目系列,今天要分享的是 基于深度学习的手势识别实现 该项目较为新颖,适合作为竞赛课题方向,学长非常推荐! 🧿 更多资料, 项目分享: https://gitee.com/dancheng-senior/postgraduate 手势识别在深度学习项目是算是比较简单的。这里为了给大家会更好的训练。其中

    2024年02月07日
    浏览(58)
  • 竞赛项目 深度学习手势识别算法实现 - opencv python

    🔥 优质竞赛项目系列,今天要分享的是 🚩 深度学习手势识别算法实现 - opencv python 该项目较为新颖,适合作为竞赛课题方向,学长非常推荐! 🥇学长这里给一个题目综合评分(每项满分5分) 难度系数:3分 工作量:3分 创新点:4分 🧿 更多资料, 项目分享: https://gitee.com/

    2024年02月13日
    浏览(98)
  • AI:83-基于深度学习的手势识别与实时控制

    🚀 本文选自专栏:人工智能领域200例教程专栏 从基础到实践,深入学习。无论你是初学者还是经验丰富的老手,对于本专栏案例和项目实践都有参考学习意义。 ✨✨✨ 每一个案例都附带有在本地跑过的代码,详细讲解供大家学习,希望可以帮到大家。欢迎订阅支持,正在

    2024年04月24日
    浏览(49)
  • 竞赛选题 深度学习手势检测与识别算法 - opencv python

    🔥 优质竞赛项目系列,今天要分享的是 🚩 深度学习图像识别手势检测识别系统 该项目较为新颖,适合作为竞赛课题方向,学长非常推荐! 🥇学长这里给一个题目综合评分(每项满分5分) 难度系数:3分 工作量:3分 创新点:4分 🧿 更多资料, 项目分享: https://gitee.com/danc

    2024年02月05日
    浏览(65)
  • STM32 手势识别传感器模块(PAJ7620)学习

    目录 模块介绍: 基本部分: 引脚配置: 工作原理: 展示部分: 代码部分展示(在正点的基础上加了一个读手势去控制舵机): 视频展示: 基本部分: 手势模块搭载的芯片是PAJ7620,无论是正点原子的还是别的手势模块的底层是一致的,甚至代码也是通用的。 芯片内部集成了

    2024年02月07日
    浏览(41)
  • 毕设项目分享 基于机器视觉opencv的手势检测 手势识别 算法 - 深度学习 卷积神经网络 opencv python

    今天学长向大家介绍一个机器视觉项目 基于机器视觉opencv的手势检测 手势识别 算法 普通机器视觉手势检测的基本流程如下: 其中轮廓的提取,多边形拟合曲线的求法,凸包集和凹陷集的求法都是采用opencv中自带的函数。手势数字的识别是利用凸包点以及凹陷点和手部中心

    2024年02月03日
    浏览(75)
  • 软件工程毕设 基于机器视觉opencv的手势检测 手势识别 算法 - 深度学习 卷积神经网络 opencv python

    今天学长向大家介绍一个机器视觉项目 基于机器视觉opencv的手势检测 手势识别 算法 普通机器视觉手势检测的基本流程如下: 其中轮廓的提取,多边形拟合曲线的求法,凸包集和凹陷集的求法都是采用opencv中自带的函数。手势数字的识别是利用凸包点以及凹陷点和手部中心

    2024年01月17日
    浏览(74)
  • 计算机竞赛 题目:基于机器视觉opencv的手势检测 手势识别 算法 - 深度学习 卷积神经网络 opencv python

    🔥 优质竞赛项目系列,今天要分享的是 基于机器视觉opencv的手势检测 手势识别 算法 该项目较为新颖,适合作为竞赛课题方向,学长非常推荐! 🧿 更多资料, 项目分享: https://gitee.com/dancheng-senior/postgraduate 普通机器视觉手势检测的基本流程如下: 其中轮廓的提取,多边形

    2024年02月07日
    浏览(74)
  • 使用MediaPipe和OpenCV的Python实现手势识别

    手势识别技术是一种非常有用的技术,它可以将人类的手势转化为计算机可以理解的形式,从而实现更加自然、快速和直观的交互方式。本文将介绍一种基于MediaPipe和OpenCV的手势识别技术,可以实现对手势的实时识别和分析。 MediaPipe是一种开源的机器学习框架,可以用于构建

    2024年02月14日
    浏览(45)
  • 计算机毕设 深度学习手势识别 - yolo python opencv cnn 机器视觉

    🔥 这两年开始毕业设计和毕业答辩的要求和难度不断提升,传统的毕设题目缺少创新和亮点,往往达不到毕业答辩的要求,这两年不断有学弟学妹告诉学长自己做的项目系统达不到老师的要求。 为了大家能够顺利以及最少的精力通过毕设,学长分享优质毕业设计项目,今天

    2024年02月14日
    浏览(61)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包