当前位置: 首页 > news >正文

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
  • 简书
  • 博客园
  • 掘金

相关文章:

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

文章目录 1. 介绍2. 使用2-1. 单击双击和长按2-2. 拖动和滑动2-3. 缩放 3. 注意点 1. 介绍 在 flutter 中&#xff0c;GestureDetector 是手势识别的组件&#xff0c;可以识别点击、双击、长按、拖动、缩放等手势事件&#xff0c;并且可以与子组件进行交互&#xff0c;构造函数…...

uni-app tabbar组件

锋哥原创的uni-app视频教程&#xff1a; 2023版uniapp从入门到上天视频教程(Java后端无废话版)&#xff0c;火爆更新中..._哔哩哔哩_bilibili2023版uniapp从入门到上天视频教程(Java后端无废话版)&#xff0c;火爆更新中...共计23条视频&#xff0c;包括&#xff1a;第1讲 uni…...

【Midjourney】Midjourney根据prompt提示词生成人物图片

目录 &#x1f347;&#x1f347;Midjourney是什么&#xff1f; &#x1f349;&#x1f349;Midjourney怎么用&#xff1f; &#x1f514;&#x1f514;Midjourney提示词格式 Midjourney生成任务示例 例1——航空客舱与乘客 prompt prompt翻译 生成效果 大图展示 细节大…...

Oracle 拼接字符串

语法 使用||拼接如果内容中有单引号&#xff0c;则可在该单引号前面再加一个单引号进行转义 例子 比如有一个业务是根据需要生成多条插入语句 select insert into des_account_des_role(des_account_id, roles_id) values( || id || , || (select id from des_role where wo…...

探究公有云中的巨人:深入分析大数据产品的架构设计

目录 一、服务器分类 二、公有云基础和产品 网络 vpc专有网络 弹性公网IP(Elastic IP)...

亚马逊云科技 re:Invent 2023 产品体验:亚马逊云科技产品应用实践 王炸产品 Amazon Q,你的 AI 助手

意料之中 2023年9月25日&#xff0c;亚马逊宣布与 Anthropic 正式展开战略合作&#xff0c;结合双方在更安全的生成式 AI 领域的先进技术和专业知识&#xff0c;加速 Anthropic 未来基础模型的开发&#xff0c;并将其广泛提供给亚马逊云科技的客户使用。 亚马逊云科技开发者社…...

并发编程大杀器,京东多线程编排工具asyncTool

一、简介 并发编程大杀器&#xff0c;京东多线程编排工具asyncTool&#xff0c;可以解决任意的多线程并行、串行、阻塞、依赖、回调的并行框架&#xff0c;可以任意组合各线程的执行顺序&#xff0c;带全链路执行结果回调。多线程编排一站式解决方案。 二、特点 多线程编排&am…...

【开源项目】智慧交通~超经典开源项目实景三维数字孪生高速

数字孪生高速运营管理平台&#xff0c;以提升高速公路管理水平和方便出行为主要目标&#xff0c;充分利用云计算、AI、大数据等&#xff0c;实现对高速公路控制、指挥、运营的智能化。飞渡科技以实景三维数据为基础&#xff0c;基于大数据、高分遥感、数据分析以及数据融合等前…...

udp多播/组播那些事

多播与组播 多播&#xff08;multicast&#xff09;和组播&#xff08;groupcast&#xff09;是相同的概念&#xff0c;用于描述在网络中一对多的通信方式。在网络通信中&#xff0c;单播&#xff08;unicast&#xff09;是一对一的通信方式&#xff0c;广播&#xff08;broad…...

C++ Qt开发:SqlRelationalTable关联表组件

Qt 是一个跨平台C图形界面开发库&#xff0c;利用Qt可以快速开发跨平台窗体应用程序&#xff0c;在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置&#xff0c;实现图形化开发极大的方便了开发效率&#xff0c;本章将重点介绍SqlRelationalTable关联表组件的常用方法及灵…...

【LeetCode】修炼之路-0001-Two Sum(两数之和)【python】【简单】

前言 计算机科学作为一门实践性极强的学科,代码能力的培养尤为重要。当前网络上有非常多优秀的前辈分享了LeetCode的最佳算法题解,这对于我们这些初学者来说提供了莫大的帮助,但对于我这种缺乏编程直觉的学习者而言,这往往难以消化吸收。&#xff08;为什么别人就能想出这么优雅…...

