Flutter笔记:缩放手势

Flutter笔记
缩放手势

作者李俊才 (jcLee95):https://blog.csdn.net/qq_28550263
邮箱 :291148484@163.com
本文地址:https://blog.csdn.net/qq_28550263/article/details/134485138



1. 概述

Flutter 中,缩放手势是一种常见的交互方式,它允许用户通过双指触摸屏幕来改变 UI 元素的大小。这种手势常用于查看图片、地图等场景中。本文接下来将先后介绍如何使用 GestureDetector 和更底层的 ScaleGestureRecognizer 各自实现缩放的代码如何写。

2. 缩放手势的识别和处理

在 Flutter 中,缩放手势的识别和处理主要依赖于 GestureDetector 组件。这个组件可以识别各种手势,包括缩放手势。

2.1 GestureDetector 组件

GestureDetector 组件有多个属性用于处理缩放,主要包括:

属性描述
onScaleStart当缩放手势开始时调用
onScaleUpdate当缩放手势更新时调用
onScaleEnd当缩放手势结束时调用

例如:

import 'package:flutter/material.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});Widget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: const Text('GestureDetector Example'),),body: const Center(child: MyScale(),),),);}
}class MyScale extends StatefulWidget {const MyScale({super.key});State<MyScale> createState() => _MyScaleState();
}class _MyScaleState extends State<MyScale> {double _scale = 1.0;Widget build(BuildContext context) {return GestureDetector(onScaleStart: (ScaleStartDetails details) {print('缩放开始');},onScaleUpdate: (ScaleUpdateDetails details) {setState(() {_scale = details.scale;});print('缩放更新,当前缩放值:$_scale');},onScaleEnd: (ScaleEndDetails details) {print('缩放结束');},child: Transform.scale(scale: _scale,child: const FlutterLogo(size: 200),),);}
}

上面的代码中,我们使用 GestureDetector 组件来识别缩放手势,并在 onScaleUpdate 回调函数中更新 _scale 变量的值。然后,我们使用 Transform.scale 组件来根据 _scale 的值来改变 Flutter Logo 的大小。其效果如下:

在这里插入图片描述

2.2 RawGestureDetector 和

RawGestureDetector 组件

使用 RawGestureDetectorScaleGestureRecognizer 也可以实现缩放手势。在大多数情况下,GestureDetector 组件已经足够用于处理缩放手势。然而,在一些的场景中我们可能需要更多的控制,这时就可以使用 ScaleGestureRecognizer 类。

const RawGestureDetector({Key? key,this.child,this.gestures = const <Type, GestureRecognizerFactory>{},this.behavior,this.excludeFromSemantics = false,this.semantics,
}) : super(key: key);

ScaleGestureRecognizer 类

ScaleGestureRecognizer 继承自 GestureRecognizer 类,是更底层的手势识别器,用于识别缩放手势。

ScaleGestureRecognizer 跟踪与屏幕接触的指针,并计算它们的焦点、指示的缩放级别和旋转。当建立一个焦点时,识别器会调用 onStart回调函数。随着焦点、缩放和旋转的变化,识别器会调用 onUpdate回调函数。当指针不再与屏幕接触时,识别器会调用 onEnd回调函数。

以下是 ScaleGestureRecognizer 的一些重要属性和方法:

  • onStart:当与屏幕接触的指针建立了焦点和初始缩放级别为1.0时调用。
  • onUpdate:当与屏幕接触的指针指示了新的焦点和/或缩放时调用。
  • onEnd:当指针不再与屏幕接触时调用。
  • addPointer:注册可能与此手势检测器相关的新指针。
  • addAllowedPointer:注册已经被此手势识别器允许的新指针。
  • dispose:释放由对象使用的任何资源。

ScaleGestureRecognizer 类的造函数如下:

ScaleGestureRecognizer({Object? debugOwner, // 用于在调试打印中识别手势识别器的对象。PointerDeviceKind? kind, // 此手势识别器应该处理的设备类型this.dragStartBehavior = DragStartBehavior.start, // 确定在所有涉及此手势的计算中,用作起点的点
})

其中:

  • kind:此手势识别器应该处理的设备类型。例如,如果 kind 设置为 PointerDeviceKind.mouse,那么这个手势识别器只会识别鼠标的手势。
  • dragStartBehavior:确定在所有涉及此手势的计算中,用作起点的点。默认值为 DragStartBehavior.start。

案例

