Jetpack Compose 支援使用兩個修飾符拖曳:
dragAndDropSource
:指定可組合函式做為拖曳手勢的起點dragAndDropTarget
:指定接受放置資料的可組合項
舉例來說,如果想讓使用者在應用程式中拖曳圖片,請建立圖片可組合函式
並新增 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 中拖曳