Flutter实现Android拖动到垃圾桶删除效果-Draggable和DragTarget的详细讲解

在这里插入图片描述

文章目录

  • Draggable介绍
    • 构造函数
    • 参数说明
    • 使用示例
  • DragTarget 介绍
    • 构造函数
    • 参数说明
    • 使用示例
  • DragTarget 如何接收Draggable传递过来的数据？

Draggable介绍

Draggable是Flutter框架中的一个小部件，用于支持用户通过手势拖动一个子部件。它是基于手势的一种方式，可以使用户可以在屏幕上拖动指定的部件。以下是关于Draggable的一些详细介绍：

构造函数

Draggable的构造函数

Draggable<T>({Key? key,required this.child,this.feedback,this.data,this.axis,this.childWhenDragging,this.feedbackOffset = Offset.zero,this.dragAnchor = DragAnchor.child,this.affinity,this.onDragStarted,this.onDragEnd,this.onDraggableCanceled,this.maxSimultaneousDrags,this.canDrag = true,this.gestureRecognizer,this.dragAnchorStrategy = DefaultDragAnchorStrategy,
})

参数说明

  • child (Widget): 被拖动的子部件。

  • feedback (Widget?): 拖动时显示的反馈部件。如果为null，则使用child作为反馈部件。

  • data (T?): 拖动过程中传递给DragTarget的数据。

  • axis (Axis?): 限制拖动的轴向。可以是Axis.horizontal（水平方向）或Axis.vertical（垂直方向）。

  • childWhenDragging (Widget?): 在拖动时替代child的部件。如果为null，则在拖动时显示child。

  • feedbackOffset (Offset): 反馈部件相对于拖动手势的偏移。

  • dragAnchor (DragAnchor): 控制拖动锚点的位置。可以是DragAnchor.child（默认值，锚点在child部件的中心）或DragAnchor.pointer（锚点在拖动手势的位置）。

  • affinity (Axis?): 用于指定对齐到某个轴的情况，可以是Axis.horizontal或Axis.vertical。

  • onDragStarted (VoidCallback?): 拖动开始时的回调函数。

  • onDragEnd (DraggableDetailsCallback?): 拖动结束时的回调函数。

  • onDraggableCanceled (DraggableCanceledCallback?): 在拖动被取消时的回调函数。

  • maxSimultaneousDrags (int?): 同时拖动的最大数量。

  • canDrag (bool): 是否允许拖动。如果为false，Draggable将不响应拖动手势。

  • gestureRecognizer (DragGestureRecognizer?): 用于自定义拖动手势检测的手势识别器。

  • dragAnchorStrategy (DragAnchorStrategy): 用于控制拖动锚点的策略。

使用示例

