当前位置: 首页 > news >正文

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的精彩世界!

相关文章:

Flutter DragTarget拖拽控件详解

文章目录 1. DragTarget 控件的构造函数主要参数&#xff1a; 2. DragTarget 的工作原理3. 常见用法示例 1&#xff1a;实现一个简单的拖拽目标解释&#xff1a;示例 2&#xff1a;与 Draggable 结合使用解释&#xff1a; 4. DragTarget 的回调详解5. 总结 DragTarget 是 Flutt…...

操作系统动态分区分配算法-首次适应算法c语言实现

目录 一、算法原理 二、算法特点 1.优先利用低址空闲分区&#xff1a; 2.查找开销&#xff1a; 3.内存碎片&#xff1a; 三、内存回收四种情况 1.回收区上面&#xff08;或后面&#xff09;的分区是空闲分区&#xff1a; 2.回收区下面&#xff08;或前面&#xff09;的…...

mybatis-plus自动填充时间的配置类实现

mybatis-plus自动填充时间的配置类实现 在实际操作过程中&#xff0c;我们并不希望创建时间、修改时间这些来手动进行&#xff0c;而是希望通过自动化来完成&#xff0c;而mybatis-plus则也提供了自动填充功能来实现这一操作&#xff0c;接下来&#xff0c;就来了解一下mybatis…...

Vite内网ip访问,两种配置方式和修改端口号教程

目录 问题 两种解决方式 结果 总结 preview.host preview.port 问题 使用vite运行项目的时候&#xff0c;控制台会只出现127.0.0.1&#xff08;localhost&#xff09;本地地址访问项目。不可以通过公司内网ip访问&#xff0c;其他团队成员无法访问&#xff0c;这是因为没…...

【星海随笔】删除ceph

cephadm shell ceph osd set noout ceph osd set norecover ceph osd set norebalance ceph osd set nobackfill ceph osd set nodown ceph osd set pause参考文献&#xff1a; https://blog.csdn.net/lyf0327/article/details/90294011 systemctl stop ceph-osd.targetyum re…...

HarmonyOS NEXT实战:自定义封装多种样式导航栏组件

涉及知识点和装饰器 ComponentV2&#xff0c;Local&#xff0c; Builder&#xff0c;BuilderParam&#xff0c;Extend&#xff0c; Require &#xff0c;Param&#xff0c;Event等第三方库&#xff1a;ZRouter &#xff0c;如项目中本来就用了ZRouter路由库&#xff0c;案例中…...

大数据面试笔试宝典之Flink面试

1.Flink 是如何支持批流一体的? F link 通过一个底层引擎同时支持流处理和批处理. 在流处理引擎之上,F link 有以下机制: 1)检查点机制和状态机制:用于实现容错、有状态的处理; 2)水印机制:用于实现事件时钟; 3)窗口和触发器:用于限制计算范围,并定义呈现结果的…...

pytorch整体环境打包安装到另一台电脑上

步骤一&#xff1a;安装conda-pack 首先利用 pip list 指令检查conda环境安装在哪里&#xff0c;在系统环境&#xff08;base&#xff09;下&#xff0c;于是我是使用的conda指令完成的。 # 使用Conda安装&#xff08;如果已安装conda&#xff09; conda install conda-pack …...

PostgreSQL 数据库连接

title: PostgreSQL 数据库连接 date: 2024/12/29 updated: 2024/12/29 author: cmdragon excerpt: PostgreSQL是一款功能强大的开源关系数据库管理系统,在现代应用中广泛应用于数据存储和管理。连接到数据库是与PostgreSQL进行交互的第一步,这一过程涉及到多个方面,包括连…...

【算法】复杂性理论初步

六、算法复杂性初步 重要的复杂性类 P P P 的定义 多项式时间内可解的问题 若 L ∈ P L∈P L∈P&#xff0c;则存在确定性多项式时间的图灵机 M M M&#xff0c;使得 M ( x ) 1 ⟺ x ∈ L M(x)1⟺x∈L M(x)1⟺x∈L N P NP NP 的定义 多项式时间内可验证验证解的正确性 &…...

HarmonyOS NEXT应用开发实战:免费练手的网络API接口分享

学习一项技能&#xff0c;最好也最快的办法就是直接动手实战。在实战中不断的总结经验和收获成就感。这里分享些好用且免费的网络API练手接口&#xff0c;这对于想要提升自己网络开发能力的开发者来说&#xff0c;无疑是极大的福音。今天&#xff0c;我将详细介绍一个API接口集…...

