Tarik lalu lepas

Jetpack Compose mendukung tarik lalu lepas dengan dua pengubah:

• dragAndDropSource: Menentukan composable sebagai titik awal gestur tarik
• dragAndDropTarget: Menentukan composable yang menerima data yang dijatuhkan

Misalnya, untuk memungkinkan pengguna menarik gambar di aplikasi Anda, buat composable gambar dan tambahkan pengubah dragAndDropSource. Untuk menyiapkan target lepas, buat composable gambar lain dan tambahkan pengubah dragAndDropTarget.

Pengubah dapat diterapkan ke beberapa sumber tarik dan beberapa target lepas.

Pengubah memungkinkan aplikasi berbagi data antar-composable dua atau lebih menggunakan ClipData, yang dapat dioperasikan secara interoperabilitas dengan implementasi View.

Catatan: Tarik lalu lepas berbeda dengan mengambil dan memindahkan, pola daftar yang umum.

Menentukan sumber tarik

Untuk mengaktifkan peristiwa tarik di dalam komponen, tambahkan pengubah dragAndDropSource. Fungsi ini menggunakan fungsi sebagai parameter. Di dalam fungsi ini, gunakan DragAndDropTransferData untuk merepresentasikan data yang dapat ditransfer. Data tersebut dapat berupa URI jarak jauh, data teks kaya di papan klip, file lokal, atau lainnya, tetapi semuanya harus digabungkan dalam objek ClipData. Berikan teks biasa, misalnya, seperti berikut:

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

Untuk mengizinkan tindakan tarik melintasi batas aplikasi, konstruktor DragAndDropTransferData menerima argumen flags. Dalam contoh berikut, konstanta DRAG_FLAG_GLOBAL menentukan bahwa data dapat ditarik dari satu aplikasi ke aplikasi lain:

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

DragAndDropTransferData menerima flag yang didukung oleh sistem View Android. Lihat daftar konstanta View untuk mengetahui daftar lengkap flag yang tersedia.

Menerima data drop

Tetapkan pengubah dragAndDropTarget ke composable agar composable dapat menerima peristiwa tarik lalu lepas. Pengubah memiliki dua parameter: yang pertama bertindak sebagai filter dan menentukan jenis data yang dapat diterima pengubah, dan yang kedua mengirimkan data dalam callback.

Perhatikan bahwa instance callback harus diingat. Cuplikan berikut menunjukkan cara mengingat callback:

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

Untuk menerima data dari aplikasi lain, gunakan requestDragAndDropPermission untuk mengaktifkan penerimaan, dan lepaskan setelah selesai:

val externalAppCallback = remember {
    object : DragAndDropTarget {
        override fun onDrop(event: DragAndDropEvent): Boolean {
            val permission =
                activity.requestDragAndDropPermissions(event.toAndroidDragEvent())
            // Parse received data
            permission?.release()
            return true
        }
    }
}
DragAndDropSnippets.kt

Perlu diingat bahwa DragAndDropEvent yang ditampilkan dari callback Compose berbeda dengan yang diharapkan oleh metode requestDragAndDropPermission, sehingga Anda perlu memanggil fungsi ekstensi toAndroidDragEvent() pada parameter sebelum meneruskannya ke permintaan izin.

Cuplikan berikutnya menunjukkan cara menangani teks biasa yang dihapus:

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

Fungsi callback harus menampilkan true jika peristiwa digunakan, atau false jika peristiwa ditolak dan tidak di-propagasi ke komponen induk.

Menangani peristiwa tarik lalu lepas

Ganti callback di antarmuka DragAndDropTarget untuk mengamati saat peristiwa tarik lalu lepas dimulai, berakhir, atau memasuki atau keluar dari komponen untuk kontrol UI dan perilaku aplikasi yang akurat:

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

Referensi lainnya

Codelab: Tarik lalu lepas di Compose