Draggable<int>(data: 42,child: Container(width: 100,height: 100,color: Colors.blue,child: Center(child: Text("Drag me"),),),feedback: Container(width: 120,height: 120,color: Colors.blue.withOpacity(0.5),child: Center(child: Text("Dragging..."),),),onDragStarted: () {// 拖动开始时执行的操作print("Drag started!");},onDragEnd: (details) {// 拖动结束时执行的操作print("Drag ended!");},
);

在这个例子中，当用户拖动包含文本"Drag me"的蓝色容器时，onDragStarted回调被触发，打印"Drag started!“。在拖动结束时，onDragEnd回调被触发，打印"Drag ended!”。被拖动的数据是42，可以通过DragTarget接收并处理。

DragTarget 介绍

DragTarget 是 Flutter 框架中的一个小部件，用于接收拖动操作并处理拖动过程中传递的数据。它是与 Draggable 配合使用的一种方式，允许你指定拖动对象应该如何被接收和处理。

以下是关于 DragTarget 的详细介绍：

构造函数

DragTarget<T>({Key? key,required this.builder,this.onWillAccept,this.onAccept,this.onLeave,this.hitTestBehavior = HitTestBehavior.deferToChild,this.feedback,this.child,
})

参数说明

  • builder (Widget Function(BuildContext, List<T?>, List): 用于构建 DragTarget 的子部件。builder 接受三个参数，分别是 BuildContext、当前拖动的数据列表和之前已经接收的数据列表。

  • onWillAccept (bool Function(T)?): 在拖动对象进入 DragTarget 区域时调用，用于决定是否接受拖动对象。如果返回 true，则 onAccept 将被调用。

  • onAccept (void Function(T)?): 在拖动对象被释放到 DragTarget 区域内时调用，用于处理接受的拖动数据。

  • onLeave (void Function(T)?): 在拖动对象离开 DragTarget 区域时调用。

  • hitTestBehavior (HitTestBehavior): 用于决定点击测试的行为。默认值是 HitTestBehavior.deferToChild，表示点击测试会被委托给子部件。

  • feedback (Widget?): 用于自定义拖动时的反馈部件。

  • child (Widget?): 用于放置在 DragTarget 区域内的子部件。

使用示例

DragTarget<int>(builder: (BuildContext context, List<int?> candidateData, List<dynamic> rejectedData) {return Container(width: 200,height: 200,color: Colors.grey,child: Center(child: Text("Drop here"),),);},onWillAccept: (data) {// 在拖动对象进入 DragTarget 区域时调用// 返回 true 表示接受拖动对象return true;},onAccept: (data) {// 在拖动对象被释放到 DragTarget 区域内时调用// 处理接受的拖动数据print("Accepted data: $data");},onLeave: (data) {// 在拖动对象离开 DragTarget 区域时调用},
)

在这个例子中，DragTarget 是一个大小为 200x200 的灰色容器，上面显示着 “Drop here” 文本。当有拖动对象进入这个容器时，onWillAccept 将被调用，决定是否接受拖动对象。如果返回 true，则 onAccept 将在拖动对象被释放时被调用，处理接受的拖动数据。onLeave 在拖动对象离开 DragTarget 区域时被调用。这种方式可以用来实现拖放交互，其中 DragTarget 接收并处理 Draggable 的数据。

DragTarget 如何接收Draggable传递过来的数据？

DragTarget 通过 onAccept 回调函数接收从 Draggable 拖动传递过来的数据。这个回调函数在拖动对象被释放到 DragTarget 区域时调用。

以下是一个简单的示例，演示了如何使用 Draggable 和 DragTarget 来传递和接收数据：

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('Draggable and DragTarget Example'),),body: MyDraggableAndDragTarget(),),);}
}class MyDraggableAndDragTarget extends StatefulWidget {@override_MyDraggableAndDragTargetState createState() => _MyDraggableAndDragTargetState();
}class _MyDraggableAndDragTargetState extends State<MyDraggableAndDragTarget> {String data = 'Initial Data';@overrideWidget build(BuildContext context) {return Column(mainAxisAlignment: MainAxisAlignment.center,children: [Draggable<String>(data: 'Dragged Data',child: Container(width: 100,height: 100,color: Colors.blue,child: Center(child: Text('Drag Me'),),),feedback: Container(width: 100,height: 100,color: Colors.blue.withOpacity(0.5),child: Center(child: Text('Dragging...'),),),childWhenDragging: Container(width: 100,height: 100,color: Colors.blue.withOpacity(0.5),),),SizedBox(height: 20),DragTarget<String>(builder: (BuildContext context, List<String?> candidateData, List<dynamic> rejectedData) {return Container(width: 150,height: 150,color: Colors.grey,child: Center(child: Text('Drop Here'),),);},onWillAccept: (data) {// 当拖动对象进入 DragTarget 区域时调用// 返回 true 表示接受拖动对象return true;},onAccept: (data) {// 当拖动对象被释放到 DragTarget 区域内时调用// 处理接受的拖动数据setState(() {this.data = data ?? 'No Data';});},onLeave: (data) {// 当拖动对象离开 DragTarget 区域时调用},),SizedBox(height: 20),Text('Received Data: $data'),],);}
}

在这个例子中，Draggable 包含一个文本框，你可以拖动它。DragTarget 是一个灰色容器，当你把文本框拖动到这个容器上时，它将接收拖动的数据，并将接收到的数据显示在屏幕上。

结束语
Flutter是一个由Google开发的开源UI工具包，它可以让您在不同平台上创建高质量、美观的应用程序，而无需编写大量平台特定的代码。我将学习和深入研究Flutter的方方面面。从基础知识到高级技巧，从UI设计到性能优化，欢饮关注一起讨论学习，共同进入Flutter的精彩世界！

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

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

相关文章

知识付费小程序开发：技术实践示例

知识付费小程序开发：技术实践示例

随着知识付费小程序的兴起&#xff0c;让我们一起来看一个简单的示例&#xff0c;使用Node.js和Express框架搭建一个基础的知识付费小程序后端。 首先&#xff0c;确保你已经安装了Node.js和npm。接下来&#xff0c;创建一个新的项目文件夹&#xff0c;然后通过以下步骤创建你…
阅读更多...
适用于 Windows 和 Mac 的 10 款最佳照片恢复软件（免费和付费）

适用于 Windows 和 Mac 的 10 款最佳照片恢复软件（免费和付费）

丢失照片很容易。这里点击错误&#xff0c;那里贴错标签的 SD 卡&#xff0c;然后噗的一声&#xff0c;一切都消失了。值得庆幸的是&#xff0c;在技术领域&#xff0c;你可以纠正一些错误。其中包括删除数据或格式化错误的存储设备。 那么&#xff0c;让我们看看可用于从 SD …
阅读更多...
[c++]—vector类___提升版(带你了解vector底层的运用）

[c++]—vector类___提升版(带你了解vector底层的运用）

我写我 不论主谓宾 可以反复错 &#x1f308;vector的介绍 1.vector是表示可变大小数组的序列容器2.就像数组一样&#xff0c;vector也采用的连续存储空间来存储元素&#xff0c;也就是意味着可以采用下标对vector的元素进行访问&#xff0c;和数组一样高效。但是又不像数组&…
阅读更多...
工业性能CCD图像处理+

工业性能CCD图像处理+

目录 硬件部分 ​编辑 软件部分 CCD新相机的调试处理&#xff08;更换相机处理&#xff0c;都要点执行检测来查看图像变化&#xff09; 问题:新相机拍摄出现黑屏&#xff0c;图像拍摄不清晰&#xff0c;&#xff08;可以点击图像&#xff0c;向下转动鼠标的滚轮&#xff08…
阅读更多...
基于linux系统的Tomcat+Mysql+Jdk环境搭建（一）vmare centos7 设置静态ip和连接MobaXterm

基于linux系统的Tomcat+Mysql+Jdk环境搭建（一）vmare centos7 设置静态ip和连接MobaXterm

特别注意&#xff0c;Windows10以上版本操作系统需要下载安装VMware Workstation Pro16及以上版本&#xff0c;安装方式此处略。 (可忽略 my*** 记录设置的vamare centos7 账号root/aaa 密码&#xff1a;Aa123456 ) 1、命令行和图形界面切换 如果使用的是VMware虚拟机&…
阅读更多...
金智融门户（统一身份认证）同步数据至钉钉通讯录

金智融门户（统一身份认证）同步数据至钉钉通讯录

前言：因全面使用金智融门户和数据资产平台，二十几个信息系统已实现统一身份认证和数据同步，目前单位使用的钉钉尚未同步组织机构和用户信息，职工入职、离职、调岗时都需要手工在钉钉后台操作，一是操作繁琐，二是钉钉通讯录更新不及时或经常遗漏，带来管理问题。通过金智融…
阅读更多...
CAD 审图意见的导出

CAD 审图意见的导出

看图的时候喜欢在图上直接标注意见&#xff0c;但是如果还要再把意见一行一行的导出到word里面就很麻烦&#xff0c;在网上看了一个审图软件&#xff0c;报价要980&#xff0c;而且那个审图意见做的太复杂了。 我的需求就是把图上标的单行文字和多行文字直接导出来就行&#x…
阅读更多...
debug点f8step over会进入class文件

debug点f8step over会进入class文件

File->settings->Bulid.Executiong.Deployment->Debugger->Stepping 取消如图对钩即可
阅读更多...
二十七、读写文件

二十七、读写文件

二十七、读写文件 27.1 文件类QFile #include <QCoreApplication>#include<QFile> #include<QDebug>int main(int argc, char *argv[]) {QCoreApplication a(argc, argv);QFile file("D:/main.txt");if(!file.open(QIODevice::WriteOnly | QIODe…
阅读更多...
three.js模拟太阳系

three.js模拟太阳系

地球的旋转轨迹目前设置为了圆形&#xff0c;效果&#xff1a; <template><div><el-container><el-main><div class"box-card-left"><div id"threejs" style"border: 1px solid red"></div><div c…
阅读更多...
idea第一次提交到git（码云）

idea第一次提交到git（码云）

1.先创建一个仓库 2.将idea和仓库地址绑定 2.将idea和仓库地址绑定
阅读更多...
CentOS 7系统加固详细方案SSH FTP MYSQL加固

CentOS 7系统加固详细方案SSH FTP MYSQL加固

一、删除后门账户 修改强口令 1、修改改密码长度需要编译login.defs文件 vi /etc/login.defs PASS_MIN_LEN 82、注释掉不需要的用户和用户组 或者 检查是否存在除root之外UID为0的用户 使用如下代码&#xff0c;对passwd文件进行检索&#xff1a; awk -F : ($30){print $1) …
阅读更多...
『K8S 入门』二：深入 Pod

『K8S 入门』二：深入 Pod

『K8S 入门』二&#xff1a;深入 Pod 一、基础命令 获取所有 Pod kubectl get pods2. 获取 deploy kubectl get deploy3. 删除 deploy&#xff0c;这时候相应的 pod 就没了 kubectl delete deploy nginx4. 虽然删掉了 Pod&#xff0c;但是这是时候还有 service&#xff0c…
阅读更多...
轻松搭建FPGA开发环境：第三课——Vivado 库编译与设置说明

轻松搭建FPGA开发环境：第三课——Vivado 库编译与设置说明

工欲善其事必先利其器&#xff0c;很多人想从事FPGA的开发&#xff0c;但是不知道如何下手。既要装这个软件&#xff0c;又要装那个软件&#xff0c;还要编译仿真库&#xff0c;网上的教程一大堆&#xff0c;不知道到底应该听谁的。所以很多人还没开始就被繁琐的开发环境搭建吓…
阅读更多...
电子学会C/C++编程等级考试2021年06月（六级）真题解析

电子学会C/C++编程等级考试2021年06月（六级）真题解析

C/C++等级考试（1~8级）全部真题・点这里 第1题：逆波兰表达式 逆波兰表达式是一种把运算符前置的算术表达式，例如普通的表达式2 + 3的逆波兰表示法为+ 2 3。逆波兰表达式的优点是运算符之间不必有优先级关系，也不必用括号改变运算次序，例如(2 + 3) * 4的逆波兰表示法为* +…
阅读更多...
智能优化算法应用：基于动物迁徙算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用：基于动物迁徙算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于动物迁徙算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于动物迁徙算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.动物迁徙算法4.实验参数设定5.算法结果6.…
阅读更多...
不同的葡萄酒瓶盖会影响葡萄酒饮用的体验

不同的葡萄酒瓶盖会影响葡萄酒饮用的体验

首先&#xff0c;不同的葡萄酒瓶盖会影响我们找到想要喝的葡萄酒的难易程度。螺旋盖、Zork瓶塞和起泡酒“蘑菇形瓶塞”赢得了直接的满足感&#xff0c;它们只需要拔瓶塞不需要开瓶器。来自云仓酒庄品牌雷盛红酒分享对于所有其他的酒瓶封口&#xff0c;我们都需要一个工具来打开…
阅读更多...
论文阅读——Mask DINO（cvpr2023）

论文阅读——Mask DINO（cvpr2023）

DINO是检测&#xff0c;Mask DINO是检测分割。 几个模型对比&#xff1a; 传统的检测分割中&#xff0c;检测头和分割头是平行的&#xff0c;Mask DINO使用二分图匹配bipartite matching提高匹配结果的准确性。 box对大的类别不计算损失&#xff0c;因为太大了&#xff0c;会…
阅读更多...
Mac安装Typora实现markdown自由

Mac安装Typora实现markdown自由

一、什么是markdown Markdown 是一种轻量级标记语言&#xff0c;创始人为约翰格鲁伯&#xff08;John Gruber&#xff09;。 它允许人们使用易读易写的纯文本格式编写文档&#xff0c;然后转换成有效的 XHTML&#xff08;或者HTML&#xff09;文档。这种语言吸收了很多在电子邮…
阅读更多...
verilog语法进阶-移位寄存器原语-单输入单输出

verilog语法进阶-移位寄存器原语-单输入单输出

概述 verilog c代码 module primitive1(input clk , // system clock 50Mhz on boardinput rst_n, // system rst, low active input a , output y1, // output signaloutput y // output signal);SRLC16_1 #(.INIT(16h0000) // Initial Value of Shift Register ) SRLC16_1…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023