Flutter笔记:拖拽手势

Flutter笔记
拖拽手势

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



1. 概述

在构建交互式应用程序时,处理用户的手势输入是至关重要的一部分。Flutter 提供了一套丰富的手势识别系统,使得开发者可以轻松地实现各种手势操作,如点击、双击、拖拽、缩放等。

在 Flutter 中,GestureDetector 组件可以识别和处理各种手势,包括拖拽手势。GestureDetector 提供了一系列的回调函数,这些函数在不同的手势事件发生时被调用,例如当手势开始、更新或结束时。对于拖拽手势,GestureDetector 提供了专门的回调函数来处理垂直拖拽、水平拖拽和二维拖拽。本文接下来的小节将对这些拖拽分别举例讲解。

2. 垂直拖拽

GestureDetector 中处理垂直拖拽手势的属性如表所示:

属性描述
onVerticalDragDown当用户接触屏幕并准备在垂直方向移动时触发
onVerticalDragStart当用户接触屏幕并开始在垂直方向移动时触发
onVerticalDragUpdate当用户手指在垂直方向移动时触发
onVerticalDragEnd当用户手指在垂直方向移动后、用户手指抬起时触发

例如:

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('垂直拖拽示例'),),body: const Center(child: DragBox(),),),);}
}class DragBox extends StatefulWidget {const DragBox({Key? key}) : super(key: key);State<DragBox> createState() => _DragBoxState();
}class _DragBoxState extends State<DragBox> {// _offsetY 是一个状态变量,用于存储垂直偏移量double _offsetY = 0.0;Widget build(BuildContext context) {return GestureDetector(// 当用户在垂直方向上拖拽时,更新 _offsetY 的值onVerticalDragUpdate: (DragUpdateDetails details) {setState(() {_offsetY += details.delta.dy;});},// 使用 Transform.translate 来改变 Container 的位置child: Transform.translate(offset: Offset(0, _offsetY),child: Container(color: Colors.blue,width: 100.0,height: 100.0,),),);}
}

拖拽效果如下:
在这里插入图片描述

3. 水平拖拽

GestureDetector 中处理水平拖拽手势的属性如表所示:

属性描述
onHorizontalDragDown当用户接触屏幕并准备在水平方向移动时触发
onHorizontalDragStart当用户接触屏幕并开始在水平方向移动时触发
onHorizontalDragUpdate当用户手指在水平方向移动时触发
onHorizontalDragEnd当用户手指在水平方向移动后、用户手指抬起时触发

例如:

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('水平拖拽示例'),),body: const Center(child: DragBox(),),),);}
}class DragBox extends StatefulWidget {const DragBox({Key? key}) : super(key: key);State<DragBox> createState() => _DragBoxState();
}class _DragBoxState extends State<DragBox> {// _offsetY 是一个状态变量,用于存储垂水平移量double _offsetX = 0.0;Widget build(BuildContext context) {return GestureDetector(// 当用户在屏幕上拖拽时,更新 _offsetX 的值onHorizontalDragUpdate: (DragUpdateDetails details) {setState(() {_offsetX += details.delta.dx;});},// 使用 Transform.translate 来改变 Container 的位置child: Transform.translate(offset: Offset(_offsetX, 0),child: Container(color: Colors.red,width: 100.0,height: 100.0,),),);}
}

拖拽效果如下:

在这里插入图片描述

4. 二维拖拽

GestureDetector 中处理二维拖拽手势的属性如表所示:

属性描述
onPanDown当用户接触屏幕并准备移动时触发
onPanStart当用户接触屏幕并开始移动时触发
onPanUpdate当用户手指移动时触发
onPanEnd当用户手指移动后、用户手指抬起时触发

例如:

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('二维拖拽示例'),),body: const Center(child: DragBox(),),),);}
}class DragBox extends StatefulWidget {const DragBox({Key? key}) : super(key: key);State<DragBox> createState() => _DragBoxState();
}class _DragBoxState extends State<DragBox> {// _offsetX 和 _offsetY 是状态变量,用于存储水平和垂直偏移量double _offsetX = 0.0;double _offsetY = 0.0;Widget build(BuildContext context) {return GestureDetector(// 当用户在屏幕上拖拽时,更新 _offsetX 和 _offsetY 的值onPanUpdate: (DragUpdateDetails details) {setState(() {_offsetX += details.delta.dx;_offsetY += details.delta.dy;});},// 使用 Transform.translate 来改变 Container 的位置child: Transform.translate(offset: Offset(_offsetX, _offsetY),child: Container(color: Colors.green,width: 100.0,height: 100.0,),),);}
}

拖拽效果如下:
在这里插入图片描述

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

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

相关文章

Flutter笔记:缩放手势