下面是一个使用 RawGestureDetectorScaleGestureRecognizer 来识别和处理缩放和拖动手势的示例:

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);Widget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: const Text('GestureDetector Example'),),body: const Center(child: MyWidget(),),),);}
}class MyWidget extends StatefulWidget {const MyWidget({Key? key}) : super(key: key);State<MyWidget> createState() => _MyWidgetState();
}class _MyWidgetState extends State<MyWidget> {final _scaleRecognizer = ScaleGestureRecognizer();double _scale = 1.0;Offset _panOffset = Offset.zero;void initState() {super.initState();_scaleRecognizer..onStart = _handleScaleStart..onUpdate = _handleScaleUpdate..onEnd = _handleScaleEnd;}void dispose() {_scaleRecognizer.dispose();super.dispose();}Widget build(BuildContext context) {return RawGestureDetector(gestures: {ScaleGestureRecognizer:GestureRecognizerFactoryWithHandlers<ScaleGestureRecognizer>(() => _scaleRecognizer,(ScaleGestureRecognizer instance) {},),},child: Transform.scale(scale: _scale,child: Transform.translate(offset: _panOffset,child: const FlutterLogo(size: 200),),),);}void _handleScaleStart(ScaleStartDetails details) {print('缩放开始');}void _handleScaleUpdate(ScaleUpdateDetails details) {setState(() {_scale = details.scale;_panOffset = details.localFocalPoint;});print('缩放更新,当前缩放值:$_scale');print('拖动更新,当前偏移值:$_panOffset');}void _handleScaleEnd(ScaleEndDetails details) {print('缩放结束');}
}

在这里插入图片描述

需要注意的是,使用 RawGestureDetector 比使用 GestureDetector 组件更复杂,需要手动管理手势的生命周期,包括创建、更新和释放手势。因此,除非你需要处理复杂的手势,否则通常推荐使用 GestureDetector 组件。

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

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

相关文章

FlinkCDC数据实时同步Mysql到ES

考大家一个问题&#xff0c;如果想要把数据库的数据同步到别的地方,比如es,mongodb,大家会采用哪些方案呢&#xff1f; ::: 定时扫描同步&#xff1f; 实时日志同步? 定时同步是一个很好的方案&#xff0c;比较简单&#xff0c;但是如果对实时要求比较高的话&#xff0c;定…

【开源】基于Vue.js的智能教学资源库系统

项目编号&#xff1a; S 050 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S050&#xff0c;文末获取源码。} 项目编号&#xff1a;S050&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 课程档案模块2.3 课…

git常用的命令

以下是一些常用的 Git 命令&#xff1a; 1. git init: 初始化一个新的 Git 仓库。 2. git clone <repo>: 克隆一个远程仓库到本地。 3. git add <file>: 将文件添加到暂存区。 4. git commit -m "<message>": 提交暂存区的文件到本地仓库&…

quinn源码解析:QUIC数据包是如何发送的

quinn源码解析&#xff1a;QUIC数据包是如何发送的 简介QUIC协议中的概念endpoint&#xff08;端点&#xff09;connection&#xff08;连接&#xff09;Stream&#xff08;流&#xff09;Frame (帧) 发包过程解析SendStream::write_allConnectionDriverEndpointDriver 简介 q…

R语言和RStudio的下载安装(非常简便舒适)

目录 R语言和RStudio的关系R语言和Tableau下载R语言进入官网选择清华镜像源Download R for Windows选择base版本开始下载进行安装配置环境变量检查是否安装成功 下载RStudio进入官网点击下载进行安装检查是否安装成功打开选择R语言环境成功打开显示四个工作区 R语言和RStudio的…

【预处理详解】

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 1. 预定义符号 2. #define定义常量 3. #define定义宏 4. 带有副作用的宏参数 5. 宏替换的规则 6. 宏函数的对比 7. #和## 7.1 #运算符 7.2 ## 运算符 8. 命名约定 …

英语六级做题经验总结

以下是个人在六级做题过程中总结的经验&#xff0c;如大佬们有更好的意见&#xff0c;欢迎评论区补充~ 注&#xff1a;题序即本人做题顺序&#xff1a; 1.写作&#xff08;占总分的15%&#xff09; 对于写作的时间应该把握在25分钟以内&#xff0c;因为需要留5分钟左右看听力…

【算法】石子合并(区间dp)

题目 设有 N 堆石子排成一排&#xff0c;其编号为 1,2,3,…,N。 每堆石子有一定的质量&#xff0c;可以用一个整数来描述&#xff0c;现在要将这 N 堆石子合并成为一堆。 每次只能合并相邻的两堆&#xff0c;合并的代价为这两堆石子的质量之和&#xff0c;合并后与这两堆石子…

