Flutter实现可拖拽操作Draggable
文章目录
- 1. `Draggable` 控件的构造函数
- 主要参数:
- 2. `Draggable` 的工作原理
- 3. 常见用法
- 示例 1:基本的拖拽控件
- 解释:
- 示例 2:与 `DragTarget` 配合使用
- 解释:
- 4. `Draggable` 的回调详解
- 5. 总结
Draggable
是 Flutter 中一个用来实现拖拽功能的控件。它允许用户将一个控件拖动到屏幕的不同位置,并且可以与
DragTarget
控件一起工作来完成拖拽交互。
Draggable
控件不仅可以在应用内拖动控件,还可以处理拖拽反馈、拖拽过程中控件的状态变更等操作。
1. Draggable
控件的构造函数
Draggable<T>({Key? key,required T data, // 传递的拖拽数据required Widget child, // 拖拽控件本身的显示Widget? feedback, // 拖拽过程中展示的控件(通常是透明的)Widget? childWhenDragging, // 拖拽时原控件的替代显示Axis? axis, // 指定拖拽方向(水平或垂直)bool? ignorePointer, // 是否忽略手势bool? dragAnchorStrategy, // 自定义拖拽时锚点位置bool? onDragStarted, // 拖拽开始时的回调bool? onDragEnd, // 拖拽结束时的回调bool? onDraggableCanceled, // 拖拽取消时的回调
})
主要参数:
data
:拖拽的核心数据,当用户拖拽控件时会携带此数据(可以是任意类型)。child
:正常显示的控件。它是拖拽对象的原始显示(例如,可以是一个文本或图像)。feedback
:拖拽时展示的控件,通常是半透明的,这个控件在拖拽期间会悬浮在用户的手指上方。childWhenDragging
:当控件被拖拽时,原控件的替代显示(通常是空白或一个灰色的占位符)。axis
:控制拖拽的方向,值可以是Axis.horizontal
(水平)或Axis.vertical
(垂直),也可以为Axis.none
(没有方向限制)。ignorePointer
:是否忽略手势。如果为true
,该控件在拖拽时将无法响应任何手势。onDragStarted
:拖拽开始时的回调,通常用来更新状态或做一些准备工作。onDragEnd
:拖拽结束时的回调,通常用来处理拖拽结束后的逻辑。onDraggableCanceled
:当拖拽被取消时的回调,通常是当控件离开了任何DragTarget
区域。
2. Draggable
的工作原理
Draggable
控件主要通过 data
属性将需要拖拽的数据传递给其他控件,特别是 DragTarget
,在用户拖拽控件时,Draggable
控件会自动执行以下操作:
- 拖拽开始:当用户开始拖拽时,
Draggable
控件会展示指定的feedback
,并且显示出原始控件的占位符(childWhenDragging
)。 - 拖拽过程:拖拽过程中,用户可以将控件在屏幕上拖动,通常会通过
onDragStarted
和onDragEnd
回调来触发相应的逻辑。 - 拖拽结束或取消:当拖拽对象被放置到
DragTarget
中,或者当用户取消拖拽时,Draggable
会触发onDragEnd
或onDraggableCanceled
回调。
3. 常见用法
示例 1:基本的拖拽控件
import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {Widget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('Draggable Example')),body: Center(child: Draggable<int>(data: 100, // 拖拽的数据child: Container(padding: EdgeInsets.all(16),color: Colors.blue,child: Text('Drag me'),),feedback: Material(color: Colors.transparent,child: Container(padding: EdgeInsets.all(16),color: Colors.blue.withOpacity(0.5),child: Text('Dragging'),),),childWhenDragging: Container(padding: EdgeInsets.all(16),color: Colors.grey,child: Text('Gone'),),),),),);}
}
解释:
- 在此例中,
Draggable<int>
创建了一个可以拖拽的蓝色矩形,其内容是文本“Drag me”。 - 当用户开始拖拽时,
feedback
使矩形变成一个半透明的版本(显示文本“Dragging”),同时,原始控件会被替换为一个灰色的占位符(childWhenDragging
)。
示例 2:与 DragTarget
配合使用
import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {Widget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('Draggable with DragTarget')),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Draggable<String>(data: "Hello, Flutter!", // 拖拽的数据child: Container(color: Colors.blue,padding: EdgeInsets.all(20),child: Text('Drag me'),),feedback: Material(color: Colors.transparent,child: Container(color: Colors.blue.withOpacity(0.5),padding: EdgeInsets.all(20),child: Text('Dragging'),),),childWhenDragging: Container(padding: EdgeInsets.all(20),color: Colors.grey,child: Text('Gone'),),),SizedBox(height: 50),DragTarget<String>(onAccept: (data) {ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Dropped: $data')),);},builder: (context, candidateData, rejectedData) {return Container(width: 300,height: 200,color: Colors.orange,child: Center(child: Text('Drop Here')),);},),],),),),);}
}
解释:
- 在这个例子中,
Draggable<String>
允许用户拖拽一个带有文本“Drag me”的蓝色矩形。 - 拖拽过程中,
feedback
显示一个半透明的矩形,childWhenDragging
在原位置展示一个灰色占位符。 DragTarget<String>
用来接收拖拽的字符串数据,当用户将拖拽对象放入目标区域时,显示一个 SnackBar,告知接收到的内容。
4. Draggable
的回调详解
onDragStarted
:在拖拽开始时调用。通常用来执行一些初始操作,例如更新 UI 状态,或者记录拖拽开始时的时间等。onDragEnd
:在拖拽结束时调用。可以根据拖拽结束的位置来执行不同的操作,比如更新模型数据、界面重绘等。onDraggableCanceled
:当拖拽操作被取消时调用,例如当拖拽控件未被放置到DragTarget
中。你可以使用这个回调恢复控件的状态,或者清除一些临时的数据。
5. 总结
Draggable
是 Flutter 中实现拖拽功能的核心控件,可以创建可拖拽的控件并将其与DragTarget
配合使用,实现丰富的拖拽交互。- 它支持拖拽过程中控件状态的变化,如显示拖拽的反馈内容、替代显示、拖拽过程中展示的内容等。
- 通过回调函数如
onDragStarted
、onDragEnd
和onDraggableCanceled
,你可以在不同的拖拽阶段进行更多定制化的操作。
结束语
Flutter是一个由Google开发的开源UI工具包,它可以让您在不同平台上创建高质量、美观的应用程序,而无需编写大量平台特定的代码。我将学习和深入研究Flutter的方方面面。从基础知识到高级技巧,从UI设计到性能优化,欢饮关注一起讨论学习,共同进入Flutter的精彩世界!
相关文章:
Flutter实现可拖拽操作Draggable
文章目录 1. Draggable 控件的构造函数主要参数: 2. Draggable 的工作原理3. 常见用法示例 1:基本的拖拽控件解释:示例 2:与 DragTarget 配合使用解释: 4. Draggable 的回调详解5. 总结 Draggable 是 Flutter 中一个用…...
【QSS样式表 - ⑥】:QPushButton控件样式
文章目录 QPushBUtton控件样式QSS示例 QPushBUtton控件样式 常用子控件 常用伪状态 QSS示例 代码: QPushButton {background-color: #99B5D1;color: white;font-weigth: bold;border-radius: 20px; }QPushButton:hover {background-color: red; }QPushButton:p…...
DPO(Direct Preference Optimization)算法解释:中英双语
中文版 DPO paper: https://arxiv.org/pdf/2305.18290 DPO 算法详解:从理论到实现 1. 什么是 DPO? DPO(Direct Preference Optimization)是一种直接基于人类偏好进行优化的算法,旨在解决从人类偏好数据中训练出表现…...
springboot495基于java的物资综合管理系统的设计与实现(论文+源码)_kaic
摘 要 如今社会上各行各业,都喜欢用自己行业的专属软件工作,互联网发展到这个时候,人们已经发现离不开了互联网。新技术的产生,往往能解决一些老技术的弊端问题。因为传统物资综合管理系统信息管理难度大,容错率低&am…...
JavaScript语言的编程范式
JavaScript:面向对象与函数式编程的双重奏 在编程世界中,JavaScript 无疑是一颗璀璨的明星,它不仅主宰着前端开发领域,还在后端、桌面应用、甚至物联网设备上展现出了强大的生命力。JavaScript 的魅力在于其灵活多变的编程范式&a…...
MyBatis动态 SQL 的执行原理
MyBatis 动态 SQL 是 MyBatis 框架中的一个重要特性,它允许开发者根据条件动态地生成不同的 SQL 语句。通过使用动态 SQL,开发者可以根据传入的参数动态地构建 SQL 查询,这样就避免了写多个 SQL 语句,提升了代码的灵活性和可维护性…...
PostgreSQL自带的一个命令行工具pg_waldump
pg_waldump是PostgreSQL自带的一个命令行工具,用于以人类可读的形式显示PostgreSQL数据库集簇的预写式日志(Write-Ahead Logging,WAL)。以下是对pg_waldump的详细介绍: 一、主要用途 pg_waldump主要用于调试或教育目…...
K8s 常用资源介绍
在 Kubernetes 中,资源指的是可以在集群中管理的对象(Objects)。这些资源用来定义和控制应用、服务、以及集群的状态。以下是 Kubernetes 中常见的资源及其用途介绍: 1. 工作负载资源(Workloads Resources)…...
基于 Python 大数据的拼团购物数据分析系统的设计与实现
标题:基于 Python 大数据的拼团购物数据分析系统的设计与实现 内容:1.摘要 本文设计并实现了一个基于 Python 大数据的拼团购物数据分析系统。通过对拼团购物数据的收集、清洗和分析,系统能够为商家提供用户行为分析、商品销售情况分析等功能,帮助商家更…...
finalshell密码解密
finalshell密码解密 在线网站运行java https://c.runoob.com/compile/10/ import java.io.ByteArrayOutputStream; import java.io.DataOutputStream; import java.io.IOException; import java.math.BigInteger; import java.security.MessageDigest; import java.security.N…...
利用Java爬虫速卖通按关键字搜索AliExpress商品
在这个信息爆炸的时代,数据的价值日益凸显。对于电商领域的从业者来说,能够快速获取商品信息成为了一项重要的技能。速卖通(AliExpress)作为全球领先的跨境电商平台,拥有海量的商品数据。本文将介绍如何使用Java语言编…...
每天40分玩转Django:Django缓存
一、Django缓存概述 在高并发的Web应用中,缓存是提高性能的重要手段。通过缓存频繁访问的数据,可以显著减少数据库查询和渲染模板的时间,从而加快响应速度,提升用户体验。Django提供了多层级的缓存方案,可以灵活地满足不同场景下的缓存需求。 Django支持的缓存方式包括: 视图…...
matrix-breakout-2-morpheus
将这一关的镜像导入虚拟机,出现以下页面表示导入成功 以root身份打开kali终端,输入以下命令,查看靶机ip arp-scan -l 根据得到的靶机ip,浏览器访问进入环境 我们从当前页面没有得到有用的信息,尝试扫描后台 发现有一个…...
第七节:GLM-4v-9b模型的视觉模型源码解读
文章目录 前言一、EVA2CLIPModel视觉编码模块结构二、PatchEmbedding图像分块源码解读三、GLM的transformer结构源码解读四、GLU映射方法源码解读前言 清华智普的GLM-4v-9b模型,作为优化的多模态大模型,特别适用于国内应用场景,解决了国外模型本地化不足的问题。本专栏提供…...
@RestControllerAdvice和@ControllerAdvice的区别
RestControllerAdvice 和 ControllerAdvice 都是 Spring 框架中的注解,用于定义全局的异常处理、数据绑定、模型属性共享等功能。它们的区别主要体现在返回值的处理和适用的场景。 1. ControllerAdvice 功能: ControllerAdvice 是 Spring MVC 提供的全局…...
c++ 类似与c# 线程 AutoResetEvent 和 ManualResetEvent的实现
在 C 中,没有直接类似于 C# 的 AutoResetEvent 和 ManualResetEvent 的类,但可以通过一些线程同步机制来实现类似的功能。C 提供了一些线程同步原语,如 std::condition_variable 和 std::mutex,这些可以用来模拟类似于 C# 中 Auto…...
简单贪吃蛇小游戏的设计与实现
文章目录 1、知识预备1.1 WIN32 API1.1.1 什么是WIN32 API1.1.2 了解部分WIN32 API1.1.2.1 控制台坐标1.1.2.2 控制台光标1.1.2.3 获取键盘按键情况 2.1 宽字符2.1.1 C语言的国际化2.1.2 宽字符的打印 2、 贪吃蛇游戏设计2.1 游戏开始2.2 游戏运行2.2.1 更新分数2.2.2 按键检测…...
动态规划<五> 子数组问题(含对应LeetcodeOJ题)
目录 引例 经典LeetcodeOJ题 1.第一题 2.第二题 3.第三题 4.第四题 5.第五题 6.第六题 7.第七题 引例 OJ传送门 Leetcode<53> 最大子数组和 画图分析: 使用动态规划解决 1.状态表示 dp[i]表示以i位置为结尾的所有子数组中的最大和 2.状态转移方程 子数组的问题可以…...
计算机网络——期末复习(4)协议或技术汇总、思维导图
思维导图 协议与技术 物理层通信协议:曼彻斯特编码链路层通信协议:CSMA/CD (1)停止-等待协议(属于自动请求重传ARQ协议):确认、否认、重传、超时重传、 (2)回退N帧协…...
在 RK3568 Linux 系统上使用 TUN 设备:详细教程
RK3568 是一个基于 ARM 架构的处理器,广泛应用于嵌入式系统和物联网设备。Linux 系统上的 TUN(网络隧道)设备提供了一个虚拟的网络接口,允许用户空间程序通过内核与网络栈进行交互。本文将详细介绍如何在 RK3568 上配置和使用 TUN 设备,适用于搭建 VPN 或容器网络等应用场…...
记录一次前端绘画海报的过程及遇到的几个问题
先看效果 使用工具 html2canvas import html2canvas from html2canvas// 绘画前的内容 我就不过多写了<div class"content" ref"contentRef" v-show"!imgShow"><img :src"getReplaceImg(friendObj.coverUrl)" alt"&qu…...
费舍尔信息矩阵全面讲述
费舍尔信息矩阵(Fisher Information Matrix) 费舍尔信息矩阵是统计学中一个非常重要的概念,尤其在参数估计、最大似然估计(MLE)和贝叶斯推断中具有广泛的应用。它反映了参数估计的不确定性程度,也可以用来…...
【CSS in Depth 2 精译_094】16.2:CSS 变换在动效中的应用(下)——导航菜单的文本标签“飞入”特效与交错渲染效果的实现
当前内容所在位置(可进入专栏查看其他译好的章节内容) 第五部分 添加动效 ✔️【第 16 章 变换】 ✔️ 16.1 旋转、平移、缩放与倾斜 16.1.1 变换原点的更改16.1.2 多重变换的设置16.1.3 单个变换属性的设置 16.2 变换在动效中的应用 16.2.1 放大图标&am…...
webpack3 webpack4 webpack5 有什么区别
性能优化 Webpack 3 性能优化主要依赖开发者手动配置各种插件。例如,在代码分割方面,需要通过CommonsChunkPlugin来实现公共模块的提取,其配置相对复杂。如果配置不当,可能会导致模块重复打包等问题,影响构建效率和最终…...
vue2 升级为 vite 打包
VUE2 中使用 Webpack 打包、开发,每次打包时间太久,尤其是在开发的过程中,本文记录一下 VUE2 升级Vite 步骤。 安装 Vue2 Vite 依赖 dev 依赖 vitejs/plugin-vue2": "^2.3.3 vitejs/plugin-vue2-jsx": "^1.1.1 vite&…...
[创业之路-206]:《华为战略管理法-DSTE实战体系》- 6-关键成功因素法CSF
目录 一、概述 1、定义与起源 2、关键成功因素的定义 3、关键成功因素的来源 4、关键成功因素的确认方法 5、关键成功因素法的步骤 6、关键成功因素法的应用 7、关键成功因素法的优势与局限性 二、 关键成功因素法CSF的应用 1、企业战略管理 2、项目管理 3、绩效管…...
WebRTC服务质量(08)- 重传机制(05) RTX机制
WebRTC服务质量(01)- Qos概述 WebRTC服务质量(02)- RTP协议 WebRTC服务质量(03)- RTCP协议 WebRTC服务质量(04)- 重传机制(01) RTX NACK概述 WebRTC服务质量(…...
Go的select的运行原理
Go语言中的select语句是一种专门用于处理多个通道(channel)操作的控制结构。其运行原理可以概括为以下几点: 1. 监听多个通道 select语句能够同时监听多个通道上的操作,这些操作可以是发送操作或接收操作。每个通道操作都对应se…...
操作002:HelloWorld
文章目录 操作002:HelloWorld一、目标二、具体操作1、创建Java工程①消息发送端(生产者)②消息接收端(消费者)③添加依赖 2、发送消息①Java代码②查看效果 3、接收消息①Java代码②控制台打印③查看后台管理界面 操作…...
3D坐标下,一点在某一线段上的左右方向的判定
3D坐标下,一点在某一线段上的左右方向的判定 代码 代码 #include <iostream> #include <Eigen/Dense>#define M_PI 3.1415926// 计算三点组成平面的参数和变换到XOY平面的变换矩阵 void computePlaneAndTransform(const Eigen::Vector3d& P1, cons…...
Visual Studio 使用 GitHub Copilot 与 IntelliCode 辅助编码 【AI辅助开发系列】
🎀🎀🎀【AI辅助编程系列】🎀🎀🎀 Visual Studio 使用 GitHub Copilot 与 IntelliCode 辅助编码Visual Studio 安装和管理 GitHub CopilotVisual Studio 使用 GitHub Copilot 扩展Visual Studio 使用 GitHu…...
Linux高级--2.4.5 靠协议头保证传输的 MAC/IP/TCP/UDP---协议帧格式
任何网络协议,都必须要用包头里面设置写特殊字段来标识自己,传输越复杂,越稳定,越高性能的协议,包头越复杂。我们理解这些包头中每个字段的作用要站在它们解决什么问题的角度来理解。因为没人愿意让包头那么复杂。 本…...
【UE5 C++课程系列笔记】14——GameInstanceSubsystem与动态多播的简单结合使用
效果 通过在关卡蓝图中触发GameInstanceSubsystem包含的委托,来触发所有绑定到这个委托的事件,从而实现跨蓝图通信。 步骤 1. 新建一个C类 这里命名为“SubsystemAndDelegate” 引入GameInstanceSubsystem.h,让“SubsystemAndDelegate”继承…...
PyQt实战——随机涂格子的特色进度条(十一)
系类往期文章: PyQt5实战——多脚本集合包,前言与环境配置(一) PyQt5实战——多脚本集合包,UI以及工程布局(二) PyQt5实战——多脚本集合包,程序入口QMainWindow(三&…...
.NET 8.0 项目升级到 .NET 9.0
本文项目从.NETCore3.1开始一直延续到目前,如果您没有升级过,请参考以下文章: .Net Core 2.2 升级到 .Net Core 3.1:https://blog.csdn.net/hefeng_aspnet/article/details/131259537 NetCore3.1或Net6.0项目升级到Net7.0&#x…...
用Python写炸金花游戏
文章目录 **代码分解与讲解**1. **扑克牌的生成与洗牌**2. **给玩家发牌**3. **打印玩家的手牌**4. **定义牌的优先级**5. **判断牌型**6. **确定牌型优先级**7. **比较两手牌的大小**8. **打印结果** 完整代码 以下游戏规则: 那么我们要实现的功能,就是…...
深度学习中的并行策略概述:2 Data Parallelism
深度学习中的并行策略概述:2 Data Parallelism 数据并行(Data Parallelism)的核心在于将模型的数据处理过程并行化。具体来说,面对大规模数据批次时,将其拆分为较小的子批次,并在多个计算设备上同时进行处…...
电商平台能挡住恶意网络爬虫的攻击吗?
爬虫盗取电商数据的步骤 爬虫技术作为一种数据获取工具,正逐渐成为电商平台的一大隐患。网络爬虫不仅能够获取商家关键信息并滋生仿冒网站,还能收集用户敏感信息,对用户的财产安全和隐私造成严重威胁。同时,爬虫攻击还会扰乱正常…...
Jenkins安装方法二
配置环境 和 Jenkins 官方的 yum 源之后进行安装 # 关闭防火墙 $ sudo systemctl stop firewalld $ sudo systemctl disable firewalld# 安装 EPEL 源 $ sudo yum install -y epel-release # 安装 wget $ sudo yum install -y wget# 配置 Jenkins 官方 yum 源 $ sudo wget -O /…...
Nginx性能优化全方案:打造一个高效服务器
提到前面:一个热衷技术,反对八股的资深研发,不卖课不引流,专注分享高质量教学博客。 如果觉得文章还不错的话,可以点赞收藏关注 支持一下,持续分享高质量技术博客。 如果有什么需要改进的地方还请大佬指出❌…...
【每日学点鸿蒙知识】沙箱目录、图片压缩、characteristicsArray、gm-crypto 国密加解密、通知权限
1、HarmonyOS 如何创建应用沙箱目录? 下载文件,想下载到自己新建的应用沙箱目录,有什么方法实现吗? fs.mkdir可以创建目录 参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis…...
XMLHttpRequest的基础知识
get请求 const xml new XMLHttpRequest(); xml.open("GET", "https://jsonplaceholder.typicode.com/todos/1", true); xml.onreadystatechange function () {if (xml.readyState 4 && xml.status 200) {console.log(xml.responseText);} }…...
学习笔记(C#基础书籍)-- C#基础篇
(12.24) C#介绍:《第一章》 特点:语法简洁,面向对象,支持绝大部分的web标准,强大的安全机制(垃圾回收器),兼容性好(遵循.NET的公共语言规范【CL…...
现在有什么赛道可以干到退休?
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家:点击跳转到网站 ,对人工智能感兴趣的小伙伴可以点进去看看。 最近,一则“90后无论男女都得65岁以后退休”的消息在多个网…...
【VScode】第三方GPT编程工具-CodeMoss安装教程
一、CodeMoss是什么? CodeMoss是一款集编程、学习和办公于一体的高效工具。它兼容多种主流平台,包括VSCode、IDER、Chrome插件、Web和APP等,支持插件安装,尤其在VSCode和IDER上的表现尤为出色。无论你是编程新手还是资深开发者&a…...
选择屏幕的用法
**************************定义控件*********************************** SELECTION-SCREEN BEGIN OF BLOCK b1 WITH FRAME TITLE text-002. SELECT-OPTIONS bukrs FOR iloa-bukrs . "公司代码 SELECT-OPTIONS swerk FOR iloa-swerk OBLIGATORY . "工厂 SELECT-O…...
VirtualBox下ubuntu23.04使用主机串口以及使用 minicom 进行串口调试
VirtualBox下ubuntu23.04使用主机串口以及使用 minicom 进行串口调试 一、打开设备管理器看主机(Window系统)是否识别出串口,我这边显示的串行通信端口是COM3 二、打开VirtualBox,设置串口和USB设备 串口设置: 启用…...
CH340系列芯片驱动电路·CH340系列芯片驱动!!!
目录 CH340基础知识 CH340常见类型 CH340引脚功能讲解 CH340驱动电路 CH340系列芯片数据手册 编写不易,仅供学习,请勿搬运,感谢理解 常见元器件驱动电路文章专栏连接 LM7805系列降压芯片驱动电路降压芯片驱动电路详解-CSDN博客 ME62…...
Unity中使用环形缓冲区平滑抖动值
环形缓冲数据结构,就是如下图一样的一个收尾相接的列表 在index指针指到4时,再往里添加数据,index就会指向0,并覆盖已有数据。 如何绘制Sin函数,请看下面一篇文章 Unity中如何实现绘制Sin函数图像-CSDN博客 接下来要…...
如何通过HTTP API插入或更新Doc
本文介绍如何通过HTTP API向Collection中插入或更新Doc。 说明 若调用本接口时Doc Id已存在,则等同于更新Doc;Doc Id不存在,则等同于插入Doc。 若调用本接口时不指定Doc Id,则等同于插入Doc,DashVector会自动生成Doc …...