秋招复习篇之代码规范

目录 前言 1、变量命名 2、代码空格 1&#xff09;操作符左右一定有空格&#xff0c; 2&#xff09;分隔符&#xff08;, 和;&#xff09;前一位没有空格&#xff0c;后一位保持空格&#xff0c;例如&#xff1a; 3&#xff09;大括号和函数保持同一行&#xff0c;并有一个空格…...

Docker:登录私有仓库\退出私有仓库

一、登录仓库 docker login : 登录到一个Docker镜像仓库&#xff0c;如果未指定镜像仓库地址&#xff0c;默认为官方仓库 Docker Hub 语法: docker login [OPTIONS] [SERVER] docker login -u 用户名 -p 密码 仓库名称 # 登入私有仓库 [rootlocalhost ~]# docker login --…...

与擎创科技共建一体化“数智”运维体系,实现数字化转型

小窗滴滴小编获取最新版公司简介 前言&#xff1a; 哈喽大家好&#xff0c;最近分享的互联网IT热讯大家都挺喜欢&#xff0c;小编看着数据着实开心&#xff0c;感谢大家支持&#xff0c;小编会继续给大家推送。 新岁即将启封&#xff0c;我们一年一期的运维干货年末大讲也要…...

开放网络+私有云=?星融元的私有云承载网络解决方案实例

在全世界范围内的云服务市场上&#xff0c;开放网络一直是一个备受关注的话题。相比于传统供应商的网络设备&#xff0c;开放网络具备软硬件解耦、云原生、可选组件丰富等优势&#xff0c;对云服务商和超大型企业有足够的吸引力。 SONiC作为开源的网络操作系统&#xff0c;使得…...

【Linux学习笔记】Linux下nginx环境搭建

1、下载nginx 安装rpm命令: rpm ivh nginx-release.rpm。(直接使用linux命令下载wget http://nginx.org/packages/rhel/6/noarch/RPMS/nginx-release-rhel-6-0.el6.ngx.noarch.rpm 2、设置nginx开机启动 chkconfig nginx on 3、开启nginx服务 方法一&#xff1a;service nginx…...

Python打包

将 Python 脚本打包成可执行的 .exe 文件,通常可以使用 PyInstaller 这个库来实现。PyInstaller 是一个流行的工具,它可以将 Python 程序和所有相关的依赖打包成一个独立的可执行文件,适用于 Windows、Linux 和 macOS 系统。安装 PyInstaller 首先,需要安装 PyInstaller。…...

2023启示录丨自动驾驶这一年

图片&#xff5c;《老人与海》插图 过去的20年&#xff0c;都没有2023年如此动荡。 大模型犹如一颗原子弹投入科技圈&#xff0c;卷起万里尘沙&#xff0c;传统模式瞬间被夷为平地&#xff0c;在耀眼的白光和巨大的轰鸣声之下&#xff0c;大公司、创业者、投资人甚至是每一位观…...

node实现对git仓库的管理

一、项目背景 一份代码&#xff0c;发布多个小程序。想让技术支持部通过脚本自己获取代码&#xff0c;并通过脚本自动提交到客户的小程序后台。他们自行发布。 现已注册第三方平台&#xff0c;开发人员通过“开发小程序”上传模板。开发人员把代码上传到模板&#xff0c;支持…...

『JavaScript』全面解析JavaScript中的防抖与节流技术及其应用场景

&#x1f4e3;读完这篇文章里你能收获到 理解防抖&#xff08;Debouncing&#xff09;和节流&#xff08;Throttling&#xff09;的概念&#xff1a;了解这两种性能优化技术如何帮助我们更有效地处理频繁触发的事件掌握防抖与节流的实现方法&#xff1a;学习如何在JavaScript中…...

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手&#xff1a;借助大模型技术&#xff0c;开发能根据用户输入的主题、风格等要求&#xff0c;生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用&#xff0c;帮助艺术家和创意爱好者激发创意、提高创作效率。 ​ - 个性化梦境…...

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

边缘计算医疗风险自查APP开发方案

核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型(LLM)的广泛应用,开发者常面临多个挑战: 各大模型(OpenAI、Claude、Gemini、Ollama)接口风格不统一;缺乏一个统一平台进行模型调用与测试;本地模型 Ollama 的集成与前…...

听写流程自动化实践,轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...