拖曳

Jetpack Compose 支援使用兩個修飾符拖曳:

舉例來說,如果想讓使用者在應用程式中拖曳圖片,請建立圖片可組合函式 並新增 dragAndDropSource 修飾符。如要設定放置目標,請建立另一個 圖片可組合函式,並新增 dragAndDropTarget 修飾符。

修飾符可套用至多個拖曳來源和多個放置目標。

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

開始拖曳事件

如要在元件內啟用拖曳事件,請新增 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 介面中的回呼,以觀察 拖曳事件開始、結束,或是進入或離開元件時精確顯示 控制 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
}

其他資源

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