رابط‌کاربری کدام سبک طراحی در کیوت، Qt Widgets یا Qt Quick؟

[کامبیز اسدزاده 618]

با سلام و درود‌های فراوان بر شما دوست‌داران طراحی و توسعه،

امروز نیاز دیدم یک توضیح در رابطه با تفاوت‌های عمدهٔ فناوری ساخت و توسعهٔ رابط‌کاربری در نرم‌افزار‌های تحت فریمورک کیوت ارائه کنم. در این مقاله من به دو سبک متفاوت با کارآیی و اهمیت آن‌ها مطابق با مستندات فریم‌ورک کیوت می‌پردازم و شما می‌توانید بر اساس نیازمندی و برداشت خود از آن، یکی از فناوری‌های لازم را انتخاب و ظاهر برنامهٔ خودتان را با آن آراسته کنید!

رابط‌کاربری (UI) یکی از عوامل اصلی در جذب کاربران و بهبود تجربه‌‌کاربری (UX) است. یک طراحی صحیح و مناسب برای واسط‌کاربری می‌تواند کاربران را به نرم‌افزار شما جذب کند و به معنای واقعی کاربران را متقاعد کند که نرم‌افزار شما صحیح است و قابل استفاده، حتی اگر امر اصلی برنامه اجرای آن باشد. رابط‌کاربری مناسب، کاربران را به یادگیری آسان فرایند‌های نرم‌افزار و همچنین استفاده از آن ترغیب می‌کند. با طراحی یک واسط کاربری ساده و کاربر پسند، می‌توان زمان و هزینه‌ای برای آموزش کاربرانی که قرار است از نرم‌افزار شما استفاده کنند, صرفه جویی کرد.

در نهایت، رابط‌کاربری نرم‌افزار ممکن است انگیزه‌های کاربران برای استفاده از نرم‌افزار شما را افزایش دهد. با انتخاب فوق‌العاده از کاغذ دیواری و فونت‌های جذاب، شما می‌توانید به تاثیر خوبی بر روی انگیزه‌های کاربران برای استفاده از نرم‌افزار خود داشته باشید.

نقل قول

در کل، رابط‌کاربری یکی از اصلی‌ترین عواملی است که شما باید در نرم‌افزار خود به آن توجه کنید. یک رابط‌کاربری مناسب می‌تواند كار را سریعتر و راحت‌تر كند و به شما کمک می‌کند تا به هدف نهایی خود، یعنی جذب کاربران بیشتر و بهبود تجربه‌‌کاربری دست یابید.

اهمیت رابط‌های کاربری مدرن و سنتی

رابط‌کاربری سنتی، یک رابط‌کاربری ابتدائی است، که چندین دهه است به کار می‌رود. این سبک برای محیط‌های کاربردی نسبتاً پایدار و ساده‌تر معرفی شده است، با پنجره‌ها، دستورالعمل‌های پایه، معمول و منو‌‌های کلاسیک. اما اخیراً، رابط‌های کاربری مدرن، تلاش کرده‌اند تا به کاربرانی که حوصله‌ٔ کار با رابط‌کاربری سنتی را ندارند، ارائه شوند چرا که نیاز به تعامل و تجربه‌کاری بهتر بیشتر و بیشتر می‌شود. این رابط‌ها، با استفاده از طراحی مدرن، صفحات پویا، و مفهوم سرعت، زیبایی و حتی تحرک مناسب، می‌خواهند توانایی شما را در مدیریت محیط‌کاری (کار با نرم‌افزار) افزایش دهند. بیشتر رابط‌های کاربری مدرن، به کاربران محیط کاری تمیز و منظم، صفحه اصلی متحرک، آیکون های جذاب و فهرست منوی منظم، نوع قلم و اندازهٔ مناسب و جذاب را ارائه می‌دهد تا با اشتیاق بیشتری از کار با محیط مورد نظر لذت ببرید.

در این سند، تفاوت بین Widgets Qt و Qt Quick و نحوهٔ انتخاب مناسب برای نیازهای برنامه خود را توضیح خواهیم داد. قبل از اینکه به دلایلی بپردازیم که چرا شما ممکن است بخواهید Widgets Qt را به Qt Quick یا برعکس انتخاب کنید، سپس شروع به بررسی آنچه که هر کدام دقیقاً ارائه می‌دهند و در چه شرایطی می‌توانید از آنها استفاده کنید نیز خواهیم داشت.

