Flutter DragTarget拖拽控件详解

在这里插入图片描述

文章目录

      • 1. `DragTarget` 控件的构造函数
        • 主要参数:
      • 2. `DragTarget` 的工作原理
      • 3. 常见用法
        • 示例 1:实现一个简单的拖拽目标
        • 解释:
        • 示例 2:与 `Draggable` 结合使用
        • 解释:
      • 4. `DragTarget` 的回调详解
      • 5. 总结

DragTarget 是 Flutter 中用于处理拖拽操作的控件,它定义了一个区域,允许你将其他控件(通常是通过 Draggable 控件实现的可拖拽物体)拖拽到该区域,并在拖拽结束时根据情况更新该区域的内容或执行其他操作。

1. DragTarget 控件的构造函数

DragTarget<T>({Key? key,required WillAccept<T> onWillAccept,  // 拖拽对象是否可以接受required void Function(DragTargetDetails<T> details) onAccept,  // 拖拽对象被接受时执行的回调void Function(DragTargetDetails<T> details)? onEnter,  // 拖拽对象进入目标区域时执行的回调void Function(DragTargetDetails<T> details)? onLeave,  // 拖拽对象离开目标区域时执行的回调void Function(DragTargetDetails<T> details)? onCancel,  // 拖拽对象取消时执行的回调double? elevation,  // 控件的阴影高度Color? color,  // 控件的背景色TextStyle? textStyle,  // 控件的文本样式bool? feedback,  // 控件是否启用反馈效果
})
主要参数:
  • onWillAccept:一个函数,决定拖拽的对象是否可以接受。返回 truefalse
  • onAccept:当拖拽对象被接受时触发的回调函数。接收一个 DragTargetDetails 参数,包含了拖拽的数据。
  • onEnter:当拖拽对象进入 DragTarget 区域时调用。接收 DragTargetDetails,可以用来更新界面,如改变颜色。
  • onLeave:当拖拽对象离开 DragTarget 区域时调用。
  • onCancel:当拖拽对象被取消时触发,用来做一些撤销操作。
  • elevation:用于设置 DragTarget 区域的阴影效果,通常影响视觉层次感。
  • color:设置 DragTarget 的背景颜色。
  • textStyle:设置文本样式。
  • feedback:控制是否显示拖拽反馈。

2. DragTarget 的工作原理

  • DragTarget 负责接收从其他控件(如 Draggable)拖拽过来的数据,并决定是否处理这些数据。它通过回调函数来响应拖拽事件。

  • 拖拽的过程包括:

    1. 拖拽对象进入 DragTarget 区域。
    2. 拖拽对象悬停在目标区域内。
    3. 拖拽对象离开目标区域。
    4. 拖拽对象被放置到目标区域内。
  • onWillAccept 用来判断拖拽对象是否可以被接受,onEnteronLeave 用来响应拖拽对象进入或离开区域的动作,onAccept 则在拖拽成功放置后触发。


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('DragTarget Example')),body: Center(child: DragTarget<int>(onWillAccept: (data) => data != null,  // 允许接收非空的数据onAccept: (data) {ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Received data: $data')),);},builder: (context, candidateData, rejectedData) {return Container(width: 200,height: 200,color: Colors.blue,child: Center(child: Text('Drag here')),);},),),),);}
}
解释:
  • 在这个简单的例子中,DragTarget<int> 用来接收类型为 int 的数据。
  • onWillAccept 判断是否接受数据,如果数据不为 null 则返回 true
  • onAccept 被调用时显示一个 SnackBar,显示接收到的数据。
  • builder 构建 DragTarget 区域的 UI,在这个例子中是一个蓝色的方形区域。

示例 2:与 Draggable 结合使用
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('DragTarget with Draggable')),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Draggable<int>(data: 42,  // 传递的数据child: CircleAvatar(radius: 50.0,child: Text('Drag Me'),),feedback: Material(color: Colors.transparent,child: CircleAvatar(radius: 50.0,backgroundColor: Colors.blue,child: Text('Dragging'),),),childWhenDragging: CircleAvatar(radius: 50.0,backgroundColor: Colors.grey,child: Text('Gone'),),),SizedBox(height: 50),DragTarget<int>(onWillAccept: (data) => data != null,  // 允许接收数据onAccept: (data) {ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Dropped: $data')),);},builder: (context, candidateData, rejectedData) {return Container(width: 200,height: 200,color: Colors.orange,child: Center(child: Text('Drop Here')),);},),],),),),);}
}
解释:
  • 在此示例中,Draggable 控件创建了一个可拖拽的圆形,用户可以将它拖拽到下方的 DragTarget 区域。
  • Draggabledata 参数传递了一个整数(42)。当拖拽对象被放置到 DragTarget 区域时,onAccept 回调被触发,显示一个 SnackBar,告知接收到的数据。

