Jetpack Compose 支持使用以下两个修饰符进行拖放:
dragAndDropSource
:将可组合项指定为拖动手势的起点dragAndDropTarget
:指定接受用户放下数据的可组合项
例如,如需让用户能够在应用中拖动图片,请创建 image 可组合项
然后添加 dragAndDropSource
修饰符。要设置拖放目标,请再创建一个
image 可组合项,然后添加 dragAndDropTarget
修饰符。
修饰符可以应用于多个拖动源和多个放置目标。
借助修饰符,应用可以在两个或更多可组合项之间共享数据
使用可与 View
实现互操作的 ClipData
。
开始拖动事件
如需在组件内启用拖动事件,请添加 dragAndDropSource
修饰符,
该函数接受挂起函数作为参数。函数定义用户
启动拖动操作的交互操作。dragAndDropSource
修饰符
等待收到指针输入事件,然后执行 lambda
事件处理脚本使用 lambda 检测各种输入事件,
例如点按或长按。有关详情,请参阅指针
输入文本。
指针输入事件通常是长按,如下所示:
Modifier.dragAndDropSource { detectTapGestures(onLongPress = { // Transfer data here. }) }
如需启动拖放会话,请调用 startTransfer()
函数。
在此作用域内,使用 DragAndDropTransferData
来表示
可转移的数据。数据可以是远程 URI、
本地文件等,但它们都需要封装在
ClipData
对象。请提供纯文本,例如:
Modifier.dragAndDropSource { detectTapGestures(onLongPress = { startTransfer( DragAndDropTransferData( ClipData.newPlainText( "image Url", url ) ) ) }) }
要允许拖动操作跨越应用的边界,
DragAndDropTransferData
构造函数接受 flags
参数。在
在下面的示例中,DRAG_FLAG_GLOBAL
常量指定数据可以
从一个应用拖动到另一个应用:
Modifier.dragAndDropSource { detectTapGestures(onLongPress = { startTransfer( DragAndDropTransferData( ClipData.newPlainText( "image Url", url ), flags = View.DRAG_FLAG_GLOBAL ) ) }) }
DragAndDropTransferData
接受 Android View 系统支持的标志。请参阅
View 常量列表,可查看可用标志的详尽列表。
接收丢弃数据
将 dragAndDropTarget
修饰符分配给可组合项,以启用该可组合项
来接收拖放事件该修饰符有两个参数:第一个
用作过滤器,指定修饰符可以接受的数据类型,
第二个是在回调中传递数据
请注意,您应记住回调实例。以下代码段 展示了如何记住回调:
val callback = remember { object : DragAndDropTarget { override fun onDrop(event: DragAndDropEvent): Boolean { // Parse received data return true } } }
下一个代码段演示了如何处理用户拖放的纯文本:
Modifier.dragAndDropTarget( shouldStartDragAndDrop = { event -> event.mimeTypes().contains(ClipDescription.MIMETYPE_TEXT_PLAIN) }, target = callback )
如果事件被使用,回调函数应返回 true
,否则应返回 false
如果事件被拒绝且未传播到父组件,则会发生该错误。
处理拖放事件
替换 DragAndDropTarget
接口中的回调,以观察
可开始、结束、进入或退出组件的操作
对界面和应用行为的控制:
object : DragAndDropTarget { override fun onStarted(event: DragAndDropEvent) { // When the drag event starts } override fun onEntered(event: DragAndDropEvent) { // When the dragged object enters the target surface } override fun onEnded(event: DragAndDropEvent) { // When the drag event stops } override fun onExited(event: DragAndDropEvent) { // When the dragged object exits the target surface } override fun onDrop(event: DragAndDropEvent): Boolean = true }
其他资源
Codelab:在 Compose 中拖放