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

文章目录

  • 1. 介绍
  • 2. 使用
    • 2-1. 单击双击和长按
    • 2-2. 拖动和滑动
    • 2-3. 缩放
  • 3. 注意点

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,// 是否从语义中排除此组件,默认为falsebool excludeFromSemantics = false,// 拖动开始时的手势行为,默认为startDragStartBehavior dragStartBehavior = DragStartBehavior.start,// 是否由跟踪板滚动引起缩放,默认为falsebool trackpadScrollCausesScale = false,// 跟踪板滚动到缩放因子的值,默认为kDefaultTrackpadScrollToScaleFactorOffset 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手把手教程

个人主页

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/583838.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

cf918div4的E题讲解

虽然是div4&#xff0c;但是打的稀烂&#xff0c;哭死。 E题看了jiangly的题解豁然开朗&#xff0c;原来思路这么简单。被自己蠢到了&#xff0c;我傻傻的用前缀和&#xff0c;两层for枚举区间&#xff0c;不出意外TLE了&#xff0c;写的那一刻就知道要超时&#xff0c;但是没…

微信小程序全部内嵌H5遇到的问题记录

微信小程序内嵌H5遇到的问题 问题1&#xff1a;js-sdk的配置h5里面微信公众平台 问题2&#xff1a;业务域名的配置小程序开发微信公众平台 问题3&#xff1a;H5与小程序的消息传递。方案1H5 方案2H5页面小程序开发 方案3H5页面小程序页面 使用H5来开发APP&#xff0c;之后将该H…

TG7050CKN,TG7050SKN ,TG7050CMN,TG7050SMN

爱普生推出的温补晶振型号&#xff1a;TG7050CKN&#xff0c;TG7050SKN &#xff0c;TG7050CMN&#xff0c;TG7050SMN频率范围为 10mhz ~ 54mhz 适用于广泛的频率需求。这几款的特点就是耐高温&#xff0c;温度可达105℃高温&#xff0c;而且都是高稳定性温补晶振&#xff0c;&…

Springboot单元测试mock踩坑

mock bean方式 //mock bean方式一MockBeanpublic UserMapper userMapper;//mock bean方式二Beanpublic LogMapper logMapper() {return Mockito.mock(LogMapper.class);} 如何注册mapstruct bean //扫描mapstruct包路径ComponentScan("xxx.xxx.mapstruct")public cl…

ERP与智能商品系统在供应链管理上有哪些区别和优势?

ERP系统和智能商品系统在供应链管理方面有以下区别和优势&#xff1a; 范围和综合性&#xff1a;ERP系统涵盖了企业的整个供应链管理过程&#xff0c;包括供应商管理、采购管理、库存管理、生产计划和物流管理等。它可以实现供应链上下游的信息共享和协同&#xff0c;提高供应…

计算机网络复习2

物理层 文章目录 物理层通讯基础奈奎斯特定理香农定理编码与调制交换传输介质&#xff08;了解&#xff09;物理层设备 通讯基础 数据信号码元信源信道信宿单工通道&#xff1a;只有一个方向半双工通道&#xff1a;不能同时发送和接收全双工通道 奈奎斯特定理 规定&#xff…

c++ map unordered_map 区别

