کشیدن و انداختن

Jetpack Compose از کشیدن و رها کردن با دو اصلاح کننده پشتیبانی می کند:

• dragAndDropSource : یک Composable را به عنوان نقطه شروع حرکت کشیدن مشخص می کند.
• dragAndDropTarget : یک composable را مشخص می کند که داده های حذف شده را می پذیرد

به عنوان مثال، برای اینکه کاربران بتوانند یک تصویر را در برنامه خود بکشند، یک تصویر قابل ترکیب ایجاد کنید و اصلاح کننده dragAndDropSource را اضافه کنید. برای تنظیم یک هدف دراپ، یک تصویر قابل ترکیب دیگر ایجاد کنید و اصلاح کننده dragAndDropTarget را اضافه کنید.

اصلاح‌کننده‌ها را می‌توان برای چندین منبع درگ و اهداف رها کردن چندگانه اعمال کرد.

اصلاح‌کننده‌ها به برنامه‌ها امکان می‌دهند تا داده‌ها را با استفاده از ClipData ، که با پیاده‌سازی‌های View سازگار است، بین دو یا چند فایل قابل ترکیب به اشتراک بگذارند.

توجه: کشیدن و رها کردن با برداشتن و جابجایی که یک الگوی رایج لیست است متفاوت است.

یک رویداد کشیدن را شروع کنید

برای فعال کردن رویدادهای کشیدن در داخل یک مؤلفه، اصلاح کننده dragAndDropSource را اضافه کنید، که یک تابع تعلیق را به عنوان پارامتر می گیرد. تابع، تعامل کاربر را که عملیات کشیدن را شروع می کند، تعریف می کند. اصلاح‌کننده dragAndDropSource منتظر می‌ماند تا یک رویداد ورودی اشاره‌گر را دریافت کند و سپس لامبدا ارسال شده به کنترل‌کننده رویداد را اجرا می‌کند. از لامبدا برای تشخیص انواع رویدادهای ورودی، به عنوان مثال، ضربه زدن یا فشار طولانی استفاده کنید. برای اطلاعات بیشتر، ورودی اشاره گر در نوشتن را ببینید.

رویداد ورودی اشاره گر معمولاً یک فشار طولانی است که به صورت زیر اجرا می شود:

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 را به یک composable اختصاص دهید تا composable بتواند رویدادهای drag-and-drop را دریافت کند. اصلاح کننده دو پارامتر دارد: اولی به عنوان یک فیلتر عمل می کند و نوع داده ای را که اصلاح کننده می تواند بپذیرد را مشخص می کند و دومی داده ها را در یک تماس برگشتی تحویل می دهد.

توجه داشته باشید که نمونه برگشت تماس را باید به خاطر بسپارید . قطعه زیر نحوه به خاطر سپردن پاسخ تماس را نشان می دهد:

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 .

رویدادهای کشیدن و رها کردن را مدیریت کنید

برای کنترل دقیق رابط کاربری و رفتار برنامه، تماس‌های برگشتی را در رابط 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

منابع اضافی

Codelab: در Compose بکشید و رها کنید