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. }) }
หากต้องการเริ่มเซสชันลากและวาง ให้เรียกใช้ฟังก์ชัน startTransfer()
ภายในขอบเขตนี้ ให้ใช้ DragAndDropTransferData
เพื่อแสดง
ข้อมูลที่โอนได้ ข้อมูลนี้สามารถเป็น URI ระยะไกล ซึ่งเป็นข้อมูลแบบ Rich Text ใน
คลิปบอร์ด ไฟล์ในเครื่อง หรืออื่นๆ โดยทั้งหมดจะต้องรวมอยู่ในไฟล์
ออบเจ็กต์ ClipData
รายการ ระบุข้อความธรรมดา ตัวอย่างเช่น
Modifier.dragAndDropSource { detectTapGestures(onLongPress = { startTransfer( DragAndDropTransferData( ClipData.newPlainText( "image Url", url ) ) ) }) }
หากต้องการอนุญาตให้การดำเนินการลากข้ามขอบของแอป พารามิเตอร์
ตัวสร้าง DragAndDropTransferData
ยอมรับอาร์กิวเมนต์ flags
ใน
ดังตัวอย่างต่อไปนี้ ค่าคงที่ DRAG_FLAG_GLOBAL
จะระบุว่าข้อมูล
ถูกลากจากแอปหนึ่งไปยังอีกแอปหนึ่ง
Modifier.dragAndDropSource { detectTapGestures(onLongPress = { startTransfer( DragAndDropTransferData( ClipData.newPlainText( "image Url", url ), flags = View.DRAG_FLAG_GLOBAL ) ) }) }
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 } } }
ตัวอย่างถัดไปแสดงวิธีจัดการข้อความธรรมดาที่ตกหล่น
Modifier.dragAndDropTarget( shouldStartDragAndDrop = { event -> event.mimeTypes().contains(ClipDescription.MIMETYPE_TEXT_PLAIN) }, target = callback )
ฟังก์ชัน 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 }
แหล่งข้อมูลเพิ่มเติม
Codelab: ลากและวางในการเขียน