ลากและวาง

จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ

Jetpack Compose รองรับการลากและวางด้วยแป้นกดร่วม 2 แบบดังนี้

• dragAndDropSource: ระบุ Composable เป็นจุดเริ่มต้นของท่าทางสัมผัสการลาก
• dragAndDropTarget: ระบุ Composable ที่ยอมรับข้อมูลที่ลบออก

เช่น หากต้องการให้ผู้ใช้ลากรูปภาพในแอป ให้สร้างรูปภาพ Composable และเพิ่มตัวแก้ไข dragAndDropSource หากต้องการตั้งค่าเป้าหมายการลดลง ให้สร้างรูปภาพ Composable อีกรูปหนึ่ง และเพิ่มตัวแก้ไข dragAndDropTarget

ตัวแก้ไขใช้ได้กับแหล่งที่มาของการลากหลายรายการและเป้าหมายการปล่อยหลายรายการ

ตัวแก้ไขช่วยให้แอปแชร์ข้อมูลระหว่าง Composable ตั้งแต่ 2 รายการขึ้นไปโดยใช้ ClipData ซึ่งทำงานร่วมกับการติดตั้งใช้งาน View ได้

ระบุแหล่งที่มาสำหรับการลาก

หากต้องการเปิดใช้เหตุการณ์การลากภายในคอมโพเนนต์ ให้เพิ่มตัวแก้ไข dragAndDropSource ซึ่งจะใช้ฟังก์ชันเป็นพารามิเตอร์ ภายในฟังก์ชันนี้ ให้ใช้ DragAndDropTransferData เพื่อแสดงข้อมูลที่โอนได้ ข้อมูลนี้อาจเป็น URI ระยะไกล, ข้อมูล Rich Text ในคลิปบอร์ด, ไฟล์ในเครื่อง หรืออื่นๆ แต่ข้อมูลทั้งหมดนี้จะต้องรวมอยู่ในออบเจ็กต์ ClipData ระบุข้อความธรรมดา ดังตัวอย่างต่อไปนี้

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

ตัวสร้าง DragAndDropTransferData จะยอมรับอาร์กิวเมนต์ flags เพื่อให้การดำเนินการลากข้ามขอบเขตของแอปได้ ในตัวอย่างต่อไปนี้ ค่าคงที่ DRAG_FLAG_GLOBAL จะระบุว่าสามารถลากข้อมูลจากแอปหนึ่งไปยังอีกแอปหนึ่งได้

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

DragAndDropTransferData ยอมรับแฟล็กที่ระบบ Android View รองรับ ดูรายการค่าคงที่ View สำหรับรายการ Flag ทั้งหมดที่ใช้ได้

รับข้อมูลการเปิดตัว

กำหนดตัวแก้ไข dragAndDropTarget ให้กับ Composable เพื่อเปิดใช้ Composable เพื่อรับเหตุการณ์แบบลากและวาง ตัวแก้ไขมี 2 พารามิเตอร์ ได้แก่ พารามิเตอร์แรกทำหน้าที่เป็นตัวกรองและระบุประเภทข้อมูลที่ตัวแก้ไขยอมรับได้ และพารามิเตอร์ที่ 2 จะส่งข้อมูลใน Callback

โปรดทราบว่าคุณควรจำอินสแตนซ์ Callback ไว้ ข้อมูลโค้ดต่อไปนี้แสดงวิธีจดจำการเรียกกลับ

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

ตัวอย่างถัดไปแสดงวิธีจัดการข้อความธรรมดาที่ตกหล่น

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

ฟังก์ชัน Callback ควรแสดงผล true หากใช้เหตุการณ์ หรือ false หากเหตุการณ์ถูกปฏิเสธและไม่เผยแพร่ไปยังคอมโพเนนต์หลัก

จัดการเหตุการณ์แบบลากและวาง

ลบล้าง Callback ในอินเทอร์เฟซ DragAndDropTarget เพื่อสังเกตเมื่อเหตุการณ์การลากและวางเริ่มต้น สิ้นสุด หรือเข้าหรือออกจากคอมโพเนนต์เพื่อการควบคุม UI และลักษณะการทำงานของแอปได้อย่างแม่นยำ

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

แหล่งข้อมูลเพิ่มเติม

Codelab: ลากและวางในการเขียน