C++的第一个程序

前言 在学习c之前&#xff0c;你一定还记得c语言的第一个程序 当时刚刚开始进行语言学习 因此告诉到&#xff0c;仅仅需要记住就可以 #include <stdio.h>int main(){printf("Hello World");return 0; }而对于c中的第一个程序&#xff0c;似乎有所变化 C的…...

Java 中 Stream 流的使用详解

Java 中 Stream 流的使用详解 什么是 Stream&#xff1f; Stream 是 Java 8 引入的一种全新的操作集合的方式。它支持通过声明性方式对集合进行复杂的数据操作&#xff08;如过滤、排序、聚合等&#xff09;&#xff0c;避免使用大量的 for 循环&#xff0c;提高代码的可读性…...

【UE5.3.2】生成vs工程并rider打开

Rider是跨平台的,UE也是,当前现在windows上测试首先安装ue5.3.2 会自动有右键的菜单: windows上,右键,生成vs工程 生成的结果 sln默认是vs打开的,我的是vs2022,可以open with 选择 rider :Rider 会弹出 RiderLink是什么插...

ssh免密码登陆配置

ssh 命令本身不支持直接在命令中带上密码&#xff0c;出于安全考虑&#xff0c;SSH 协议不允许将密码明文写在命令中。直接在命令行中输入密码是一种不推荐的做法&#xff0c;因为它会暴露密码&#xff0c;增加安全风险。 如果你希望实现自动化登录而不手动输入密码&#xff0…...

Hive之import和export使用详解

在hive-0.8.0后引入了import/export命令。 Export命令可以导出一张表或分区的数据和元数据信息到一个输出位置&#xff0c;并且导出数据可以被移动到另一个hadoop集群或hive实例&#xff0c;并且可以通过import命令导入数据。 当导出一个分区表&#xff0c;原始数据可能在hdf…...

数据库锁的深入探讨

数据库锁&#xff08;Database Lock&#xff09;是多用户环境中用于保证数据一致性和隔离性的机制。随着数据库系统的发展&#xff0c;特别是在高并发的场景下&#xff0c;锁的机制变得尤为重要。通过使用锁&#xff0c;数据库能够防止并发操作导致的数据冲突或不一致。本文将深…...

【每日学点鸿蒙知识】沉浸式状态栏、类似ref 属性功能属性实现、自定义对话框背景透明、RichEditor粘贴回调、自动滚动列表

1、HarmonyOS 沉浸式状态栏&#xff1f; 实现沉浸式状态栏功能时&#xff0c;能够实现&#xff0c;但是目前每个自定义组件都需要padding top 状态栏的高度才行&#xff0c;有办法实现统一设置吗&#xff1f;不需要每个自定义组件中都padding top 状态栏的高度&#xff1f; 暂…...

Hive刷分区MSCK

一、MSCK刷分区 我们平时通常是通过alter table add partition方式增加Hive的分区的&#xff0c;但有时候会通过HDFS put/cp命令或flink、flum程序往表目录下拷贝分区目录&#xff0c;如果目录多&#xff0c;需要执行多条alter语句&#xff0c;非常麻烦。Hive提供了一个"…...

在Ubuntu下通过Docker部署Mastodon服务器

嘿&#xff0c;朋友们&#xff0c;今天咱们来聊聊如何在Ubuntu上通过Docker部署Mastodon服务器。想要拥有自己的社交媒体平台&#xff1f;Mastodon就是个不错的选择&#xff01;&#x1f310;&#x1f680; Docker与Mastodon简介 Docker是一个开源的容器化平台&#xff0c;让…...

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

.Net框架,除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎?2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长,文件大。2.其次,树深,IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

【RockeMQ】第2节|RocketMQ快速实战以及核⼼概念详解(二)

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

Netty从入门到进阶(二)

二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架&#xff0c;用于…...

Windows安装Miniconda

一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...

[论文阅读]TrustRAG: Enhancing Robustness and Trustworthiness in RAG

TrustRAG: Enhancing Robustness and Trustworthiness in RAG [2501.00879] TrustRAG: Enhancing Robustness and Trustworthiness in Retrieval-Augmented Generation 代码&#xff1a;HuichiZhou/TrustRAG: Code for "TrustRAG: Enhancing Robustness and Trustworthin…...