انواع پایه
عناصر را می توان به عناصر بصری و غیر بصری گروه بندی کرد. یک عنصر بصری (مانند مستطیل) دارای یک هندسه است و معمولاً یک ناحیه را روی صفحه نمایش می دهد. یک عنصر غیر بصری (مانند یک تایمر) عملکرد کلی را ارائه می دهد که معمولاً برای دستکاری عناصر بصری استفاده می شود.
در حال حاضر، ما بر روی عناصر بصری پایه، مانند آیتم، مستطیل، متن، تصویر و Mouse Area تمرکز خواهیم کرد. با این حال، با استفاده از ماژول Qt Quick Controls 2، می توان رابطهای کاربری ساخته شده از اجزای پلت‌فرم استاندارد مانند دکمه‌ها، برچسب‌ها و لغزنده‌ها را ایجاد کرد.
عنصر Item
آیتم عنصر پایه برای همه عناصر بصری است، زیرا همه عناصر بصری دیگر از آیتم به ارث می برند. به خودی خود چیزی را نمایش نمی‌دهد، اما تمام ویژگی هایی را که در همه عناصر بصری مشترک هستند، تعریف می کند:
| گروه | پراپرتی‌ها |
هندسه (Geometry) | ویژگی‌های x و y موقعیت گوشه سمت چپ-بالای عنصر را تعریف می‌کنند، width و height گسترش عنصر را تعریف می‌کنند و همچنین z نیز ترتیب نمایش عناصر بر روی‌هم را مشخص می کند کعه می‌تواند بالاتر یا پایین تر نمایش داده شود. |
مدیریت چیدمان (Layout handling) | لنگرها (anchors) شامل (چپ، راست، بالا، پایین، مرکز عمودی و افقی) برای جایگیری عناصر نسبت به دیگر عناصر استفاده می‌شوند. |
مدیریت کلید (Key handling) | ویژگی‌های افزوده شده Key و KeyNavigation برای کنترل کنترل کلید و ویژگی input focus برای فعال کردن مدیریت کلید در وهله اول است. |
دگرگونی (Transformation) | دگرگونی‌های مقیاس و چرخش و لیست ویژگی‌های تبدیل عمومی برای تبدیل x,y,z و نقطه مبدا آنها |
نمایشی (Visual) | ویژگی opacity برای کنترل شفافیت، visible برای نمایش یا مخفی کردن، clip برای مهار نمایش به مرز عنصر و smooth برای ارتقا کیفیت رندر |
تعریف حالت (State definition) | لیست ویژگی state با پشتیبانی از یک لیست از حالات و وضعیت فعلی و همچنین لیست ویژگی transitions برای متحرک کردن تغییر حالات |
برای درک بهتر ویژگی‌های مختلف، سعی می‌کنیم آنها را در طول این فصل در زمینه عنصر ارائه شده معرفی کنیم. لطفاً به یاد داشته باشید که این ویژگی های اساسی در هر عنصر بصری موجود است و در بین این عناصر یکسان عمل می کند.
توجه
عنصر Item اغلب به عنوان یک نگهدارنده برای عناصر دیگر، مشابه عنصر div در HTML استفاده می شود.
عنصر مستطیل (Rectangle)
عنصر مستطیل (Rectangle) یک Item را گسترش می‌دهد و آن را با رنگ پر می‌کند. علاوه بر این، از مرزهای تعریف شده توسط border.color و border.width پشتیبانی می کند. برای ایجاد مستطیل های گرد می توانید از ویژگی radius استفاده کنید.
به سه روش می‌توانیم به پراپرتی color مقدار‌دهی کنیم
- با استفاده از نام رنگ‌های SVG
- توسط یک سه گانه یا چهارگانه هگزا دسیمال به ترتیب به شکل "#RRGGBB" و "#AARRGGBB". به عنوان مثال، رنگ قرمز مربوط به سه گانه "#FF0000" و آبی کمی شفاف به چهار "#800000FF" است.
- استفاده از توابع Qt.rgba(), Qt.hsva(), Qt.hsla(), Qt.darker(), Qt.lighter(), Qt.tint()
علاوه بر رنگ پر و حاشیه، مستطیل از شیب های سفارشی نیز پشتیبانی می کند.
یک گرادیان با یک سری توقف‌های گرادیان تعریف می شود. هر ایستگاه دارای یک موقعیت و یک رنگ است. position موقعیت را در محور y مشخص می کند (0 = بالا، 1 = پایین). رنگ GradientStop رنگ را در آن موقعیت مشخص می کند.
توجه
یک مستطیل بدون تنظیم عرض/ارتفاع قابل مشاهده نخواهد بود. این اغلب زمانی اتفاق می‌افتد که چندین مستطیل بسته به یکدیگر عرض (ارتفاع) دارید و مشکلی در منطق ترکیب شما پیش آمده است. پس مراقب باشید!
توجه
امکان ایجاد شیب زاویه دار وجود ندارد. برای این کار بهتر است از تصاویر از پیش تعریف شده استفاده کنید. یک امکان این است که فقط مستطیل را با گرادیان بچرخانید، اما توجه داشته باشید که هندسه مستطیل چرخانده تغییر نخواهد کرد و در نتیجه منجر به سردرگمی خواهد شد زیرا هندسه عنصر با ناحیه قابل مشاهده یکسان نیست. از دیدگاه نویسندگان، واقعاً بهتر است از تصاویر گرادیان طراحی شده در این مورد استفاده کنید.
عنصر متن (Text)
برای نمایش متن می توانید از عنصر Text استفاده کنید. قابل توجه ترین ویژگی آن، ویژگی text از نوع رشته است. عنصر عرض و ارتفاع اولیه خود را بر اساس متن داده شده و فونت استفاده شده محاسبه می کند. فونت را می توان با استفاده از گروه ویژگی فونت (به عنوان مثال font.family، font.pixelSize، …) تحت تأثیر قرار داد. برای تغییر رنگ متن فقط از ویژگی color استفاده کنید.
متن را می توان با استفاده از ویژگی های horizontalAlignment و verticalAlignment در هر طرف و مرکز تراز کرد. برای بهبود بیشتر رندر متن، می‌توانید از ویژگی style و styleColor استفاده کنید، که به شما امکان می‌دهد متن را در حالت طرح کلی، برجسته و فرورفته ارائه دهید. برای متن طولانی تر، شما اغلب می خواهید یک موقعیت شکست مانند یک متن بسیار طولانی تعریف کنید، این را می توان با استفاده از ویژگی elide به دست آورد. ویژگی elide به شما این امکان را می دهد که موقعیت elide را در سمت چپ، راست یا وسط متن خود تنظیم کنید. اگر نمی‌خواهید «…» حالت elide ظاهر شود اما همچنان می‌خواهید متن کامل را ببینید، می‌توانید متن را با استفاده از ویژگی wrapMode نیز بپیچید (فقط زمانی کار می‌کند که عرض به طور صریح تنظیم شده باشد):
یک عنصر Text فقط متن داده شده را نمایش می دهد. هیچ دکوراسیون پس زمینه ای را ارائه نمی دهد. علاوه بر متن رندر شده، عنصر Text شفاف است. این بخشی از طراحی کلی شما است که یک پس زمینه معقول برای عنصر متن فراهم کنید.
توجه
توجه داشته باشید که عرض (ارتفاع) اولیه متن به رشته متن و مجموعه فونت بستگی دارد. یک عنصر متنی بدون تنظیم عرض و بدون متن قابل مشاهده نخواهد بود، زیرا عرض اولیه 0 خواهد بود.
توجه
اغلب زمانی که می خواهید عناصر متنی را چیدمان کنید، باید بین تراز کردن متن در کادر مرزی عنصر متن یا تراز کردن خود کادر مرز عنصر تفاوت قائل شوید. در حالت اول، شما می خواهید از ویژگی های horizontalAlignment و verticalAlignment استفاده کنید و در مورد دوم، می خواهید هندسه عنصر را دستکاری کنید یا از لنگرها استفاده کنید.
عنصر تصویر
یک عنصر Image می تواند تصاویر را در فرمت های مختلف نمایش دهد (مانند PNG، JPG، GIF، BMP، WEBP). برای لیست کامل فرمت های تصویری پشتیبانی شده، لطفاً به مستندات Qt مراجعه کنید. علاوه بر ویژگی source برای ارائه URL تصویر، حاوی fillMode است که رفتار تغییر اندازه را کنترل می کند.
توجه
یک URL می‌تواند یک مسیر محلی با اسلش‌های رو به جلو ( «./images/home.png») یا یک پیوند وب (مانند «http://example.org/home.png») باشد.
توجه
عناصر تصویر با استفاده از PreserveAspectCrop نیز باید برش را فعال کنند تا از نمایش داده های تصویر در خارج از مرزهای تصویر جلوگیری شود. به طور پیش فرض برش غیرفعال است (" clip: false"). برای محدود کردن نقاشی به عناصر محدود کننده مستطیل، باید برش (" clip: true") را فعال کنید. این می تواند بر روی هر عنصر بصری استفاده شود.
نکته
با استفاده از C++ می توانید ارائه دهنده تصویر خود را با استفاده از QQuickImageProvider ایجاد کنید. این به شما این امکان را می دهد که تصاویر را در جریان بارگذاری و بارگذاری تصویر رشته ای ایجاد کنید.
عنصر ناحیه موس (MouseArea)
برای تعامل با این عناصر اغلب از یک MouseArea استفاده می کنید. این یک آیتم نامرئی مستطیلی است که در آن می توانید رویدادهای ماوس را ضبط کنید. ناحیه ماوس اغلب همراه با یک آیتم قابل مشاهده برای اجرای دستورات زمانی که کاربر با بخش بصری تعامل دارد استفاده می شود.
توجه
این یک جنبه مهم Qt Quick است، مدیریت ورودی از ارائه بصری جداست که به شما این امکان را می‌دهد که یک عنصر رابط را به کاربر نشان دهید، اما منطقه تعامل بزرگتری داشته باشید.
توجه
برای تعامل پیچیده تر، کنترل کننده‌های Qt Quick با Qt 5.12 معرفی شدند. آنها به جای عناصری مانند MouseArea و Flickable در نظر گرفته شده‌اند و کنترل و انعطاف پذیری بیشتری را ارائه دهند. ایده این است که به جای متمرکز کردن مدیریت همه رویدادها از یک منبع معین در یک عنصر واحد، که قبلاً چنین بود، یک جنبه تعامل را در هر نمونه کنترل کننده مدیریت کنیم.
کانال تلگرام لینک ویدئو(به زودی)
