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

يتيح Jetpack Compose السحب والإفلات باستخدام أداتَي تعديل:

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

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

بدء حدث سحب

لتفعيل أحداث السحب داخل مكوِّن، أضِف مفتاح التعديل dragAndDropSource، الذي يأخذ دالة تعليق كمَعلَمة. تحدد الدالة تفاعل المستخدم الذي يبدأ عملية السحب. ينتظر معدِّل dragAndDropSource إلى أن يتلقى حدث إدخال المؤشر، ثم ينفّذ دالة lambda التي تم تمريرها إلى معالج الأحداث. استخدِم دالة lambda لاكتشاف مجموعة متنوعة من أحداث الإدخال، مثل النقرات أو الضغطات المطوّلة. لمزيد من المعلومات، يُرجى الاطّلاع على إدخال المؤشر في Compose.

عادةً ما يكون حدث إدخال المؤشر ضغطًا طويلاً يتم تنفيذه على النحو التالي:

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

لبدء جلسة السحب والإفلات، يمكنك استدعاء الدالة startTransfer(). داخل هذا النطاق، استخدِم DragAndDropTransferData لتمثيل البيانات القابلة للنقل. قد تكون البيانات معرّف موارد منتظم (URI) بعيد أو بيانات نص منسق على اللوحة أو ملفًا محليًا أو غير ذلك، ولكن يجب أن يتم تضمينها جميعًا في كائن 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