4. DragTarget 的回调详解

  • onWillAccept:此回调决定是否接受拖拽的对象。它接收拖拽的数据作为参数,返回一个布尔值,表示是否接受该数据。如果返回 true,表示可以放置数据;否则,数据将被拒绝。

  • onEnter:此回调在拖拽对象进入 DragTarget 区域时触发,可以用来改变目标区域的样式(例如改变颜色),提示用户目标区域准备好接受拖拽对象。

  • onLeave:此回调在拖拽对象离开 DragTarget 区域时触发,可以用来恢复区域的样式。

  • onAccept:此回调在拖拽对象成功放置在目标区域时触发,可以用于处理拖拽成功后需要执行的逻辑(例如更新界面、保存数据等)。

  • onCancel:当拖拽操作被取消时(例如拖拽对象超出了目标区域并没有被放置),会调用该回调。


5. 总结

  • DragTarget 是 Flutter 中处理拖拽操作的控件,提供了多种回调函数来控制拖拽行为。
  • 它与 Draggable 控件配合使用,实现复杂的拖拽交互。
  • DragTarget 支持灵活的 UI 设计,可以根据拖拽状态动态更新 UI,提供良好的用户体验。

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

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

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

相关文章

【Rhino】【Python】将beam线的端点沿着自身方向移动到column轮廓线上

#codingutf-8 import rhinoscriptsyntax as rs import Rhino.Geometry as rgdef extend_lines_to_columns():print("开始运行脚本...")# 定义要处理的图层名称beam_layer "Make2D::Visible::Curves::02 STR. SOLID MAMBER::1*.1.BEAM MAIN (UNIONED)"colu…

Huggingface数据集采样之后得到的arrow文件无法用Dataset.load_from_disk加载解决方法

问题起源 我现在有数据集 我想要采样1/10构成一个新的数据集。起初我只是简单的使用save_to_disk保存&#xff0c;如下代码&#xff1a; from datasets import Dataset import os# 原数据集路径 source_dataset_path "~/.cache/huggingface/datasets/allenai___tulu-3-…

js版本之ES6特性简述【Proxy、Reflect、Iterator、Generator】(五)

目录 Proxy Reflect 静态方法 部分实例 Iterator 实际开发迭代器的使用实例 迭代器&#xff08;Iterator&#xff09;应用 Generator Proxy Proxy 是 ES6 中新增的对象 Proxy 是JavaScript中的内置对象&#xff0c;它提供了一种机制&#xff0c;可以拦截并自定义各种…

React 组件通信完整指南 以及 自定义事件发布订阅系统

React 组件通信完整指南 1. 父子组件通信 1.1 父组件向子组件传递数据 // 父组件 function ParentComponent() {const [data, setData] useState(Hello from parent);return <ChildComponent message{data} />; }// 子组件 function ChildComponent({ message }) {re…

mac中idea菜单工具栏没有git图标了

1.右击菜单工具栏 2.选中VCS&#xff0c;点击添加 3.搜索你要的工具&#xff0c;选中点击确定就添加了 4.回到上面一个界面&#xff0c;选中你要放到工具栏的工具&#xff0c;点击应用就好了 5.修改图标&#xff0c;快捷键或者右击选中编辑图标 6.选择你要的图标就好了

Linux实验报告7-文件管理

目录 一&#xff1a;实验目的 二&#xff1a;实验内容 (1)查看/etc/inittab文件的权限属性&#xff0c;并指出该文件的所有者以及文件所属组群。 (2)新建文件test&#xff0c;设置文件权限为r--r-----。 (3)新建文件test2&#xff0c;设系统中有用户study和用户组studygr…

CPT203 Software Engineering 软件工程 Pt.4 软件设计(中英双语)

文章目录 6. 设计概念6.1 Principle6.2 Concepts6.2.1 General design concepts&#xff08;常见的设计概念&#xff09;6.2.1.1 Abstraction&#xff08;抽象&#xff09;6.2.1.2 Modularity&#xff08;模块化&#xff09;6.2.1.3 Functional independence&#xff08;功能独…

JSON 系列之4:JSON_VALUE

JSON_VALUE的作用&#xff0c;简单来说&#xff0c;就是从JSON到SQL&#xff1a; SQL/JSON function JSON_VALUE selects JSON data and returns a SQL scalar or an instance of a user-defined SQL object type or SQL collection type (varray, nested table) 所以&#xff…

[wzoi]Help Bubu

