Drag-and-Drop

Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

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

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

Damit Nutzer beispielsweise ein Bild in Ihre App ziehen können, müssen Sie eine zusammensetzbare Bilddatei erstellen und den dragAndDropSource-Modifikator hinzufügen. Erstellen Sie ein weiteres zusammensetzbares Bild und fügen Sie den dragAndDropTarget-Modifikator hinzu, um ein Drop-Ziel einzurichten.

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

Mit den Modifikatoren können Apps Daten zwischen zwei oder mehr zusammensetzbaren Funktionen teilen. Dazu wird ClipData verwendet, das mit View-Implementierungen interoperabel ist.

Drag-Quelle angeben

Um Drag-Events innerhalb einer Komponente zu aktivieren, fügen Sie den dragAndDropSource-Modifikator hinzu. Hierfür wird eine Funktion als Parameter verwendet. Verwenden Sie in dieser Funktion DragAndDropTransferData für die übertragbaren Daten. Die Daten können ein Remote-URI, Rich-Text-Daten aus der Zwischenablage, eine lokale Datei oder mehr sein. Sie müssen jedoch alle in ein ClipData-Objekt eingebunden werden. Geben Sie nur Text an, z. B. so:

Modifier.dragAndDropSource { _ ->
    DragAndDropTransferData(
        ClipData.newPlainText(
            "image Url", url
        )
    )
}
DragAndDropSnippets.kt

Damit die Ziehaktion die Grenzen der App überschreiten kann, akzeptiert der DragAndDropTransferData-Konstruktor ein flags-Argument. Im folgenden Beispiel gibt die Konstante DRAG_FLAG_GLOBAL an, dass Daten von einer Anwendung in eine andere gezogen werden können:

Modifier.dragAndDropSource { _ ->
    DragAndDropTransferData(
        ClipData.newPlainText(
            "image Url", url
        ),
        flags = View.DRAG_FLAG_GLOBAL
    )
}
DragAndDropSnippets.kt

DragAndDropTransferData akzeptiert vom Android View-System unterstützte Flags. Eine vollständige Liste der verfügbaren Flags finden Sie in der Liste der View-Konstanten.

Drop-Daten empfangen

Weisen Sie einer zusammensetzbaren Funktion den Modifikator dragAndDropTarget zu, damit sie Drag-and-drop-Ereignisse empfängt. Der Modifikator hat zwei Parameter: Der erste fungiert als Filter und gibt die Art der Daten an, die der Modifikator annehmen kann, und der zweite liefert die Daten in einem Callback.

Beachten Sie, dass die Callback-Instanz gemerkt werden sollte. 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, wenn das Ereignis abgelehnt wird und nicht an die übergeordnete Komponente weitergegeben wird.

Drag-and-drop-Ereignisse verarbeiten

Überschreibe Callbacks in der DragAndDropTarget-Oberfläche, um zu beobachten, wann ein Drag-and-drop-Ereignis beginnt, endet oder in eine Komponente ein- oder beendet wird. So kannst du die Benutzeroberfläche und das Verhalten der App präzise steuern:

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“