拖曳

Jetpack Compose 支援透過兩個修飾符使用拖曳功能：

修飾符可讓應用程式使用 ClipData (與 View 實作項目互通)，在兩個以上的可組合項之間共用資料。

開始拖曳事件

如要在元件中啟用拖曳事件，請新增 dragAndDropSource 修飾符，該修飾符使用暫停函式做為參數。這個函式會定義啟動拖曳作業的使用者互動。dragAndDropSource 修飾符會等待接收指標輸入事件，然後執行傳遞至事件處理常式的 lambda。使用 lambda 偵測各種輸入事件，例如輕觸或長按。詳情請參閱「Compose 中的遊標輸入」。

指標輸入事件通常是長按事件，如下所示：

Modifier.dragAndDropSource {
    detectTapGestures(onLongPress = {
        // Transfer data here.
    })
}
DragAndDropSnippets.kt

如要啟動拖曳工作階段，請呼叫 startTransfer() 函式。在這個範圍內，請使用 DragAndDropTransferData 代表可轉移的資料。資料可以是遠端 URI、剪貼簿上的 RTF 資料、本機檔案等，但這些內容都必須納入 ClipData 物件中。提供純文字，例如：

Modifier.dragAndDropSource {
    detectTapGestures(onLongPress = {
        startTransfer(
            DragAndDropTransferData(
                ClipData.newPlainText(
                    "image Url", url
                )
            )
        )
    })
}
DragAndDropSnippets.kt

為了允許拖曳動作跨應用程式邊界，DragAndDropTransferData 建構函式會接受 flags 引數。在以下範例中，DRAG_FLAG_GLOBAL 常數指定資料可從一個應用程式拖曳至另一個應用程式：

Modifier.dragAndDropSource {
    detectTapGestures(onLongPress = {
        startTransfer(
            DragAndDropTransferData(
                ClipData.newPlainText(
                    "image Url", url
                ),
                flags = View.DRAG_FLAG_GLOBAL
            )
        )
    })
}
DragAndDropSnippets.kt

DragAndDropTransferData 可接受 Android View 系統支援的標記。如需可用標記的完整清單，請參閱檢視常數清單。

接收掉落資料

將 dragAndDropTarget 修飾符指派給可組合項，讓可組合項能夠接收拖曳事件。修飾符包含兩個參數：第一個動作是篩選器，用於指定修飾符可接受的資料類型，第二則是在回呼中傳送資料。

請注意，回呼執行個體應記住。下列程式碼片段說明如何記住回呼：

val callback = remember {
    object : DragAndDropTarget {
        override fun onDrop(event: DragAndDropEvent): Boolean {
            // Parse received data
            return true
        }
    }
}
DragAndDropSnippets.kt

下一個程式碼片段示範如何處理遺失的純文字：

Modifier.dragAndDropTarget(
    shouldStartDragAndDrop = { event ->
        event.mimeTypes().contains(ClipDescription.MIMETYPE_TEXT_PLAIN)
    }, target = callback
)
DragAndDropSnippets.kt

如果使用事件，回呼函式應傳回 true；如果事件遭拒，且不會套用至父項元件，則回呼函式會傳回 false。

處理拖曳事件

覆寫 DragAndDropTarget 介面中的回呼，觀察拖曳事件開始、結束或進入/離開元件的時間，用於精確控制 UI 和應用程式行為：

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
}
DragAndDropSnippets.kt

其他資源

程式碼研究室：在 Compose 中拖曳