खींचें और छोड़ें

Jetpack Compose, दो मॉडिफ़ायर की मदद से खींचकर छोड़ने और छोड़ने की सुविधा देता है:

• dragAndDropSource: यह जेस्चर के शुरुआती पॉइंट के तौर पर एक कंपोज़ेबल तय करता है
• dragAndDropTarget: इस कॉलम से ऐसे कंपोज़ेबल का पता चलता है जो ड्रॉप किए गए डेटा को स्वीकार करता है

उदाहरण के लिए, उपयोगकर्ताओं को आपके ऐप्लिकेशन में किसी इमेज को खींचकर छोड़ने की सुविधा देने के लिए, कोई ऐसी इमेज बनाएं जिसे जोड़ने के लिए उसे इस्तेमाल किया जा सके और dragAndDropSource मॉडिफ़ायर जोड़ें. ड्रॉप टारगेट सेट अप करने के लिए, दूसरा टारगेट बनाएं इमेज कंपोज़ेबल और dragAndDropTarget मॉडिफ़ायर जोड़ें.

मॉडिफ़ायर कई ड्रैग सोर्स और कई ड्रॉप टारगेट पर लागू किए जा सकते हैं.

मॉडिफ़ायर की मदद से ऐप्लिकेशन, दो या उससे ज़्यादा कंपोज़ेबल के बीच डेटा शेयर कर सकते हैं ClipData का इस्तेमाल करके, जो View लागू करने के साथ इंटरऑपरेबल है.

ध्यान दें: 'खींचें और छोड़ें' सुविधा इनसे अलग है पिक अप करें और एक जगह से दूसरी जगह ले जाएं, सूची का एक सामान्य पैटर्न.

खींचें और छोड़ें इवेंट शुरू करें

किसी कॉम्पोनेंट में इवेंट खींचने और छोड़ने के लिए, dragAndDropSource मॉडिफ़ायर जोड़ें. जो सस्पेंडिंग फ़ंक्शन को पैरामीटर के रूप में लेता है. फ़ंक्शन, उपयोगकर्ता के बारे में बताता है ऐसा इंटरैक्शन जो खींचें और छोड़ें. dragAndDropSource मॉडिफ़ायर यह पॉइंटर इनपुट इवेंट मिलने तक इंतज़ार करता है. इसके बाद, यह Lambda फ़ंक्शन को एक्ज़ीक्यूट करता है इवेंट हैंडलर को भेजा जाता है. कई तरह के इनपुट इवेंट का पता लगाने के लिए, Lambda फ़ंक्शन का इस्तेमाल करें, उदाहरण के लिए, टैप या दबाकर रखना. ज़्यादा जानकारी के लिए, Pointer देखें लिखें में इनपुट करें.

आम तौर पर, पॉइंटर इनपुट इवेंट को इतनी देर तक दबाकर रखा जाता है:

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

खींचें और छोड़ें सेशन शुरू करने के लिए, startTransfer() फ़ंक्शन को कॉल करें. इस दायरे में, DragAndDropTransferData का इस्तेमाल करके ट्रांसफ़र किया जा सकता है. डेटा एक रिमोट यूआरआई, रिच टेक्स्ट डेटा हो सकता है क्लिपबोर्ड, लोकल फ़ाइल या अन्य कई तरह की फ़ाइलें शामिल की जाती हैं, लेकिन उन सभी को 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 सिस्टम के साथ काम करने वाले फ़्लैग स्वीकार करता है. यहां जाएं: उपलब्ध फ़्लैग की पूरी सूची के लिए, देखें कॉन्सटेंट की सूची.

ड्रॉप का डेटा पाएं

कंपोज़ेबल को चालू करने के लिए, किसी कंपोज़ेबल में dragAndDropTarget मॉडिफ़ायर असाइन करें इवेंट बनाने के लिए, 'खींचें और छोड़ें' सुविधा का इस्तेमाल करें. मॉडिफ़ायर में दो पैरामीटर होते हैं: पहला फ़िल्टर की तरह काम करता है और इससे तय होता है कि मॉडिफ़ायर किस तरह का डेटा स्वीकार कर सकता है. साथ ही, दूसरा, डेटा को कॉलबैक में डिलीवर करता है.

ध्यान दें कि कॉलबैक इंस्टेंस याद रखा जाना चाहिए. नीचे दिया गया स्निपेट कॉलबैक को याद रखने का तरीका दिखाता है:

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

अगर इवेंट इस्तेमाल किया जा रहा है, तो कॉलबैक फ़ंक्शन को true या false दिखना चाहिए अगर इवेंट अस्वीकार कर दिया जाता है और पैरंट कॉम्पोनेंट में लागू नहीं होता है.

'खींचें और छोड़ें' इवेंट मैनेज करना

DragAndDropTarget इंटरफ़ेस में कॉलबैक को बदलें, ताकि यह देखा जा सके कि इवेंट की सटीक जानकारी के लिए, खींचें और छोड़ें इवेंट किसी कॉम्पोनेंट को शुरू करता है, खत्म होता है या किसी कॉम्पोनेंट में शामिल होता है या बाहर निकल जाता है यूज़र इंटरफ़ेस (यूआई) और ऐप्लिकेशन के व्यवहार को कंट्रोल करने के लिए:

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

अन्य संसाधन

कोडलैब (कोड बनाना सीखना): Compose में खींचें और छोड़ें