السحب والإفلات

تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

يتيح تطبيق Jetpack Compose السحب والإفلات باستخدام معدِّلَين:

• dragAndDropSource: لتحديد عنصر قابل للإنشاء كنقطة بداية لإيماءة السحب
• dragAndDropTarget: لتحديد عنصر قابل للإنشاء يقبل البيانات التي تم سحبها

على سبيل المثال، للسماح للمستخدمين بسحب صورة في تطبيقك، يمكنك إنشاء صورة قابلة للإنشاء وإضافة مفتاح التعديل dragAndDropSource. لإعداد هدف الانخفاض، عليك إنشاء صورة أخرى قابلة للإنشاء وإضافة مفتاح التعديل dragAndDropTarget.

ويمكن تطبيق المُعدِّلات على مصادر سحب متعددة وأهداف إفلات متعددة.

تتيح مفاتيح التعديل للتطبيقات مشاركة البيانات بين عنصرَين أو أكثر من العناصر القابلة للإنشاء باستخدام السمة ClipData، وهي قابلة للتشغيل التفاعلي مع عمليات تنفيذ View.

تحديد مصدر السحب

لتفعيل سحب الأحداث داخل مكوِّن، أضِف مفتاح التعديل dragAndDropSource. يأخذ ذلك دالة كمعلمة. داخل هذه الدالة، استخدِم DragAndDropTransferData لتمثيل البيانات القابلة للتحويل. ويمكن أن تكون البيانات عبارة عن معرّف موارد منتظم (URI) بعيد أو بيانات نص منسق في الحافظة أو ملفًا محليًا أو غير ذلك، ولكن يجب أن تكون جميعها مضمَّنة في كائن ClipData. قدِّم نصًا عاديًا، على سبيل المثال، على النحو التالي:

Modifier.dragAndDropSource { _ ->
    DragAndDropTransferData(
        ClipData.newPlainText(
            "image Url", url
        )
    )
}
DragAndDropSnippets.kt

للسماح لإجراء السحب بعبور حدود التطبيق، تقبل دالة الإنشاء DragAndDropTransferData الوسيطة flags. في المثال التالي، يحدّد الثابت DRAG_FLAG_GLOBAL أنّه يمكن سحب البيانات من تطبيق إلى آخر:

Modifier.dragAndDropSource { _ ->
    DragAndDropTransferData(
        ClipData.newPlainText(
            "image Url", url
        ),
        flags = View.DRAG_FLAG_GLOBAL
    )
}
DragAndDropSnippets.kt

يقبل تطبيق "DragAndDropTransferData" العلامات المتوافقة مع نظام Android View. راجِع قائمة ثوابت 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