Trascina

Jetpack Compose supporta il trascinamento con due modificatori:

Ad esempio, per consentire agli utenti di trascinare un'immagine nella tua app, crea un'immagine componibile e aggiungi il modificatore dragAndDropSource. Per configurare un target di rilascio, creane un altro immagine componibile e aggiungi il tasto di modifica dragAndDropTarget.

I modificatori possono essere applicati a più origini di trascinamento e a più obiettivi di rilascio.

I modificatori consentono alle app di condividere dati tra due o più componenti componibili utilizzando ClipData, interoperabile con le implementazioni di View.

Avviare un evento di trascinamento

Per attivare gli eventi di trascinamento all'interno di un componente, aggiungi il modificatore dragAndDropSource, che assume come parametro una funzione di sospensione. La funzione definisce l'utente che avvia l'operazione di trascinamento. Il modificatore dragAndDropSource attende fino a quando riceve un evento di input del puntatore, quindi esegue la funzione lambda passati al gestore di eventi. Usa la funzionalità lambda per rilevare vari eventi di input, come tocchi o pressioni prolungate. Per ulteriori informazioni, consulta la sezione Suggerimento in Compose.

L'evento di input del puntatore viene in genere implementato con una pressione prolungata nel seguente modo:

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

Per avviare una sessione di trascinamento, chiama la funzione startTransfer(). All'interno di questo ambito, utilizza DragAndDropTransferData per rappresentare e trasferibili. I dati possono essere URI remoti, dati RTF appunti, un file locale o altro, ma devono essere tutti racchiusi in un ClipData oggetto. Fornisci testo normale, ad esempio, come segue:

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

Per consentire all'azione di trascinamento di oltrepassare i bordi dell'app, la Il costruttore DragAndDropTransferData accetta un argomento flags. Nella Nell'esempio seguente, la costante DRAG_FLAG_GLOBAL specifica che i dati possono essere trascinato da un'app all'altra:

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

DragAndDropTransferData accetta flag supportati dal sistema Android View. Consulta l'elenco delle costanti View per un elenco esaustivo dei flag disponibili.

Ricevi dati relativi al lancio

Assegna il modificatore dragAndDropTarget a un componibile per abilitarlo per ricevere eventi di trascinamento. Il modificatore ha due parametri: il primo funge da filtro e specifica il tipo di dati che il modificatore può accettare, mentre il secondo fornisce i dati in un callback.

Tieni presente che devi ricordare l'istanza di callback. Il seguente snippet mostra come ricordare il callback:

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

Lo snippet successivo mostra come gestire il testo normale eliminato:

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

La funzione di callback deve restituire true se l'evento viene consumato oppure false se l'evento viene rifiutato e non si propaga al componente principale.

Gestire gli eventi di trascinamento

Esegui l'override dei callback nell'interfaccia di DragAndDropTarget per osservare quando l'evento di trascinamento della selezione inizia, termina o entra o esce da un componente per il controllo dell'interfaccia utente e del comportamento dell'app:

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

Risorse aggiuntive

Codelab: trascina in Compose