راه‌کار‌های فریم‌ورک Qt برای طراحی رابط‌کاربری

این فریم‌ورک دارای چندین فناوری برای ایجاد رابط‌کاربری است. در حالی که می‌توان این فناوری‌های مختلف را در صورت نیاز ترکیب و مطابقت داد، یک رویکرد اغلب برای نوع خاصی از رابط کاربری مناسب‌تر از سایرین است. Qt Creator مثال خوبی از برنامه‌ای است که ویجت‌های سنتی Qt را با Qt Quick ترکیب می‌کند. Qt Widgets اساس رابط‌کاربری را تشکیل می‌دهند، در حالی که Qt Quick به عنوان مثال برای اجرای حالت خوش آمدگویی استفاده می شود. بخش‌های زیر معرفی مختصری از فناوری‌های موجود برای ایجاد رابط کاربری و جدول مقایسه‌ای برای کمک به انتخاب بهترین فناوری مناسب ارائه می‌دهند.

دربارهٔ Qt Widget (کیوت ویجت)

ماژول Qt Widgets مجموعه‌ای از عناصر رابط‌کاربری را برای ایجاد رابط‌های کاربری کلاسیک به سبکِ پیش‌فرضِ دسکتاپ فراهم می‌کند. کلاس QWidget قابلیت اولیه برای رندر کردن (ساخت) روی صفحه و مدیریت رویدادهای ورودی کاربر را فراهم می‌کند. تمام عناصر UI که Qt ارائه می‌کند یا زیر کلاس‌های QWidget هستند یا در ارتباط با یک زیر کلاس QWidget استفاده می‌شوند. ایجاد ویجت‌های سفارشی با زیر کلاس QWidget یا یک زیر کلاس مناسب و پیاده‌سازی مجدد کنترل کننده رویداد مجازی انجام می‌شود.

نقل قول

ویجت‌ها عناصر اصلی برای ایجاد رابط‌کاربری در Qt هستند. ویجت‌ها می‌توانند داده‌ها و اطلاعات وضعیت را نمایش دهند، ورودی کاربر را دریافت کنند، و محفظه‌ای برای سایر ویجت‌ها و کنتل‌ها فراهم کنند که باید با هم گروه‌بندی شوند.

سبک‌ها (پوسته‌ها/ظاهر)

سبک‌ها به نمایندگی از ویجت‌ها طراحی می‌شوند و ظاهر و احساس یک رابط‌کاربری گرافیکی را دربر می‌گیرند. ویجت‌های داخلی Qt از کلاس QStyle برای انجام تقریباً تمام طراحی‌های خود استفاده می‌کنند و اطمینان حاصل می‌کنند که دقیقاً شبیه ویجت‌های بومی معادل هستند که در زیر تصاویر مربوط به ظاهر پیش‌فرض سیستم‌عامل‌های ویندوز، لینوکس و مک هستیم.

  

به طور کلی، Qt Style Sheets مکانیزم قدرتمندی است که به شما امکان می‌دهد ظاهر ویجت‌ها را سفارشی کنید، علاوه بر آنچه که قبلاً با زیر کلاس‌بندی QStyle امکان‌پذیر است.

لایه‌بندی‌ها (چیدمان)

چیدمان‌ها روشی ظریف و انعطاف پذیر برای مرتب کردن خودکار ویجت های کودک در ظرف خود هستند. هر ویجت مورد نیاز اندازه خود را از طریق خصوصیات sizeHint و sizePolicy به چیدمان گزارش می‌دهد و طرح‌بندی فضای موجود را بر این اساس توزیع می‌کند.

 

محیط Qt Designer یک ابزار قدرتمند برای ایجاد تعاملی و چیدمان ویجت‌ها در طرح‌بندی است.

کلاس‌های Model/View

