Przeciągnij i upuść

W Jetpack Compose możesz przeciągać i upuszczać elementy za pomocą dwóch modyfikatorów:

  • dragAndDropSource: określa funkcję kompozycyjną jako punkt początkowy gestu przeciągania
  • dragAndDropTarget: określa element kompozycyjny, który akceptuje usunięte dane

Na przykład aby umożliwić użytkownikom przeciąganie obrazu w aplikacji, utwórz kompozycję obrazu i dodaj modyfikator dragAndDropSource. Aby skonfigurować tę opcję, utwórz inny kompozycyjny obraz i dodaj modyfikator dragAndDropTarget.

Modyfikatory można stosować do wielu źródeł przeciągania i wielu elementów docelowych.

Modyfikatory umożliwiają aplikacjom udostępnianie danych między 2 lub większą liczbą funkcji kompozycyjnych za pomocą funkcji ClipData, która współpracuje z implementacjami View.

Podaj źródło przeciągania

Aby włączyć zdarzenia przeciągania w komponencie, dodaj modyfikator dragAndDropSource. Przyjmuje ona funkcję jako parametr. W tej funkcji użyj funkcji DragAndDropTransferData do reprezentowania danych, które można przenieść. Mogą to być zdalny identyfikator URI, dane sformatowanego tekstu w schowku, plik lokalny lub inny element, ale wszystkie muszą być ujęte w obiekt ClipData. Wpisz zwykły tekst, na przykład w ten sposób:

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

Aby umożliwić przeciąganie po granicach aplikacji, konstruktor DragAndDropTransferData akceptuje argument flags. W poniższym przykładzie stała DRAG_FLAG_GLOBAL określa, że dane mogą być przeciągane z jednej aplikacji do drugiej:

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

DragAndDropTransferData akceptuje flagi obsługiwane przez system Android View. Pełną listę dostępnych flag znajdziesz na liście stałych View.

Odbieranie danych o utraconych danych

Przypisz modyfikator dragAndDropTarget do funkcji kompozycyjnej, aby umożliwić tej funkcji przyjmowanie zdarzeń przeciągania i upuszczania. Modyfikator ma 2 parametry: pierwszy działa jako filtr i określa rodzaj danych, które może przyjmować, a drugi dostarcza dane w wywołaniu zwrotnym.

Wystąpienie wywołania zwrotnego powinno być zapamiętane. Z tego fragmentu dowiesz się, jak zapamiętać wywołanie zwrotne:

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

Następny fragment kodu pokazuje, jak postępować w przypadku upuszczenia zwykłego tekstu:

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

Funkcja wywołania zwrotnego powinna zwracać wartość true, jeśli zdarzenie zostało przeanalizowane, lub false, jeśli zostanie ono odrzucone i nie zostanie rozpowszechnione w komponencie nadrzędnym.

Obsługa zdarzeń przeciągania i upuszczania

Zastępuj wywołania zwrotne w interfejsie DragAndDropTarget, aby obserwować, kiedy zdarzenie przeciągania i upuszczania rozpoczyna się, kończy, otwiera lub opuszcza komponent, co zapewnia precyzyjną kontrolę nad interfejsem i działaniem aplikacji:

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

Dodatkowe materiały

Ćwiczenie w programowaniu: przeciąganie i upuszczanie w narzędziu Compose