你知道什么是SaaS吗?

你知道什么是SaaS吗&#xff1f; 云服务架构的三个概念 PaaS 英文就是 Platform-as-a-Service&#xff08;平台即服务&#xff09;PaaS&#xff0c;某些时候也叫做中间件。就是把客户采用提供的开发语言和工具&#xff08;例如Java&#xff0c;python, .Net等&#xff09;开…

计算两个向量的叉积numpy.cross()

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 计算两个向量的叉积 numpy.cross() [太阳]选择题 请问代码中最后输出正确的是&#xff1f; import numpy as np a np.array([1, 2, 3]) b np.array([4, 5, 6]) c np.cross(a, b) pri…

nrm的安装以及使用

1&#xff0c;什么是nrm nrm 是一个 npm 源管理器&#xff0c;允许你快速地在 npm源间切换。 什么意思呢&#xff0c;npm默认情况下是使用npm官方源&#xff08;使用npm config ls命令可以查看&#xff09;&#xff0c;在国内用这个源肯定是不靠谱的&#xff0c;一般我们都会…

云原生专栏丨基于服务网格的企业级灰度发布技术

灰度发布&#xff08;又名金丝雀发布&#xff09;是指在黑与白之间&#xff0c;能够平滑过渡的一种发布方式。在其上可以进行A/B testing&#xff0c;即让一部分用户继续用产品特性A&#xff0c;一部分用户开始用产品特性B&#xff0c;如果用户对B没有什么反对意见&#xff0c;…

ssm+vue的高校疫情防控管理系统(有报告)。Javaee项目,ssm vue前后端分离项目。

演示视频&#xff1a; ssmvue的高校疫情防控管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;ssm vue前后端分离项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结…

项目自动化构建工具——make/Makefile

目录 一、概念 二、使用实例 三、原理 四、进度条程序 1、缓冲区问题 1、概念 2、\r和\n 2、代码编写 一、概念 一个工程中的源文件不计数&#xff0c;其按类型、功能、模块分别放在若干个目录中&#xff0c;makefile定义了一系列的规则来指定&#xff0c;哪些文件需要先…

Open AI开发者大会:AI“科技春晚”

ChatGPT的亮相即将满一年之时&#xff0c;OpenAI举行了自己的首次开发者大会。OpenAI首席执行官Sam Altman宣布推出最新的大模型GPT-4 Turbo。正如“Turbo”一词的中文含义“涡轮增压器”一样&#xff0c;本次发布会上&#xff0c;OpenAI的这款最新大模型在长文本、知识库、多模…

53.最大子数组和

​题目来源&#xff1a; leetcode题目&#xff0c;网址&#xff1a;53. 最大子数组和 - 力扣&#xff08;LeetCode&#xff09; 解题思路&#xff1a; 动态规划&#xff0c;假设以第 i 个元素为结尾的最大子数组和为 dp[i]&#xff0c;则 dp[i]max(dp[i-1]nums[i],nums[i])。最…

Django+Vue项目创建 跑通

参考链接&#xff1a; 【精选】DjangoVue项目构建_django vue-CSDN博客 一、背景 主要介绍如何使用后端Django 前端Vue 的技术栈快速地搭建起一套web项目的框架。 为什么使用Django和Vue? Django是Python体系下最成熟的web框架之一&#xff0c;由于Python语言的易用…

01. Linux kernel 编译,qemu仿真

01. Linux kernel 编译&#xff0c;qemu仿真 主要步骤回顾参考文章链接 主要步骤回顾 下载编译linux内核5.10 wget https://mirror.bjtu.edu.cn/kernel/linux/kernel/v5.x/linux-5.10.tar.xz下载交叉编译工具链 http://releases.linaro.org/components/toolchain/binaries/7…

【心得】PHP的文件上传个人笔记

目录 1 php的文件上传绕过 黑名单绕过 2 php文件上传的00截断 3 iconv字符转换异常后造成了字符截断 4 文件后缀是白名单的时候的绕过 web服务器的解析漏洞绕过 5.高级文件上传绕过 1 .htaccess nginx.htaccess 2 服务端内容检测 3 配合伪协议来绕过 4.配合日志包含绕…

Word2Vec浅谈

论文地址&#xff1a;Efficient Estimation of Word Representations in Vector Space 个人认为&#xff0c;word2vec主要解决的问题是one-hot中维度过高并且稀疏的问题。word2vec是Google团队在2013年发表的一篇paper&#xff0c;当时一经问世直接将NLP领域带到了一个新的高度…