معماری model/view کلاس‌هایی را ارائه می‌دهد که نحوه ارائه داده‌ها به کاربر را مدیریت می‌کنند. برنامه‌های مبتنی بر داده که از فهرست‌ها و جداول استفاده می‌کنند، به گونه‌ای ساختار یافته‌اند که داده‌ها و مشاهده را با استفاده از مدل‌ها، نماها و نمایندگان جدا کنند.

محیط توسعهٔ Qt Creator و بخش Qt Designer

ویرایشگر کد پیشرفته Qt Creator به شما امکان می‌دهد نرم‌افزار را به زبان‌های C++، QML، جاوا اسکریپت، پایتون و سایر زبان‌ها بنویسید. این ویژگی تکمیل کد، برجسته سازی نحو، refactoring است و دارای اسناد داخلی در نوک انگشتان شما است.

دربارهٔ کیوت کوئیک (Qt Quick)

ماژول Qt Quick کتابخانهٔ استاندارد برای نوشتن برنامه‌‌های کاربردی QML است. در حالی که ماژول Qt QML موتور QML و زیرساخت زبان را فراهم می‌کند، ماژول Qt Quick تمام انواع اساسی لازم برای ایجاد رابط‌کاربری با QML را ارائه می‌دهد. در واقع یک بوم بصری را ارائه می‌کند و شامل انواعی برای ایجاد و متحرک کردن اجزای بصری، دریافت ورودی کاربر، ایجاد مدل‌ها و نماهای داده‌ها و نمونه‌سازی با تأخیر شیء است.

ماژول Qt Quick نیز یک API QML ارائه می‌کند که انواع QML را برای ایجاد رابط‌های کاربری با زبان QML فراهم می‌کند و هم یک رابط‌برنامه‌نویسی (API) از ++C برای گسترش برنامه‌های QML با کد ++C ارائه می‌کند. این یک مزیت بزرگ است که به شما اجازه می‌دهد رابط‌های مبتنی بر قدرت سی++ را به خوبی ارائه کنید.

پوستهٔ پیش‌فرض (Default) ^{تا کیوت ۵} و پوستهٔ پایه (Basic) ^{از کیوت ۶ به بعد.}

سبک پیش فرض یک سبک همه جانبه ساده و سَبُک است که حداکثر عملکرد را برای کنترل های سریع Qt ارائه می دهد.

 

نقل قول

نکته: از سبک پیش‌فرض به عنوان جایگزینی برای سبک‌های دیگر استفاده می‌شود. اگر یک سبک کنترل خاصی را پیاده سازی نکند، اجرای سبک پیش فرض آن کنترل انتخاب می‌شود.

پوستهٔ فیوژن (Fusion)

 

سبک Fusion یک سبک پلتفرم آگنوستیک است که ظاهری بی‌نظیر دسک‌تاپ را برای کنترل‌های کیوت کوئیک ارائه می‌دهد.

پوستهٔ ایمَجین (Imagine)

سبک Imagine بر اساس دارایی‌های تصویر است. این سبک دارای مجموعه‌ای پیش‌فرض از تصاویر است که به راحتی با ارائه یک فهرست حاوی تصاویر با استفاده از یک قرارداد نامگذاری از پیش تعریف شده قابل تغییر است.

پوستهٔ مک‌او‌اِس (macOS) ^{از کیوت ۶ به بعد.}

 

سبک macOS یک سبک بومی برای macOS است.

پوستهٔ آی‌او‌اِس (iOS) ^{از کیوت ۶ به بعد.}

 

 سبک iOS یک سبک بومی برای iOS است.

نقل قول

توجه: این سبک فقط برای برنامه‌هایی که در iOS اجرا می‌شوند در دسترس است.

پوستهٔ متریال (Material)

 

سبک Material،  طراحی جذابی را بر اساس دستورالعمل‌های طراحی متریال Google ارائه می‌کند، اما به منابع سیستم بیشتری نسبت به سبک پیش‌فرض نیاز دارد.

پوستهٔ یونیورسال (Universal)

 

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

پوستهٔ ویندوز (Windows) ^{از کیوت ۶ به بعد.}

سبک Windows یک سبک بومی برای Windows است.

نقل قول

توجه: این سبک فقط برای برنامه های در حال اجرا در ویندوز موجود است.

