当前位置: 首页 > 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;让…...

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统,利用大模型实现智能 UI 自动化,结合计算机视觉和自然语言处理技术,实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

Java面试专项一-准备篇

一、企业简历筛选规则 一般企业的简历筛选流程&#xff1a;首先由HR先筛选一部分简历后&#xff0c;在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如&#xff1a;Boss直聘&#xff08;招聘方平台&#xff09; 直接按照条件进行筛选 例如&#xff1a…...

如何理解 IP 数据报中的 TTL?

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

宇树科技,改名了!

提到国内具身智能和机器人领域的代表企业&#xff0c;那宇树科技&#xff08;Unitree&#xff09;必须名列其榜。 最近&#xff0c;宇树科技的一项新变动消息在业界引发了不少关注和讨论&#xff0c;即&#xff1a; 宇树向其合作伙伴发布了一封公司名称变更函称&#xff0c;因…...

在 Spring Boot 项目里,MYSQL中json类型字段使用

前言&#xff1a; 因为程序特殊需求导致&#xff0c;需要mysql数据库存储json类型数据&#xff0c;因此记录一下使用流程 1.java实体中新增字段 private List<User> users 2.增加mybatis-plus注解 TableField(typeHandler FastjsonTypeHandler.class) private Lis…...