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 dilepas

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

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

Pengubah memungkinkan aplikasi berbagi data antara dua atau beberapa composable menggunakan ClipData, yang dapat dioperasikan dengan implementasi View.

Memulai peristiwa tarik

Untuk mengaktifkan peristiwa tarik di dalam komponen, tambahkan pengubah dragAndDropSource, yang menggunakan fungsi penangguhan sebagai parameter. Fungsi ini mendefinisikan pengguna yang memulai operasi tarik. Pengubah dragAndDropSource menunggu hingga menerima peristiwa input pointer lalu mengeksekusi lambda diteruskan ke pengendali peristiwa. Gunakan lambda untuk mendeteksi berbagai peristiwa input, misalnya, ketukan atau tekan lama. Untuk informasi selengkapnya, lihat Penunjuk input di Compose.

Peristiwa input pointer biasanya berupa tekan lama yang diimplementasikan sebagai berikut:

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

Untuk memulai sesi tarik lalu lepas, panggil fungsi startTransfer(). Dalam cakupan ini, gunakan DragAndDropTransferData untuk mewakili yang dapat ditransfer. Data bisa berupa URI jarak jauh, data rich text di bagian {i>clipboard<i}, file lokal, atau lebih banyak lagi, tetapi semuanya harus digabungkan dalam Objek ClipData. Berikan teks biasa, misalnya, sebagai berikut:

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

Untuk memungkinkan tindakan tarik melintasi batas aplikasi, metode Konstruktor DragAndDropTransferData menerima argumen flags. Di kolom contoh berikut, konstanta DRAG_FLAG_GLOBAL menetapkan bahwa data dapat ditarik dari satu aplikasi ke aplikasi lainnya:

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

DragAndDropTransferData menerima tanda yang didukung oleh sistem Tampilan Android. Lihat daftar konstanta View untuk melihat daftar lengkap tanda yang tersedia.

Menerima data rilis

Tetapkan pengubah dragAndDropTarget ke composable untuk mengaktifkan composable untuk menerima peristiwa tarik lalu lepas. Pengubah memiliki dua parameter: bertindak sebagai filter dan menentukan jenis data yang dapat diterima pengubah, dan 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

Cuplikan berikutnya menunjukkan cara menangani teks biasa yang dilepas:

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

Fungsi callback akan menampilkan true jika peristiwa digunakan, atau false jika peristiwa ditolak dan tidak disebarkan ke komponen induk.

Menangani peristiwa tarik lalu lepas

Ganti callback di antarmuka DragAndDropTarget untuk mengamati kapan peristiwa tarik lalu lepas memulai, mengakhiri, atau memasuki atau keluar dari komponen mengontrol UI dan perilaku aplikasi:

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