اگر هیچ سبکی به صراحت تنظیم نشده باشد، یک سبک پیش فرض استفاده خواهد شد. سبکی که استفاده می‌شود به سیستم‌عامل بستگی دارد:

• سیستم‌عامل اندروید: Material Style
• سیستم‌عامل آی‌او‌اِس: iOS Style
• سیستم‌عامل لینوکس: Fusion Style
• سیستم‌عامل مک‌او‌اِس: macOS Style
• سیستم‌عامل ویندوز: Windows Style

انتخاب سبک در زمان کامپایل

انتخاب سبک زمان کامپایل راهی برای تعیین یک سبک برای استفاده با وارد کردن آن در QML است. به عنوان مثال، برای وارد کردن سبک Material:

import QtQuick.Controls.Material

ApplicationWindow {
    // ...
}

انتخاب سبک در زمان اجرا

انتخاب سبک زمان اجرا راهی برای تعیین یک سبک برای استفاده با وارد کردن QtQuick.Controls است:

import QtQuick.Controls

افزونهٔ QtQuick.Controls استایل و استایل بازگشتی را که در زمان اجرا تنظیم شده‌اند از طریق یکی از روش‌های زیر وارد می‌کند:

• دستورQQuickStyle::setStyle()
• The -style آرگومان خط فرمات
• QT_QUICK_CONTROLS_STYLE متغیر‌های محای
• qtquickcontrols2.conf پیکربندی از طریف فایل

اولویت این رویکردها به ترتیبی است که فهرست شده‌اند، از بالاترین به پایین‌ترین. یعنی استفاده از QQuickStyle برای تنظیم استایل همیشه بر استفاده از آرگومان خط فرمان اولویت دارد.

برای اجرای یک برنامه با یک سبک خاص، یا با استفاده از QQuickStyle در ++C، پوسته را پیکربندی کنید، یک آرگومان خط فرمان را ارسال کنید، یا یک متغیر محیطی را تنظیم کنید. روش دیگر، سبک ترجیحی و ویژگی‌های خاص سبک را می‌توان در یک فایل پیکربندی مشخص کرد.

اولویت این رویکردها به ترتیبی است که در زیر فهرست شده‌اند، از بالاترین به پایین‌ترین. یعنی استفاده از QQuickStyle برای تنظیم استایل همیشه بر استفاده از آرگومان خط فرمان اولویت دارد.

استفاده از Qt Quick Style در ++C

 رابط‌های QQuickStyle C++ API پیکربندی یک سبک خاص را ارائه می‌کند. مثال زیر یک برنامه Qt Quick Controls را با سبک Material اجرا می‌کند:

QQuickStyle::setStyle("Material");

استفاده از روش آرگومان‌های خط فرمان

ارسال آرگومان خط فرمان-style راه مناسبی برای آزمایش سبک‌های مختلف است. این روش بر سایر روش های ذکر شده در زیر ارجحیت دارد. مثال زیر یک برنامه Qt Quick Controls را با سبک Material اجرا می‌کند:

./app -style material

استفاده از روش متغیر‌های محیطی

تنظیم متغیر محیطی QT_QUICK_CONTROLS_STYLE را می‌توان برای تنظیم ترجیح سبک در سراسر سیستم استفاده کرد که بر فایل پیکربندی ذکر شده در زیر ارجحیت دارد. مثال زیر یک برنامه Qt Quick Controls را با سبک جهانی اجرا می‌کند:

QT_QUICK_CONTROLS_STYLE=universal ./app

استفاده از روش پیکربندی فایل

کنترل‌های کیوت کوئیک، از یک فایل پیکربندی خاص پشتیبانی می‌کند، :/qtquickcontrols2.conf، که در منابع یک برنامه تعبیه شده است.

فایل پیکربندی می‌تواند سبک ترجیحی (ممکن است با یکی از روش‌هایی که قبلا توضیح داده شد لغو شود) و ویژگی‌های خاص سبک را مشخص کند. مثال زیر مشخص می کند که سبک ترجیحی سبک Material است.

[Controls]
Style=Material

سفارشی‌سازی کنترل‌های کیوت کوئیک

کنترل کیوت کوئیک از یک سلسله مراتب (درخت) از آیتم‌ها تشکیل شده است. به منظور ارائه ظاهر و احساس سفارشی، پیاده‌سازی پیش‌فرض QML هر آیتم را می‌توان با یک سفارشی جایگزین کرد.