目录 map访问,没有key会获取默认值 std::map 和 std::unordered_map 区别 map访问,没有key会获取默认值 在 C++ 的 std::map 中,如果使用 operator[] 访问一个不存在的键,它会创建一个新的键,并将其关联的值初始化为该值类型的默认值。如果值类型是内置类型(例如 int、…

下载完redis每次启动项目必须打开redis服务,否则不能运行,解决方法

redis-server.exe --service-install redis.windows.conf 在redis的目录启动终端运行此命令可以下载redis服务&#xff0c;然后在服务里面启动redis服务&#xff0c;之后就可以不用打开小黑框再启动了 redis下载地址&#xff1a; Redis下载安装教程_redis 3.2下载-CSDN博客

MFC:如何将JPEG等图片显示到对话框客户区

步骤: 0、打开VS2022创建一个基于对话框的MFC应用&#xff0c;项目名称命名为PicShow&#xff0c;创建完成后将对话框客户区中的"确定"按钮等内容删除&#xff08;具体步骤略&#xff09;。 1、建立菜单栏&#xff1a;文件->打开、退出。具体步骤&#x…

【C++核心编程(一)】

一、内存分区模型 C程序在执行时&#xff0c;将内存大方向划分为4个区域&#xff1a; 代码区&#xff1a;存放函数体的二进制代码&#xff0c;由操作系统进行管理的。 全局区&#xff1a;存放全局变量和静态变量以及常量。 栈区&#xff1a;由编译器自动分配释放,存放函数的…

《Vue2.X 进阶知识点》- 防 ElementUI Divider 分割线

前言 使用 el-divider 背景为白色是没问题的。 但当背景换成其它颜色&#xff0c;问题就出现了&#xff01;&#xff01; 仔细看原来是两层&#xff0c;默认背景色是白色。 想着把背景色改为透明应该能用&#xff0c;结果发现背面是一条实线&#xff0c;难怪要用白色遮挡…不符…

ChatGPT4.0(中文版)国内无限制免费版(附网址)

ChatGPT&#xff0c;由OpenAI开发的人工智能语言模型。它是你的数字对话伙伴&#xff0c;无论你有何问题或需要什么帮助&#xff0c;它都能提供有用的信息。 经过不断的研发和更新&#xff0c;ChatGPT的性能和功能得到了显著提升。现在&#xff0c;我们将重点介绍ChatGPT的两个…

【SpringCache】SpringCache详解及其使用,Redis控制失效时间

一、使用 在 Spring 中&#xff0c;使用缓存通常涉及以下步骤&#xff1a; 1、添加缓存依赖&#xff1a; 确保项目中添加了缓存相关的依赖。如果使用 Maven&#xff0c;可以在项目的 pom.xml 文件中添加 Spring Cache 的依赖。 <dependency><groupId>org.spring…

vue3全网最全教程-----(2)

目录 3.9.【watch】 * 情况一 * 情况二 情况三 * 情况四 情况五 3.10. 【watchEffect】 3.11. 【标签的 ref 属性】 3.12. 【props】 3.13. 【生命周期】 3.14. 【自定义hook】 3.9.【watch】 作用&#xff1a;监视数据的变化&#xff08;和Vue2中的watch作用一致&am…

TVS 管选型与 ESD 防护设计

文章目录 ESD 防护设计 TVS管的基础特性 TVS管的选型方法 TVS管布局细节 参考文献 ESD 防护设计 静电防护设计是让电路板外接的各类金属按钮开关在接触到外界空气放电或接触放电时&#xff0c;在这种瞬间出现的大能量注入到电路板后&#xff0c;能够通过某种设计好的通道泄…

VSCode + vite + vue3断点调试配置

没想到这个配置我搞了一上午&#xff0c;网上很多的配置方案都没有效果。总算搞定了&#xff0c;特此记录一下。 首先需要在.vscode文件夹下面创建launch.json配置文件。然后输入如下配置&#xff1a; {// 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。//…

「Verilog学习笔记」状态机与时钟分频

专栏前言 本专栏的内容主要是记录本人学习Verilog过程中的一些知识点&#xff0c;刷题网站用的是牛客网 状态机写法 timescale 1ns/1nsmodule huawei7(input wire clk ,input wire rst ,output reg clk_out );//*************code***********//parameter S0 0, S1 1 , S2…

批量抠图软件哪个好用?推荐这三款抠图工具给你

在数字图像处理的世界里&#xff0c;抠图是个不可或缺的环节。对于那些经常需要从复杂背景中提取主体的设计师和摄影师来说&#xff0c;抠图技巧无疑是一项宝贵的职业技能。然而&#xff0c;当面对大量的抠图需求时&#xff0c;手动处理不仅耗时&#xff0c;而且效率低下。因此…

Python圣诞树代码

Python圣诞树代码 # 小黄 2023/12/25import turtle as t # as就是取个别名&#xff0c;后续调用的t都是turtle from turtle import * import random as rn 100.0speed(20) # 定义速度 pensize(5) # 画笔宽度 screensize(800, 800, bgblack) # 定义背景颜色&#xff0c;可…

rsync的介绍与使用

rsync的介绍与使用 一、简介 rsync&#xff08;remote synchronize&#xff09;是Liunx/Unix下的一个远程数据同步工具。它能够以非常高效的方式传输和同步文件&#xff0c;它可以将一个目录的文件快速地同步到另一个目录&#xff0c;还可以通过网络快速同步多台主机间的文件…