Drag-and-drop

Jetpack Compose unterstützt Drag-and-drop mit zwei Modifikatoren:

• dragAndDropSource: Gibt eine zusammensetzbare Funktion als Startpunkt für das Ziehen an.
• dragAndDropTarget: Gibt eine zusammensetzbare Funktion an, die die gelöschten Daten akzeptiert

Damit Nutzer beispielsweise ein Bild in Ihrer App ziehen können, erstellen Sie ein zusammensetzbares Bild und fügen Sie den dragAndDropSource-Modifikator hinzu. Um ein Drop-Ziel einzurichten, müssen Sie ein weiteres erstellen Bild zusammensetzbar und fügen Sie den dragAndDropTarget-Modifikator hinzu.

Die Modifikatoren können auf mehrere Drag-Quellen und mehrere Drop-Ziele angewendet werden.

Mithilfe von Modifikatoren können Apps Daten zwischen zwei oder mehr zusammensetzbaren Funktionen teilen mit ClipData, das mit View-Implementierungen interoperabel ist.

Drag-Event starten

Um Drag-Events innerhalb einer Komponente zu aktivieren, fügen Sie den dragAndDropSource-Modifikator hinzu. für die eine Unterbrechungsfunktion als Parameter verwendet wird. Die Funktion definiert die Interaktion, die den Drag-Vorgang startet. Der dragAndDropSource-Modifikator wartet, bis ein Zeigereingabeereignis empfangen wird, und führt dann die Lambda-Funktion aus an den Ereignis-Handler übergeben. Nutzen Sie Lambda zum Erkennen verschiedener Eingabeereignisse, z. B. durch Tippen oder langes Drücken. Weitere Informationen finden Sie unter Zeiger in „Schreiben“.

Das Zeigereingabeereignis wird normalerweise wie folgt durch langes Drücken implementiert:

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

Rufen Sie zum Starten einer Drag-and-drop-Sitzung die Funktion startTransfer() auf. Innerhalb dieses Bereichs stellen Sie mit DragAndDropTransferData Folgendes dar: Daten übertragen werden. Bei den Daten kann es sich um einen Remote-URI, Rich-Text-Daten auf der oder eine lokale Datei erstellen, die alle in eine ClipData-Objekt. Geben Sie nur Text an, z. B. so:

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

Damit die Ziehaktion die Grenzen der App überschreitet, muss das Symbol Der DragAndDropTransferData-Konstruktor akzeptiert ein flags-Argument. Im Im folgenden Beispiel gibt die Konstante DRAG_FLAG_GLOBAL an, dass Daten von einer App in eine andere gezogen werden:

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

DragAndDropTransferData akzeptiert vom Android View-System unterstützte Flags. Weitere Informationen finden Sie unter In der Liste der View-Konstanten finden Sie eine vollständige Liste der verfügbaren Flags.

Drop-Daten empfangen

Weisen Sie einer zusammensetzbaren Funktion den dragAndDropTarget-Modifikator zu, um sie zu aktivieren um Drag-and-drop-Ereignisse zu erhalten. Der Modifikator hat zwei Parameter: den ersten dient als Filter und gibt die Art der Daten an, die der Modifikator akzeptieren kann, und der liefert die Daten in einem Callback.

Die Callback-Instanz sollte gemerkt werden. Das folgende Snippet zeigt, wie der Callback gespeichert wird:

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

Im nächsten Snippet wird gezeigt, wie mit entferntem Nur-Text umgegangen wird:

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

Die Callback-Funktion sollte true zurückgeben, wenn das Ereignis verarbeitet wird, oder false. Das Ereignis wird abgelehnt und nicht in die übergeordnete Komponente übernommen.

Drag-and-drop-Ereignisse verarbeiten

Überschreiben Sie Callbacks in der DragAndDropTarget-Schnittstelle, um zu erkennen, wenn ein das Drag-and-drop-Ereignis beginnt, endet oder in eine Komponente ein- oder beendet wird, um präzise die Benutzeroberfläche und das Verhalten der 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

Weitere Informationen

Codelab: Drag-and-drop in „Schreiben“