ลากและวาง

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

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

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

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

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

หมายเหตุ: การลากและวางแตกต่างจาก หยิบแล้วโยกย้าย รูปแบบรายการที่พบบ่อย

เริ่มเหตุการณ์การลาก

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

เหตุการณ์อินพุตตัวชี้มักจะเป็นการกดค้างดังต่อไปนี้

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

หากต้องการเริ่มเซสชันลากและวาง ให้เรียกใช้ฟังก์ชัน startTransfer() ภายในขอบเขตนี้ ให้ใช้ 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 จะส่งข้อมูลใน 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: ลากและวางในการเขียน