【Compose multiplatform教程25】拖放操作

目前,拖放操作仅在 Compose 多平台的桌面端受到支持。在未来的版本中,这一支持将会扩展至 iOS 平台以及网页端。

你可以让你的 Compose 多平台应用能够接收用户从其他应用程序拖入其中的数据,或者允许用户将数据拖出你的应用。要实现这一点,可使用 “dragAndDropSource”(拖放源)和 “dragAndDropTarget”(拖放目标)修饰符来指定特定的可组合项作为拖放操作潜在的源或目标。

“dragAndDropSource”(拖放源)和 “dragAndDropTarget”(拖放目标)这两个修饰符均处于试验阶段,可能会发生变化,并且需要使用选择加入(opt-in)注解。

创建一个拖放源

要将一个可组合项设置为拖放源,需按以下步骤进行:

使用 detectDragGestures() 函数(例如,在 onDragStart 时)来选定拖放事件的触发条件。

调用 startTransfer() 函数,并通过 DragAndDropTransferData() 调用描述拖放会话。

通过 DragAndDropTransferable() 调用描述本应被拖放到目标位置的数据。

以下是一个 Box() 可组合项示例,它允许用户从中拖出一个字符串:

val exportedText = "Hello, drag and drop!"Box(Modifier.dragAndDropSource(// Creates a visual representation of the data being dragged// (white rectangle with the exportedText string centered on it).drawDragDecoration = {drawRect(color = Color.White,topLeft = Offset(x = 0f, y = size.height/4),size = Size(size.width, size.height/2))val textLayoutResult = textMeasurer.measure(text = AnnotatedString(exportedText),layoutDirection = layoutDirection,density = this)drawText(textLayoutResult = textLayoutResult,topLeft = Offset(x = (size.width - textLayoutResult.size.width) / 2,y = (size.height - textLayoutResult.size.height) / 2,))}) {detectDragGestures(onDragStart = { offset ->startTransfer(// Defines transferable data and supported transfer actions.// When an action is concluded, prints the result into// system output with onTransferCompleted().DragAndDropTransferData(transferable = DragAndDropTransferable(StringSelection(exportedText)),// List of actions supported by this drag source. A type of action// is passed to the drop target together with data.// The target can use this to reject an inappropriate drop operation// or to interpret user expectations.supportedActions = listOf(DragAndDropTransferAction.Copy,DragAndDropTransferAction.Move,DragAndDropTransferAction.Link,),dragDecorationOffset = offset,onTransferCompleted = { action ->println("Action at the source: $action")}))},onDrag = { _, _ -> },)}.size(200.dp).background(Color.LightGray)
) {Text("Drag Me", Modifier.align(Alignment.Center))
}

创建一个拖放目标

要将一个可组合项设置为拖放目标,需按以下步骤进行:

在 shouldStartDragAndDrop lambda 表达式中描述可组合项成为拖放目标的条件。

创建(并记住)DragAndDropTarget 对象,该对象将包含你为拖放事件处理程序重写的内容。

编写必要的重写内容,例如,使用 onDrop 来解析接收到的数据,或者当可拖动对象进入可组合项时使用 onEntered 进行相应处理。

以下是一个准备好显示被拖入其中的文本的 Box() 可组合项示例:

var showTargetBorder by remember { mutableStateOf(false) }
var targetText by remember { mutableStateOf("Drop Here") }
val coroutineScope = rememberCoroutineScope()
val dragAndDropTarget = remember {object: DragAndDropTarget {// Highlights the border of a potential drop targetoverride fun onStarted(event: DragAndDropEvent) {showTargetBorder = true}override fun onEnded(event: DragAndDropEvent) {showTargetBorder = false}override fun onDrop(event: DragAndDropEvent): Boolean {// Prints the type of action into system output every time// a drag-and-drop operation is concluded.println("Action at the target: ${event.action}")val result = (targetText == "Drop here")// Changes the text to the value dropped into the composable.targetText = event.awtTransferable.let {if (it.isDataFlavorSupported(DataFlavor.stringFlavor))it.getTransferData(DataFlavor.stringFlavor) as Stringelseit.transferDataFlavors.first().humanPresentableName}// Reverts the text of the drop target to the initial// value after 2 seconds.coroutineScope.launch {delay(2000)targetText = "Drop here"}return result}}
}Box(Modifier.size(200.dp).background(Color.LightGray).then(if (showTargetBorder)Modifier.border(BorderStroke(3.dp, Color.Black))elseModifier).dragAndDropTarget(// With "true" as the value of shouldStartDragAndDrop,// drag-and-drop operations are enabled unconditionally.shouldStartDragAndDrop = { true },target = dragAndDropTarget)
) {Text(targetText, Modifier.align(Alignment.Center))
}

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

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

相关文章

有什么AI辅助阅读文献工具推荐?

AI的发展速度非常快,在很多方面都已经可以提供货真价实的辅助能力。 比如AI辅助阅读方面,可以获取、分析和理解大量文献资料。这可以帮助我们快速浏览和理解PDF文件和其他文档,提高我们的工作效率和学习效率,达到降本增效。 作为…

各个Spring Cloud版本有何主要差异

Spring Cloud 的各个版本之间确实存在一些关键差异,这些差异主要体现在功能更新、性能优化、对新技术的支持以及对旧有技术的替代等方面。 1. Spring Cloud Dalston 这是 Spring Cloud 的一个早期版本,它提供了微服务架构所需的基本组件,如服…

【翻译】审慎对齐:推理使更安全的语言模型成为可能

原文:https://arxiv.org/abs/2412.16339 出自OpenAI 摘要 随着大规模语言模型对安全关键领域的影响越来越大,确保它们可靠地遵守定义良好的原则仍然是一个基本挑战。本文提出慎思校准,一种新的范式,直接教模型安全规范&#xff…

1、ELK的架构和安装

ELK简介 elk:elasticsearch logstash kibana,统一日志收集系统。 elasticsearch:分布式的全文索引引擎的非关系数据库,json格式,在elk中存储所有的日志信息,架构有主和从,最少需要2台。 …

使用连字符容易出错,尽量使用驼峰式的

在<Select>组件中&#xff0c;存在一个拼写错误。在option - value属性中&#xff0c;正确的写法应该是option - value&#xff08;使用连字符&#xff09;或者optionValue&#xff08;如果是按照Vue组件属性的驼峰命名法&#xff09;&#xff0c;这里写成了option - val…

CentOS7 解决ping:www.baidu.com 未知的名称或服务

CentOS7 解决ping&#xff1a;www.baidu.com“未知的名称或服务 在VM查看网络配置 查看虚拟网络编辑器 编辑网络配置文件 vi /etc/sysconfig/network-scripts/ifcfg-ens33注意&#xff1a;不同机器的配置文件名可能不相同&#xff0c;通过 ip addr 命令查看 将 ONBOOT 从 no 改…

QT----------文件系统操作和文件读写

一、输入输出设备类 功能&#xff1a; Qt 提供了一系列的输入输出设备类&#xff0c;用于处理不同类型的 I/O 操作&#xff0c;如文件、网络等。 二、文件读写操作类 QFile 类&#xff1a; 提供了对文件的读写操作&#xff0c;可以打开、读取、写入和关闭文件。示例&#x…

Android14 CTS-R6和GTS-12-R2不能同时测试的解决方法

背景 Android14 CTS r6和GTS 12-r1之后&#xff0c;tf-console默认会带起OLC Server&#xff0c;看起来olc server可能是想适配ATS(android-test-station)&#xff0c;一种网页版可视化、可配置的跑XTS的方式。这种网页版ATS对测试人员是比较友好的&#xff0c;网页上简单配置下…

2024-12-29-sklearn学习(26)模型选择与评估-交叉验证:评估估算器的表现 今夜偏知春气暖,虫声新透绿窗纱。

文章目录 sklearn学习(26) 模型选择与评估-交叉验证&#xff1a;评估估算器的表现26.1 计算交叉验证的指标26.1.1 cross_validate 函数和多度量评估26.1.2 通过交叉验证获取预测 26.2 交叉验证迭代器26.2.1 交叉验证迭代器–循环遍历数据26.2.1.1 K 折26.2.1.2 重复 K-折交叉验…

免费容器镜像服务--统信容器镜像平台

原文链接&#xff1a;免费容器镜像服务--统信容器镜像平台 Hello&#xff0c;大家好啊&#xff01;今天给大家带来一篇关于 免费容器镜像服务——统信容器镜像平台 的文章。统信容器镜像平台是由统信软件推出的免费容器镜像服务&#xff0c;遵循 OCI&#xff08;Open Containe…

Vue 3.0 中 template 多个根元素警告问题

在 Vue 2.0 中&#xff0c;template 只允许存在一个根元素&#xff0c;但是这种情况在 Vue 3.0 里发生了一些变化。 在 Vue 3.0 中开始支持 template 存在多个根元素了。但是因为 VSCode 中的一些插件没有及时更新&#xff0c;所以当你在 template 中写入多个根元素时&#xf…

基于JavaWeb的汽车维修保养智能预约系统

作者简介&#xff1a;Java领域优质创作者、CSDN博客专家 、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、多年校企合作经验&#xff0c;被多个学校常年聘为校外企业导师&#xff0c;指导学生毕业设计并参与学生毕业答辩指导&#xff0c;…

Kafka 幂等性与事务

文章目录 幂等性实现机制配置使用局限性 事务使用场景配置使用实现机制事务过程事务初始化事务开始事务提交事务取消事务消费 幂等性 Producer 无论向 Broker 发送多少次重复的数据&#xff0c;Broker 端只会持久化一条&#xff0c;保证数据不丢失且不重复。 实现机制 通过引…

ActiveMQ支持哪些传输协议

ActiveMQ 支持多种传输协议&#xff0c;以满足不同场景下的需求。这些协议包括但不限于以下几种&#xff1a; 1. OpenWire&#xff1a; • 这是 ActiveMQ 的默认和专有协议。 • 提供了高效、可靠的消息传递功能。 • 支持多种消息传递模式&#xff0c;如点对点和发布/订阅。 2…

MySQL数据库——常见慢查询优化方式

本文详细介绍MySQL的慢查询相关概念&#xff0c;分析步骤及其优化方案等。 文章目录 什么是慢查询日志&#xff1f;慢查询日志的相关参数如何启用慢查询日志&#xff1f;方式一&#xff1a;修改配置文件方式二&#xff1a;通过命令动态启用 分析慢查询日志方式一&#xff1a;直…

Qt天气预报系统设计界面布局第四部分左边

Qt天气预报系统设计 1、第四部分左边的第一部分1.1添加控件1.2修改控件名字 2、第四部分左边的第二部分2.1添加控件2.2修改控件名字 3、第四部分左边的第三部分3.1添加控件3.2修改控件名字 4、对整个widget04l调整 1、第四部分左边的第一部分 1.1添加控件 拖入一个widget&…

【嵌入式硬件】嵌入式显示屏接口

数字显示串行接口&#xff08;Digital Display Serial Interface&#xff09; SPI 不过多赘述。 I2C-bus interface 不过多赘述 MIPI DSI MIPI (Mobile Industry Processor Interface) Alliance, DSI (Display Serial Interface) 一般用于移动设备&#xff0c;下面是接口…

一个在ios当中采用ObjectC和opencv来显示图片的实例

前言 在ios中采用ObjectC编程利用opencv来显示一张图片&#xff0c;并简单绘图。听上去似乎不难&#xff0c;但是实际操作下来&#xff0c;却不是非常的容易的。本文较为详细的描述了这个过程&#xff0c;供后续参考。 一、创建ios工程 1.1、选择ios工程类型 1.2、选择接口模…

el-input输入框需要支持多输入,最后传输给后台的字段值以逗号分割

需求&#xff1a;一个输入框字段需要支持多次输入&#xff0c;最后传输给后台的字段值以逗号分割 解决方案&#xff1a;结合了el-tag组件的动态编辑标签 那块的代码 //子组件 <template><div class"input-multiple-box" idinputMultipleBox><div>…

[2474].第04节:Activiti官方画流程图方式

我的后端学习大纲 Activiti大纲 1.安装位置&#xff1a; 2.启动&#xff1a;