Flutter笔记 缩放手势 作者&#xff1a;李俊才 &#xff08;jcLee95&#xff09;&#xff1a;https://blog.csdn.net/qq_28550263 邮箱 &#xff1a;291148484163.com 本文地址&#xff1a;https://blog.csdn.net/qq_28550263/article/details/134485138 目 录 1. 概述2. 缩放手…

BatchNormalization:解决神经网络中的内部协变量偏移问题

ICML2015 截至目前51172引 论文链接 代码连接(planing) 文章提出的问题 减少神经网络隐藏层中的”内部协变量偏移”问题。 在机器学习领域存在“协变量偏移”问题,问题的前提是我们划分数据集的时候,训练集和测试集往往假设是独立同分布(i.i.d)的,这种独立同分布更有利于…

RabbitMQ消息的可靠性

RabbitMQ消息的可靠性 一 生产者的可靠性 生产者重试 有时候由于网络问题&#xff0c;会出现连接MQ失败的情况&#xff0c;可以配置重连机制 注意&#xff1a;SpringAMQP的重试机制是阻塞式的&#xff0c;重试等待的时候&#xff0c;当前线程会等待。 spring:rabbitmq:conne…

OSI参考模型

目录 一. OSI参考模型的各层功能二. 网络排错三. 网络安全四. 实体、协议、服务和服务访问点SAP五. TCP IP体系结构 一. OSI参考模型的各层功能 \quad \quad \quad \quad 我们首先来看应用层实现的功能 每个字段的各种取值所代表的意思 \quad \quad 比如要保存的文件内容是ab…

Linux 网络:PMTUD 简介

文章目录 1. 前言2. Path MTU Discovery(PMTUD) 协议2.1 PMTUD 发现最小 MTU 的过程 3. Linux 的 PMTUD 简析3.1 创建 socket 时初始化 PMTUD 模式3.2 数据发送时 PMTUD 相关处理3.2.1 源头主机发送过程中 PMTU 处理3.2.2 转发过程中 PMTUD 处理 4. PMTUD 观察5. 参考链接 1. 前…

配置VNC环境时,出现xauth: file /root/.Xauthority does not exist的解决方案。

问题描述 在配置VNC&#xff08;Virtual Network Computing&#xff09;环境的过程时&#xff0c;首先安装了tigervnc-server包。在使用&#xff1a; vncserver命令创建VNC会话号的时候出现了一个报错&#xff1a;xauth: file /root/.Xauthority does not exist 原因分析&…

【Linux进阶之路】动静态库

文章目录 回顾一. 静态库1.代码传递的方式2.简易制作3.原理 二. 动态库1.简易制作2.基本原理 尾序 回顾 前面在gcc与g的使用中&#xff0c;我们简单的介绍了动态库与静态库的各自的优点与区别&#xff1a; 动态链接库&#xff0c;也就是所有的程序公用一份代码,虽然方便省空间&…

SpringBoot 整合 JdbcTemplate

数据持久化有几个常见的方案&#xff0c;有 Spring 自带的 JdbcTemplate 、有 MyBatis&#xff0c;还有 JPA&#xff0c;在这些方案中&#xff0c;最简单的就是 Spring 自带的 JdbcTemplate 了&#xff0c;这个东西虽然没有 MyBatis 那么方便&#xff0c;但是比起最开始的 Jdbc…

Go——一、Go语言安装及介绍

Go 一、Windows下安装Go1、下载Go2、配置环境变量3、下载Jetbrain下的GoLang4、编写hello world5、编译和执行 二、Go语言介绍1、开发文档2、Go语言核心开发团队3、为什么要创建Go4、Go语言发展史5、Go语言特点6、Golang执行过程6.1 执行过程分析6.2 编译是什么 7、开发注意事项…

RobotFramework进阶之自定义的python模块(十四)

引言 RobotFramework自动化框架&#xff08;以下简称RF&#xff09;之前文章我们讲了通过import第三方的library&#xff08;RequestsLibrary等&#xff09;&#xff0c;在实际项目中第三方的包并不能满足我们的需要&#xff0c;此时我们可自己编写python模块&#xff08;.py文…

算法通关村第十六关白银挑战——滑动窗口高频问题

关注微信公众号&#xff1a;怒码少年。回复关键词【电子书】&#xff0c;领取多本计算机相关电子书 公众号后台开启了咨询业务&#xff0c;欢迎大家向我提问&#xff0c;免费&#xff0c;为爱发电&#x1f60e; 大家好&#xff0c;我是怒码少年小码。 武汉今天真的超级冷&…

pr出现由于找不到msvcp110.dll,无法继续执行代码怎么办?如何修复

为什么我们在打开运行电脑软件会出现msvcr110.dll无法继续执行此代码的问题呢&#xff1f;因为msvcr110.dll是Microsoft Visual C Redistributable Package for Visual Studio 2013的一个动态链接库。它是一个重要的组件&#xff0c;用于帮助游戏和软件运行。如果某个程序是用它…