رفتن به مطلب
جامعهٔ برنامه‌نویسان ایران

طراحی و توسعه

  • نوشته‌
    16
  • دیدگاه
    2
  • مشاهده
    3,697

مشارکت‌کنندگان این وبلاگ

طراحی ظاهر سفارشی Qt Quick Controls 2

hamed_masafi

630 بازدید


با سلام و خسته نباشید

زبان QML از زمان معرفی تبدیل به یک زبان پرکاربرد برای طراحی ui شده است. از همین رو تیم کیوت کیت کنترل‌ها با نام Qt Quick Controls را عرضه کرد و در گام بعدی با باز طراحی آن کیت جدیدی با نام Qt Quick Controls 2 را معرفی کرد (یک عدد ۲ به آخر نام اضافه شده است) با منسوخ شدن نسخه اول، نسخه جدید اختصاراً با همان نام Qt Quick Controls شناخته می‌شود.

از آنجایی که این کیت هدف سکوی زیادی دارد (موبایل، دسکتاپ، بورد‌ها و ...) لزوم طراحی تم‌های مختلف برای آن همواره احساس می‌شد. تیم کیوت چندین تم برای آن معرفی کرده است که به شرح زیر می‌باشند:

  • Default: یک ظاهر سبک که هدف آن سادگی و اجرای روان روی سخت‌افزار پایین‌رده است
  • Imagine: یک ظاهر که با تصاویر ۹ بخشی ساخته می‌شود
  • Material: یک ظاهر که از زبان متریال گوگل پیروی می‌کند
  • Universal: یک ظاهر که از استاندارد یونیورسال مایکروسافت پیروی می‌کند.
  • Fusion: پیاده سازی تم فوژیون ویجت برای qml که ظاهری شبیه دسکتاپ ارائه می‌کند

هر کدام از این تم‌ها عالی هستند اما ممکن است یک سازمان نیازی متفاوت داشته باشد. یا بخواهد تغییر کوچکی روی این تم‌ها اعمال کند. تیم کیوت با معرفی Qt Quick Templates این امکان را فراهم کرده‌است تا برنامه‌نویس تم سفارشی خودش را ایجاد کند. در ادامه این نوشته طریقه انجام این کار شرح داده خواهد شد.

برنامه‌هایی که از Qt Quick Controls استفاده می‌کنند می‌توانند یک فایل پیکره‌بندی داشته باشند. نام این فایل باید qtquickcontrols2.conf باشد و در ریشه ریسورس ذخیره شده باشد. یا به عبارتی مسیر زیر باید به این فایل اشاره کند:

qrc:/qtquickcontrols2.conf

یک نمونه از محتویات این فایل مانند زیر است:

[Controls]
Style=Material

[Material]
Primary=#4FC1E9
Accent=DeepPurple
Elevation=10
Variant=Dense

[Universal]
Accent=Red
Theme=System

در این فایل تم برنامه و همچنین پارامتر‌های مربوط به هر تم نوشته می‌شود. توضیح جزئیات این پیکره‌بندی در حوزه این نوشته نیست و ما یک استفاده ساده از آن خواهیم کرد. برای کسب اطلاعات بیشتر در مورد این فایل این لینک را ببینید.

همانگونه که قبلاً گفته شد با Templates می‌توانیم یک ظاهر سفارشی ایجاد کنید. نکته مورد اهمیت این است که ظاهر جدید ما می‌تواند بر مبنای یک ظاهر موجود ساخته شود. برای مثال ممکن است برنامه‌نویس بخواهد از تم Material استفاده کند ولی فقط ظاهر دکمه‌ها را کمی تغییر دهد. یا اینکه یک تم را از پایه شروع کند.

مراحل انجام کار:

ابتدا یک پروژه جدید ایجاد کنید. 

سپس در فولدر پروژه یک فایل متنی با نام qtquickcontrols2.conf ایجاد کرده و محتویات زیر را در آن بنویسید:

[Controls]
Style=:/style
FallbackStyle=Material

همانگونه که مشاهده می‌کنید محتویات بسیار ساده است. ما مشخص کردیم تم ما در مسیر :/style قابل دسترسی است. در خط آخر مشخص شده است اگر کنترلی در این تم وجود نداشت از تم Material استفاده شود.

در قدم بعد باید در فولدر style کنترل‌های سفارشی ساخته شوند. اگر کنترلی قرار نیست سفارشی شود نیازی نیست در این فولدر گنجانده شود چون تم جایگزین Material معرفی شده است و اگر کنترلی وجود نداشت از آن استفاده می‌شود.

نحوه سفارشی کردن کنترل‌ها

و اما قسمت اصلی ماجرا اینجاست. باید همه کنترل‌ها را یک به یک فولدر style ایجاد کنید. ولی لازم نیست هر کنترل را از صفر کدنویسی کنیم. یک راه ساده که من خودم همیشه استفاده می‌کنم این است که سورس کنترل‌ها را از کیوت برداشته و تغییر می‌دهم. سورس را می‌توانید در این سایت پیدا کنید. برای مثال اگر از کیوت نسخه 5.15.2 استفاده می‌کنید و تم پایه شما متریال است، همه چیزی که نیاز دارید در این آدرس موجود است.

حالا در فولدر style یک فایل با نام Button.qml بسازید. سپس محتویات سورس کیوت را از این آدرس برداشته و در آن کپی کنید. سپس تغییرات دلخواه را روی آن انجام دهید. حال اگر برنامه را اجرا کنید، بدون اینکه کد‌های موجود را تغییری دهید، هر جا که Button وجود دارد با تم سفارشی شما ظاهر خواهد شد.

لطفاً نظرات و تجریبات خود را در بخش نظرات زیر پست درج کنید تا در صورت لزوم این نوشته کامل‌تر گردد.

 

  • تشکر شده 2


1 دیدگاه


نظرهای پیشنهاد شده

روش عالی‌ای بود دستت دردنکنه

من برای این کار از qmldir استفاده کرده بودم و ایمپورت مخصوص خودمو ساخته بودم این روش خیلی بهینه تره 👌

به اشتراک گذاری این دیدگاه


لینک به دیدگاه
مهمان
افزودن دیدگاه

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از ۷۵ اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به عنوان یک لینک به جای

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

  • کاربران آنلاین در این صفحه   0 کاربر

    هیچ کاربر عضوی،در حال مشاهده این صفحه نیست.

×
×
  • جدید...