ویجت عکس
ویجت «عکس» برای نمایش تصویر (از فایل یا از اینترنت) استفاده میشود.
کاربردها
- نمایش لوگو، بنر، تصویر محصول، تصویر خبری یا تصویر تزئینی.
- ساخت کارتهای تصویری و بخشهای معرفی بصری.
- اتصال تصویر به عملکردهایی مثل باز کردن صفحه یا نمایش عکس بزرگتر.
قبل از انتشار اپ، نمایش این ویجت را در اندازههای مختلف صفحه بررسی کنید.
تنظیمات اصلی
انتخاب منبع تصویر
- انتخاب عکس: برای زمانی است که تصویر را در پنل اپادیتور آپلود کردهاید یا میخواهید از فایلهای موجود در پنل استفاده کنید. با انتخاب فایل از این بخش، تصویر همراه تنظیمات ویجت ذخیره میشود و وابسته به آدرس بیرونی نیست.
- لینک آنلاین: اگر این گزینه فعال شود، ویجت بهجای فایل انتخابشده از یک آدرس اینترنتی تصویر را میخواند. در این حالت فیلد «انتخاب عکس» غیرفعال میشود تا منبع تصویر فقط همان لینک آنلاین باشد.
- لینک عکس: آدرس مستقیم فایل تصویر در اینترنت است؛ مثل
http://example.com/my-picture.jpg. این فیلد فقط وقتی کاربرد دارد که گزینه «لینک آنلاین» فعال باشد. در لینک عکس میتوانید از متغیرهای داینامیک هم استفاده کنید؛ مثلhttps://example.com/images/{{imageName}}.jpg. مقدار متغیر هنگام اجرای اپلیکیشن جایگزین میشود. بهتر است لینک نهایی مستقیم به خود فایل تصویر ختم شود و از بیرون اپ قابل دسترسی باشد.
اگر تصویر ثابت، مهم یا بخشی از طراحی اصلی اپ است، معمولاً انتخاب فایل داخل پنل مطمئنتر است. اگر تصویر باید بدون انتشار نسخه جدید اپ تغییر کند، لینک آنلاین گزینه مناسبتری است.
اندازه تصویر
- عرض: عرض دلخواه تصویر را مشخص میکند. مقدار این فیلد عددی است و نمیتواند منفی باشد. اگر خالی بماند، عرض ویجت بر اساس اندازه، چیدمان و تنظیمات والد تعیین میشود.
- ارتفاع: ارتفاع دلخواه تصویر را مشخص میکند. مقدار این فیلد هم عددی است و نمیتواند منفی باشد. اگر خالی بماند، ارتفاع از چیدمان صفحه یا اندازه محتوای تصویر تأثیر میگیرد.
اگر عرض یا ارتفاع مشخص نشود، نتیجه نهایی به چیدمان صفحه، اندازه گروه/ستون والد و گزینه «نحوه قرارگیری در چارچوب» وابسته است. بعد از تنظیم اندازه، پیشنمایش را در ابعاد مختلف صفحه بررسی کنید.
تنظیمات نمایش (چطور داخل کادر قرار بگیرد)
نحوه قرارگیری در چارچوب
این گزینه تعیین میکند تصویر نسبت به کادر ویجت چگونه اندازهگیری و نمایش داده شود:
- نمایش کامل عکس: کل تصویر داخل کادر دیده میشود و نسبت تصویر حفظ میشود. اگر نسبت تصویر با کادر یکی نباشد، ممکن است بخشی از کادر خالی بماند.
- پوشش کامل چارچوب: تصویر طوری بزرگ میشود که تمام کادر را بپوشاند و نسبت تصویر حفظ شود. در این حالت ممکن است بخشی از کنارههای تصویر بریده شود.
- بدون تغییر اندازه: تصویر با اندازه اصلی خود نمایش داده میشود. اگر تصویر از کادر بزرگتر باشد، بخش اضافه در کادر دیده نمیشود.
- پرکردن به اندازه چارچوب: تصویر دقیقاً به اندازه کادر کشیده میشود. این گزینه کادر را کامل پر میکند، اما اگر نسبت تصویر با کادر متفاوت باشد ممکن است تصویر کشیده یا فشرده به نظر برسد.
- پرکردن افقی چارچوب: تصویر بر اساس عرض کادر تنظیم میشود. این گزینه برای بنرها یا تصویرهایی مناسب است که پر شدن عرض صفحه اهمیت بیشتری دارد.
- پرکردن عمودی چارچوب: تصویر بر اساس ارتفاع کادر تنظیم میشود. این گزینه زمانی مناسب است که ارتفاع ثابت دارید و میخواهید تصویر از نظر عمودی کادر را پوشش دهد.
موقعیت عکس
اگر اندازه تصویر با اندازه کادر دقیقاً یکی نباشد، این گزینه محل قرارگیری تصویر داخل کادر را مشخص میکند:
- بالا، راست / بالا، وسط / بالا، چپ: تصویر به بالای کادر میچسبد و از نظر افقی راست، وسط یا چپ قرار میگیرد.
- وسط، راست / وسط / وسط، چپ: تصویر در میانه ارتفاع کادر قرار میگیرد و از نظر افقی راست، مرکز یا چپ میشود.
- پایین، راست / پایین، وسط / پایین، چپ: تصویر به پایین کادر میچسبد و از نظر افقی راست، وسط یا چپ قرار میگیرد.
این تنظیم در حالتهایی مثل «نمایش کامل عکس»، «بدون تغییر اندازه» یا زمانهایی که بخشی از کادر خالی میماند، بیشترین اثر را دارد.
تکرار عکس
تکرار برای تصویرهایی کاربرد دارد که نقش الگو یا پسزمینه دارند:
- بدون تکرار: تصویر فقط یک بار نمایش داده میشود.
- تکرار در جهت افقی: تصویر در راستای عرض کادر تکرار میشود.
- تکرار در جهت عمودی: تصویر در راستای ارتفاع کادر تکرار میشود.
- تکرار در دو جهت: تصویر هم افقی و هم عمودی تکرار میشود و کل کادر را به شکل الگو پر میکند.
برای عکسهای معمولی، لوگو، بنر یا تصویر محصول معمولاً «بدون تکرار» مناسب است. تکرار بیشتر برای بافتها، پترنها و تصویرهای کوچک پسزمینه کاربرد دارد.
حالت تمامصفحه
- قابلیت تمام صفحه با کلیک: اگر فعال باشد، کاربر با لمس تصویر میتواند آن را در حالت تمامصفحه مشاهده کند. این گزینه برای عکسهایی که جزئیات مهم دارند، مثل تصویر محصول، نقشه، اینفوگرافیک یا نمونهکار، مفید است.
- قابلیت اشتراکگذاری عکس در حالت تمام صفحه: اگر حالت تمامصفحه فعال باشد، این گزینه امکان اشتراکگذاری تصویر را در همان حالت فراهم میکند. وقتی گزینه تمامصفحه غیرفعال باشد، این تنظیم عملاً قابل استفاده نیست.
نکته
- برای تصاویر محصول/بنر، معمولاً «پوشش کامل چارچوب» ظاهر بهتری میدهد؛ برای عکسهایی که نباید بریده شوند، «نمایش کامل عکس» مناسبتر است.
نکات طراحی و تست
- جایگاه «ویجت عکس» را در چیدمان صفحه با اندازههای مختلف نمایش بررسی کنید.
- عنوان، متن و فاصلهگذاری اطراف ویجت را با سایر اجزای همان صفحه هماهنگ نگه دارید.
- قبل از انتشار، تعامل کاربر با ویجت را روی دستگاه واقعی تست کنید؛ مخصوصاً اگر ویجت داخل گروه، تب، اسلاید یا فرم قرار دارد.