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

本文主要是介绍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 {Widget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('Draggable and DragTarget Example'),),body: MyDraggableAndDragTarget(),),);}
}class MyDraggableAndDragTarget extends StatefulWidget {_MyDraggableAndDragTargetState createState() => _MyDraggableAndDragTargetState();
}class _MyDraggableAndDragTargetState extends State<MyDraggableAndDragTarget> {String data = 'Initial Data';Widget 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的精彩世界!

这篇关于Flutter实现Android拖动到垃圾桶删除效果-Draggable和DragTarget的详细讲解的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/488586

相关文章

hdu1043(八数码问题,广搜 + hash(实现状态压缩) )

利用康拓展开将一个排列映射成一个自然数,然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu

电脑桌面文件删除了怎么找回来?别急,快速恢复攻略在此

在日常使用电脑的过程中,我们经常会遇到这样的情况:一不小心,桌面上的某个重要文件被删除了。这时,大多数人可能会感到惊慌失措,不知所措。 其实,不必过于担心,因为有很多方法可以帮助我们找回被删除的桌面文件。下面,就让我们一起来了解一下这些恢复桌面文件的方法吧。 一、使用撤销操作 如果我们刚刚删除了桌面上的文件,并且还没有进行其他操作,那么可以尝试使用撤销操作来恢复文件。在键盘上同时按下“C

【C++】_list常用方法解析及模拟实现

相信自己的力量,只要对自己始终保持信心,尽自己最大努力去完成任何事,就算事情最终结果是失败了,努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一:什么是list? •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二:list常用接口 •🌰1.默认成员函数 🔥构造函数(⭐) 🔥析构函数 •🌰2.list对象

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全栈,前后端开发,小程序开发,人工智能,js逆向,App逆向,网络系统安全,数据分析,Django,fastapi

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现,因为rasa本身是带有remindschedule模块的。不过经过一番折腾后,忽然发现,chatbot上实现的定时,语音助手不一定会有响应。因为,我目前语音助手的代码设置了长时间无应答会结束对话,这样一来,chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢? 我最后选择的方法是用threading.Time

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸(两张壁纸可不一致)

客户有些需求需要设置默认壁纸和锁屏壁纸  在默认情况下 这两个壁纸是相同的  如果需要默认的锁屏壁纸和桌面壁纸不一样 需要额外修改 Android13实现 替换默认桌面壁纸: 将图片文件替换frameworks/base/core/res/res/drawable-nodpi/default_wallpaper.*  (注意不能是bmp格式) 替换默认锁屏壁纸: 将图片资源放入vendo

C#实战|大乐透选号器[6]:实现实时显示已选择的红蓝球数量

哈喽,你好啊,我是雷工。 关于大乐透选号器在前面已经记录了5篇笔记,这是第6篇; 接下来实现实时显示当前选中红球数量,蓝球数量; 以下为练习笔记。 01 效果演示 当选择和取消选择红球或蓝球时,在对应的位置显示实时已选择的红球、蓝球的数量; 02 标签名称 分别设置Label标签名称为:lblRedCount、lblBlueCount

Android平台播放RTSP流的几种方案探究(VLC VS ExoPlayer VS SmartPlayer)

技术背景 好多开发者需要遴选Android平台RTSP直播播放器的时候,不知道如何选的好,本文针对常用的方案,做个大概的说明: 1. 使用VLC for Android VLC Media Player(VLC多媒体播放器),最初命名为VideoLAN客户端,是VideoLAN品牌产品,是VideoLAN计划的多媒体播放器。它支持众多音频与视频解码器及文件格式,并支持DVD影音光盘,VCD影

Kubernetes PodSecurityPolicy:PSP能实现的5种主要安全策略

Kubernetes PodSecurityPolicy:PSP能实现的5种主要安全策略 1. 特权模式限制2. 宿主机资源隔离3. 用户和组管理4. 权限提升控制5. SELinux配置 💖The Begin💖点点关注,收藏不迷路💖 Kubernetes的PodSecurityPolicy(PSP)是一个关键的安全特性,它在Pod创建之前实施安全策略,确保P

防近视护眼台灯什么牌子好?五款防近视效果好的护眼台灯推荐

在家里,灯具是属于离不开的家具,每个大大小小的地方都需要的照亮,所以一盏好灯是必不可少的,每个发挥着作用。而护眼台灯就起了一个保护眼睛,预防近视的作用。可以保护我们在学习,阅读的时候提供一个合适的光线环境,保护我们的眼睛。防近视护眼台灯什么牌子好?那我们怎么选择一个优秀的护眼台灯也是很重要,才能起到最大的护眼效果。下面五款防近视效果好的护眼台灯推荐: 一:六个推荐防近视效果好的护眼台灯的