题目描述: Bubu的书架上乱成一团了&#xff01;请帮助他一下吧&#xff01; 他的书架上一共有n本书。我们定义混乱值是连续相同高度书本的段数。例如&#xff0c;如果输的高度是30,30,31,31,32&#xff0c;那么混乱值为3,30,32,32,31的混乱度也是3&#xff0c;但31,32,31,32,…

嵌入式AI STM32部署卷积神经网络的魔法棒

基于STM32部署卷积神经网络控制设备方案-AI项目-STM32部署卷积神经网络方案-红外信号复制方案-轨迹识别 项目包含下述内容 硬件部分、PCB制板、BOM表文件等等 (Hardware)外壳、3D打印文件 (3D_print)软件程序、用于电子法棒的软件程序 AI Keil等等(Software)QT上位机动作识别…

【代码分析】Unet-Pytorch

1&#xff1a;unet_parts.py 主要包含&#xff1a; 【1】double conv&#xff0c;双层卷积 【2】down&#xff0c;下采样 【3】up&#xff0c;上采样 【4】out conv&#xff0c;输出卷积 """ Parts of the U-Net model """import torch im…

[Leetcode] 最大子数组和 [击败99%的解法]

解法1&#xff1a; 暴力解法 遍历每个元素&#xff0c;从它当前位置一直加到最后&#xff0c;然后用一个最大值来记录全局最大值。 代码如下&#xff1a; class Solution {public int maxSubArray(int[] nums) {long sum, max nums[len-1];for (int i0; i<nums.length;…

系统压力测试助手——stress-ng

1、背景 在系统性能测试和压力测试中&#xff0c;stress-ng 是一个非常强大的工具&#xff0c;广泛应用于对 Linux 系统进行各种硬件和软件方面的负载测试。它能够模拟多种极端负载情况&#xff0c;帮助开发人员和运维人员检查系统在高负载下的表现&#xff0c;以便发现潜在的…

计算机网络500题2024-2025学年度第一学期复习题库(选择、判断、填空)

一、单选题 1、&#xff08; &#xff09;是实现两个同种网络互连的设备 A. 网桥 B. 网关 C. 集线器 D. 路由器 2、10M以太网有三种接口标准&#xff0c;其中10BASE-T采用&#xff08; &#xff09; A. 双绞线 B. 粗同轴电缆 C. 细同轴电缆 D. 光纤 3、HDLC是哪…

在JavaScript文件中定义方法和数据(不是在对象里定以数据和方法,不要搞错了)

在对象里定以数据和方法看这一篇 对象字面量内定义属性和方法&#xff08;什么使用const等关键字&#xff0c;什么时候用键值对&#xff09;-CSDN博客https://blog.csdn.net/m0_62961212/article/details/144788665 下是在JavaScript文件中定义方法和数据的基本方式&#xff…

基于SpringBoot的垃圾分类系统设计与实现【源码+文档+部署讲解】

系统介绍 基于SpringBootVue实现的垃圾分类系统设计了三种角色、分别是管理员、垃圾分类管理员、用户&#xff0c;实现了个人中心、用户管理、垃圾分类管理员管理、垃圾分类管理、垃圾类型管理、垃圾图谱管理、系统管理等功能 技术选型 开发工具&#xff1a;idea2020.3Webst…

今日总结 2024-12-28

今天全身心投入到鸿蒙系统下 TCPSocket 的学习中。从最基础的 TCP 协议三次握手、四次挥手原理重新梳理&#xff0c;深刻理解其可靠连接建立与断开机制&#xff0c;这是后续运用 TCPSocket 无误通信的根基。在深入鸿蒙体系时&#xff0c;仔细研读了其为 TCPSocket 封装的 API&a…

springboot启动不了 因一个spring-boot-starter-web底下的tomcat-embed-core依赖丢失

这个包丢失了 启动不了 起因是pom中加入了 <tomcat.version></tomcat.version>版本指定&#xff0c;然后idea自动编译后&#xff0c;包丢了&#xff0c;删除这个配置后再也找不回来&#xff0c; 这个包正常在 <dependency><groupId>org.springframe…

前后端分离(对话框的使用)

1.首先先定义两个按钮(一个添加按钮&#xff0c;一个修改按钮) <el-button type"primary" click"openDialog(true)">添加员工</el-button> <el-button size"mini" click"openDialog(false, scope.row)">编辑</…

doris集群存储目录切换

doris集群存储目录切换 1. 背景 3节点集群&#xff0c;BE存储目录&#xff0c;因为运维原因。存储盘系统放在了一一起。 需要增加硬盘&#xff0c;并替换原有目录。 3节点集群&#xff0c;如果各个表都是3副本&#xff0c;可以实现轮流停机&#xff0c;方式处理。 但是业务…