ویجت بارگذاری
ویجت «بارگذاری» یک نشانگر متحرک برای زمانهایی نمایش میدهد که دریافت یا پردازش اطلاعات هنوز تمام نشده است. با اتصال آن به یک متغیر بولی، نشانگر بهصورت خودکار با شروع و پایان عملیات نمایش داده یا مخفی میشود.
کاربردها
- نمایش وضعیت دریافت اطلاعات از API.
- جلوگیری از خالی بهنظر رسیدن صفحه هنگام آمادهشدن محتوا.
- نمایش وضعیت اجرای یک محاسبه یا عملکرد زمانبر.
- ساخت نشانگر بارگذاری هماهنگ با رنگ و ظاهر اپ.
تنظیمات اصلی
- سبک لودر: شکل و نوع انیمیشن نشانگر را تعیین میکند.
- اندازه: اندازه کلی نشانگر را مشخص میکند و میتواند بین ۸ تا ۴۰۰ باشد.
- رنگ: رنگ اصلی انیمیشن را تعیین میکند. اگر رنگی انتخاب نشود، رنگ پیشفرض سبک یا تم استفاده میشود.
- متغیر نمایش: یک متغیر بولی که وضعیت نمایش ویجت را کنترل میکند.
رفتار متغیر نمایش
| مقدار متغیر | نتیجه |
|---|---|
true | نشانگر نمایش داده میشود. |
false | نشانگر مخفی میشود. |
| متغیر انتخاب نشده یا بدون مقدار | نشانگر همیشه نمایش داده میشود. |
برای نمونه، اگر دریافت اطلاعات با متغیر سیستمی sys.rest.loading انجام میشود، همین متغیر را در «متغیر نمایش» انتخاب کنید. در زمان ارسال درخواست مقدار آن true و پس از پایان درخواست مقدار آن false میشود.
اگر وضعیت بارگذاری را خودتان مدیریت میکنید، پیش از شروع عملیات یک متغیر بولی را true و در هر دو حالت موفقیت و خطا آن را false کنید تا نشانگر روی صفحه باقی نماند.
سبکهای نمایش
سبکهای متنوعی مانند دایرهای، دایره محوشونده، دایره چرخان، نقطههای دنبالکننده، سه نقطه جهشی، موج، شبکه مکعبی، مربع رقصان، ساعت شنی، حلقه، موج انفجاری، خطوط چرخان، ضربانی، قلب تپنده و نشانگرهای متریال و خطی در دسترس هستند.
پس از انتخاب سبک، فقط تنظیماتی نمایش داده میشوند که روی همان سبک اثر دارند. خالی گذاشتن هر مقدار باعث میشود مقدار پیشفرض آن سبک استفاده شود.
تنظیمات وابسته به سبک
- ضخامت خط: برای سبکهایی مانند حلقه، حلقه دوگانه، خطوط چرخان و نشانگرهای متریال یا خطی.
- ضخامت قلم: برای سبکهای ساعت شنی ریزان.
- ضخامت حاشیه: برای سبک موج انفجاری.
- تعداد آیتم: برای موج، موج پیانویی و خطوط چرخان.
- شکل آیتمها: انتخاب دایره یا مستطیل در سبکهای پشتیبانیشده.
- نوع موج: شروع موج از ابتدا، مرکز یا انتها.
- مدت انیمیشن: زمان یک چرخه انیمیشن بر حسب میلیثانیه؛ عدد کمتر، حرکت سریعتر ایجاد میکند.
- تأخیر آیتمها: فاصله زمانی حرکت آیتمها در سبکهای پشتیبانیشده.
مدت انیمیشن در سبکهای «متریال چرخان» و «نوار خطی» توسط خود سیستم کنترل میشود و قابل تنظیم نیست.
نمونه استفاده با متغیر دلخواه
- یک متغیر بولی مانند
isLoadingبسازید. - متغیر را در تنظیم «متغیر نمایش» ویجت انتخاب کنید.
- پیش از شروع عملکرد، مقدار
isLoadingراtrueکنید. - پس از موفقیت یا خطا، مقدار آن را
falseکنید.
نکات طراحی و تست
- نشانگر را نزدیک محتوایی قرار دهید که منتظر آمادهشدن آن است.
- برای بارگذاری تمام صفحه، ویجت را در یک گروه لایهای روی محتوا قرار دهید و برای پسزمینه یک رنگ نیمهشفاف در نظر بگیرید.
- اندازه و رنگ نشانگر را روی تم روشن و تاریک بررسی کنید.
- اگر عملیات ممکن است خطا بخورد، برای حالت خطا نیز متن یا دکمه تلاش دوباره طراحی کنید.
- وضعیت نمایش را در خروجی واقعی و با اینترنت کند آزمایش کنید.