گاهی اوقات شما می‌خواهید برای یک بخش خاص از UI خود یک ظاهر «یکباره» ایجاد کنید و در هر جای دیگر از یک سبک کامل استفاده کنید. شاید از سبکی که استفاده می‌کنید راضی باشید، اما دکمه خاصی وجود دارد که اهمیت خاصی دارد.

 

پشتیبانی از High-DPI در کیوت کوئیک

کنترل‌های کیوت کوئیک، از مقیاس‌گذاری چند-سکویی با DPI (نقطه در اینچ) بالا که در Qt 5.6 معرفی شده است، پشتیبانی می‌کند. این ویژگی انتخابی است و می‌توان آن را با تنظیم ویژگی برنامه Qt::AA_EnableHighDpiScaling در ++C قبل از ساخت QGuiApplication فعال کرد:

#include <QGuiApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QGuiApplication::setAttribute(Qt::AA_EnableHighDpiScaling); // <--
    QGuiApplication app(argc, argv);
    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    return app.exec();
}

محیط طراحی اختصاصی Qt Design Studio

• فرآیند توسعه خود را با پر کردن شکاف بین طراحان و توسعه‌دهندگان متحول کنید تا دیدگاه‌های طراحی خود را به رابط های کاربری آماده تولید تبدیل کنید.
• طراحی‌های رابط‌کاربری را با ابزارهای طراحی مانند Figma، Adobe XD یا Adobe Photoshop ایجاد کنید. آنها را به استودیوی طراحی Qt وارد کنید، جایی که کد به طور خودکار تولید شده و آماده استفاده توسط توسعه‌دهندگان است.
• تعاملات و رفتارهای پویا را شبیه‌سازی و تایید کنید. هر چیزی که در استودیوی طراحی Qt ساخته شده است ذاتاً کراس پلتفرم است و می‌تواند در هر سخت‌افزار یا محیط سیستم‌عاملی کامپایل شود.

 

وقتی در مورد ایجاد رابط‌کاربری صحبت می‌کنیم، فقط در مورد ایجاد یک ماکت با دارایی‌های موجود صحبت نمی‌کنیم. با Qt Design Studio، دارایی‌های شما تبدیل به یک ترکیب رابط‌کاربری می‌شود که آماده عملکرد است.

تفاوت‌های عمدهٔ Qt Widgets

• طراحی با این ماژول فقط بر پایهٔ زبان‌های برنامه‌نویسی ++C و Python در امکان‌پذیر است.
• .سبک و ظاهر بومی در پلتفرم‌های دسکتاپ
  • اما نه در پلتفرم‌های موبایل.
  • امکان سفارشی شدن را دارد.
• به بک‌اند بومی جهت ساخت نیاز ندارد.
  • می‌تواند در مواقع لزوم از رابط‌های برنامه‌نویسی بومی بک‌اندی هر پلتفرم استفاده کند.
• سبک پایه را ارائه می‌کند، روان نیست، اما امکان تعریف انیمیشن را ارائه می‌کند.
• به واسطهٔ زیر کلاس‌ها یا کلاس‌های سفارشی خودتان می‌توانید رفتار‌های ویجت‌ را باز تعریف کنید.
• محیط اختصاصی طراحی و توسعهٔ Qt Designer

تفاوت‌های عمدهٔ Qt Quick

• طراحی با این ماژول به صورت پایه به واسطهٔ QML امکان‌پذیر است.
  • هرچند هنوز هم برخی از نیازمندی‌ها به واسطهٔ ++C و Python انجام می‌شود.
  • شما می‌توانید ماژول‌ها و کامپوننت‌های سفارشی خوبی به واسطهٔ ++C برای QML طراحی کنید.
• ظاهر کاربری بومی تحت ماژول Qt Quick Controls از نسل کیوت ۶ به بعد ممکن شده است.
• تطبیق و دریافت اطلاعات پوسته برای اندروید در زمان نیاز ممکن است.
• به بک‌اند بومی و پس‌زمینه وابسته است.
  • همچنین می‌توانید ایتم‌های خود را به صورت مستقیم با بک‌اند بومی ارائه کنید.
