Drag and Drop در فلاتر
Drag and Drop در فلاتر
سلام همراهان همیشگی فلاتر فارسی!
در این مقاله، قراره من به شما نحوه انجام عملیات Drag&Drop در فلاتر را آموزش بدهم.
در واقع، برای انجام عملیات Drag&Drop، از دو ویجت اصلی استفاده می‌کنیم.
1.Draggable: این ویجت، بخشی است که می‌توانیم آن را کشیده و جابجا کنیم و در اینجا ویجت‌هایی که می‌خواهیم بتوانیم آنها را کشیده و جابجا کنیم را تعریف می‌کنیم.
2.DragTarget: این ویجت، بخشی است که ویجت قابل کشیده را پذیرش می‌کند و در اینجا می‌توانیم با کنترل وضعیت‌های مورد نیاز، ویجت‌های قابل کشیده را پذیرش کنیم.
عملیات Drag&Drop در کلیت برنامه‌ها امکانات و سهولت‌هایی را فراهم می‌کند.:
به عنوان مثال، وقتی می‌خواهیم یک لیست قابل مرتب‌سازی توسط کاربر ایجاد کنیم، با استفاده از Draggable و DragTarget می‌توانیم به راحتی این کار را انجام دهیم.
در غیر این صورت، مجبور می‌شویم از بسته‌های جانبی استفاده کنیم.
هر چند اگر امکانش باشد، من ترجیح می‌دهم بدون بارگیری بسته‌های جانبی در پروژه‌هایم کار کنم. فکر می‌کنم همه اینطور فکر می‌کنند.
بیایید شروع کنیم!
برای بررسی مفصل ویجت‌هایی که برای Drag & Drop استفاده خواهیم کرد، یک سناریو ایجاد کرده‌ام.
می‌توانیم آن را مانند بازی‌های پوشاندن عروسک باربی در نظر بگیریم. 😂
باشه، البته! بیایید شروع کنیم.
دو هدف متفاوت خواهیم داشت: یکی از طرف بالایی بدن هدف می‌گیرد و دیگری از طرف پایینی، به این معنی که وقتی می‌خواهیم روی بخش بالایی بدنمان تی‌شرت بپوشیم، روی بخش پایینی جین می‌پوشیم.
اولاً، بیایید اجزای بدن را تعریف کنیم.
قسمت بالایی بدن را به همین ترتیب به صورت UpperBody تعریف می کنیم.
حالا بیایید چند لباس بسازیم که از این کلاس ها به ما به ارث می رسد.
ما آنهایی را که می توان روی بالاتنه پوشید از UpperBody و آنهایی را که می توان در قسمت پایین تنه پوشید از LowerBody به ارث خواهیم برد.
به همین ترتیب از قسمت بالاتنه هودی و از پایین تنه شلوار جین و شلوار می سازیم.
حالا بیایید یک مخزن ساختگی ایجاد کنیم.
اکنون که داده های ما آماده است، می توانیم رابط کاربری و ویجت Draggable خود را ایجاد کنیم.
ما ویجت خود را به عنوان Generic ایجاد می کنیم زیرا می توانیم انواع مختلف لباس را در ویجت قرار دهیم.
دو Draggable مختلف وجود دارد: Draggle و LongPressDraggable، ما می توانیم از هر چیزی که می خواهیم در اینجا استفاده کنیم.
وقتی از Scroll استفاده می کنیم که مستقیماً Draggable تعریف کرده ایم ممکن است مشکل ایجاد کند، در این موارد بهتر است LongPress را انتخاب کنید. در LongPressDraggable، ما این شانس را داریم که یک تاخیر برای مطبوعات تعیین کنیم.
همانطور که مشخص است، کودک در ویجت قابل کشیدن، ویجت اصلی طراحی شده ما را می گیرد، ویجت را در بازخورد دریافت می کند و ما می توانیم در حین حرکت تغییراتی در طراحی ویجت ایجاد کنیم.
علاوه بر این، در childWhenDragging، می‌توانیم طرح Draggable را که در حین حمل و نقل ثابت می‌ماند، به روشی متفاوت نشان دهیم.
ویژگی محور ویجت Draggable به ما این امکان را می دهد که جهت حرکت درگ را تعیین کرده و جهت حرکت را محدود کنیم.
در نهایت، همچنین دارای عملکردهایی است که باعث ایجاد موقعیت هایی مانند شروع، پایان یا لغو فرآیند مهاجرت می شود که می توانم به عنوان بحرانی ذکر کنم.
مدلی که فرستادیم را در قسمت داده در Draggable قرار دادیم.
به این ترتیب می توانیم به داده های موجود در آن در حین رویدادهای کشیدن دسترسی داشته باشیم و این داده ها را در DragTargets پردازش کنیم.
حالا بیایید با استفاده از این DraggableWidget یک ویجت Wardrobe ایجاد کنیم.
نمونه لباس هایی که ساختیم را از مخزن می گیریم و در یک ویجت به این شکل می سازیم.
اکنون که کمد لباس خود را ایجاد کرده ایم، بیایید در مورد DragTarget صحبت کنیم.
تاکنون ویجت های قابل کشیدن خود را ایجاد کرده ایم.
منطقه ای که ما آنها را می کشیم توسط DragTarget ایجاد می شود.
بیایید ویجت خود را حاوی اهدافمان بنویسیم.
ما LowerBody DragTarget خود را ایجاد کردیم.
وقتی در قسمت onAccept DragTarget پذیرفته شد، کاری را که می‌خواهیم انجام می‌دهیم، در مثال، imageUrl لباس را گرفتم و در نمای DragTarget قرار دادم تا بتوانیم تصویر ویجت Draggable را ببینیم.
که روی DragTarget کشیده ایم. به همین ترتیب، ما باید UpperBody را ایجاد کنیم.
انواع مختلف لباس در ویجت‌های Draggable که ما ایجاد کردیم گنجانده شد. این نوع هایی که او دریافت کرد از UpperBody و LowerBody به ارث رسیده بود.
این واقعیت که DragTarget هایی که ما ایجاد کردیم می توانند انواع UpperBody و LowerBody را بپذیرند به طرف UpperBody اجازه می دهد تا زیر کلاس هایی مانند Hoodie، Tshirt و سمت LowerBody برای پذیرش زیر کلاس هایی مانند Jean و Trousers بپذیرد.
کنترل های مختلفی برای DragTarget وجود دارد. معمولاً می‌توانیم بدون آزاد کردن ویجت‌های Draggable که رویWillAccept می‌کشیم، کارهای لازم را انجام دهیم. هنگام پیمایش DragTarget با ویجت Draggable، تابع Move به طور مداوم فعال می شود، یا می بینیم که وقتی از منطقه Target خارج می شویم، تابع onLeaved فعال می شود.
اینها بسیار حیاتی هستند زیرا ممکن است لازم باشد کارهای سفارشی برای آنها بنویسیم.
clothesWidet را هم که من در آن استفاده می کنم می نویسیم.
ما تمام زمینه های لازم را ایجاد کرده ایم. اکنون می‌توانیم برنامه خود را بایستیم و ببینیم که چه کار می‌کنیم.
در اینجا نسخه ی نمایشی ما است!
به طور خلاصه، ما 2 تارگت ایجاد کردیم و ویجت های مختلف Draggable را به این اهداف کشاندیم و اقدامات مختلفی انجام دادیم. با پذیرش Draggables از نوع خودش (ارثی) imageUrls را دریافت کرد. وقتی یک نوع عمومی متفاوت Draggable را کشیدیم، ویجت را نپذیرفت زیرا زیر کلاس خودش را نداشت.
سعی کردم رویداد Drag & Drop رو با جزئیات توضیح بدم امیدوارم بدون حوصله بخونیدش 🤓
منتظر نظرات شما هستیم
مطالب زیر را حتما مطالعه کنید
ایجاد تبلیغات برای موبایل در فلاتر
مراحل توسعه پروژه فلاتر
ایجاد حالت غیرفعال در فلاتر
دیدگاهتان را بنویسید