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ć docelowy spadek, utwórz inny kompozycyjnego obrazu i dodać modyfikator dragAndDropTarget.

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

Modyfikatory umożliwiają aplikacjom współdzielenie danych między 2 lub większą liczbą elementów kompozycyjnych przy użyciu narzędzia ClipData, które współpracuje z implementacjami View.

Rozpoczynanie zdarzenia przeciągania

Aby włączyć zdarzenia przeciągania wewnątrz komponentu, dodaj modyfikator dragAndDropSource, który przyjmuje funkcję zawieszania jako parametr. Funkcja definiuje użytkownika która rozpoczyna operację przeciągania. Modyfikator dragAndDropSource czeka na otrzymanie zdarzenia wejściowego wskaźnika, a następnie wykonuje funkcję lambda przekazywane do modułu obsługi zdarzeń. Funkcja lambda umożliwia wykrywanie różnych zdarzeń wejściowych, np. dotknięć lub przytrzymania. Więcej informacji znajdziesz w sekcji Wskaźnik dane wejściowe w narzędziu Compose.

Zdarzenie danych wejściowych wskaźnika jest zwykle długie i naciśnięte w ten sposób:

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

Aby rozpocząć sesję przeciągania i upuszczania, wywołaj funkcję startTransfer(). W tym zakresie użyj wartości DragAndDropTransferData do reprezentowania funkcji dane, które można przenieść. Dane te mogą być zdalnym identyfikatorem URI, danymi tekstowymi sformatowanym na w schowku, pliku lokalnym itp., ale wszystkie muszą być umieszczone w ClipData obiekt. Podaj zwykły tekst, na przykład w taki sposób:

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

Aby umożliwić przeciąganie po granicach aplikacji, Konstruktor DragAndDropTransferData akceptuje argument flags. W W tym przykładzie stała DRAG_FLAG_GLOBAL określa, że dane mogą zostać przeciągnięta z jednej aplikacji do drugiej:

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

DragAndDropTransferData akceptuje flagi obsługiwane przez system Android View. Zobacz listę stałych View, gdzie znajdziesz pełną listę dostępnych flag.

Odbieranie danych o utraconych danych

Przypisz modyfikator dragAndDropTarget do funkcji kompozycyjnej, aby włączyć tę funkcję aby odbierać zdarzenia przeciągania i upuszczania. Modyfikator ma dwa parametry: pierwszy działa jak filtr i określa rodzaj danych akceptowanych przez modyfikator, a funkcja dostarcza dane w wywołaniu zwrotnym.

Wystąpienie wywołania zwrotnego powinno być zapamiętane. Ten fragment kodu pokazuje, 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 wykorzystane, lub false jeśli zdarzenie zostanie odrzucone i nie zostanie przekazane do komponentu nadrzędnego.

Obsługa zdarzeń przeciągania i upuszczania

Zastąp wywołania zwrotne w interfejsie DragAndDropTarget, aby zaobserwować, kiedy zdarzenie typu „przeciągnij i upuść” rozpoczyna się, kończy, otwiera lub opuszcza komponent, sterowanie interfejsem użytkownika 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