• می‌توانید پوستهٔ روان و جذابی را تعریف کنید.
  • پیاده‌سازی انیمیشن‌ها و جلوه‌های بصری پیچیده بسیار ساده قابل پیاده‌سازی شدن است.
  • جلوه‌های گرافیکی به راحتی قابل تعریف هستند.
• امکان سفارشی‌سازی رفتار‌های آیتم و کنترل‌ها وجود دارد.
  • به واسطهٔ گسترش و یا ساخت کامپوننت‌های سفارشی خود بر اساس انواع موجود در Qt Quick.
• علاوه بر پشتیبانی از محیط Qt Designer، به محیط اختصاصی و پیشرفتهٔ طراحی و توسعهٔ Qt Design Studio مجهز است.

چه زمانی باید یکی از این فناوری‌ها را به دیگری ترجیح دهیم؟

• Qt Widgets
  • اگر شما نیاز به یک رابط‌کاربری ساده و سریع نیاز دارید.
  • اگر نمی‌خواهید با JavaScript سرو کار داشته باشید.
• Qt Quick
  • زمانی که می‌خواهید رابط‌های کاربری جذاب و خلاقانه تولید کنید.
  • زمانی که می‌خواهید برنامهٔ خود را برای موبایل و دستگاه‌های جاسازی شده (امبد) ارائه کنید.
  • وقتی هدفتان ساخت نرم‌افزار‌های چند-سکویی باشد.
  • زمانی که می‌خواهید بیشترین جذابیت و کارآیی را از نظر UI و UX ارائه کنید.

آشنایی با زیرساخت RHI و کارآیی دو فناوری کیوت ویجت و کیوت کوئیک

بسیاری از کاربران با توجه به کد‌های سی++ در کیوت ویجت، بر این باورند که ساخت و توسعهٔ رابط‌های کاربری با Qt Widgets عموماً سریع‌تر و از کارآیی بهتری برخوردار است. این حقیقت در قبل از زمان فناوری جدید از نسل کیوت کوئیک اعتبار بسیاری داشت، اما با توجه به توسعهٔ زیرساخت‌های کیوت در نسل‌های ۵.۱۵ و ۶ به بعد، تمامی فرایند رندرینگ به لطف کد‌های سی‌پلاس‌پلاس به صورت بومی تحت معماری RHI انجام می‌شوند و این مسأله دیگر حائز اهمیت نیست، مگر این‌که دلایل شما برای انتخاب کیوت ویجت صرفاً دسترسی ساخت به رابط‌کاربری ساده‌تر و عدم اهمیت داشتن سبکِ نوین باشد.

زیرساخت QRhi، یک رابط سخت‌افزاری رندر Qt، انتزاع گرافیکی داخلی Qt است که در آن API‌های سه بعدی مانند OpenGL، Vulkan، Metal و Direct 3D درگیر هستند. در مقایسه با 5.15، پیشرفت‌های اصلی در نسخه 6.0، اصلاحات پولیش زیاد اینجا و آنجا و مهمتر از همه، مجموعه بزرگی از بهینه‌سازی عملکرد است. این بهینه سازی به طور کامل به صورت بومی و رابط‌های برنامه‌نویسی ترکیبی با ++C پیاده‌سازی شده است و کارآیی خروجی در تولید رابط‌های خلاقانه، جلوه‌های بصری ۲ و ۳ بعدی بسیار عالی خواهد بود.

 

سخن پایانی

ساخت و توسعهٔ یک رابط‌کاربری امروزه یکی از مهم‌ترین معیار‌های سنجش کیفی نرم‌افزار در سمت کاربر است، اگر این موضوع برای شما اهمیت بسیار دارد، قطعاً باید به روش‌های اختصاصی در طراحی سوق پیدا کنید. در غیر این صورت نیاز به کد‌نویسی بیشتر، درک و بازنویسی انتزاع‌های فراوان در سمت کد‌های خام به واسطهٔ Qt Widgets بسیار خسته کننده خواهد بود.

نقل قول

اگر این مقاله برای شما مفید بود، آن را با دوستان خود به اشتراک بگذارید.