بسیاری از برنامه‌ها با استفاده از کد پایتون ساخته می‌شوند، که در بسیاری از موارد عالی عمل می‌کند، اما با بزرگ‌تر شدن برنامه‌ها یا پیچیده‌تر شدن رابط‌ها، تعریف همه ویجت‌ها به صورت برنامه‌نویسی کمی دشوار است. خبر خوب این است که Qt یک ویرایشگر گرافیکی به نام Qt Designer دارد که حاوی ویرایشگر کشیدن و رها کردن است. با استفاده از Qt Designer می توانید رابط کاربری خود را به صورت بصری تعریف کنید و سپس به راحتی منطق برنامه را بعدا به آن اضافه کنید.
در این مقاله به اصول ایجاد رابط کاربری با Qt Designer می پردازیم. اصول، طرح‌بندی و ابزارک‌ها یکسان هستند، بنابراین می‌توانید همه چیزهایی را که قبلاً یاد گرفته‌اید اعمال کنید. البته باید با API پایتون نیز آشنا باشید تا بتوانید بعداً منطق برنامه خود را با اینترفیس هماهنگ کنید.
برای ادامه این آموزش، باید Qt Creator را نصب کنید. می توانید آن را به صورت رایگان از وب سایت Qt دانلود کنید. به https://www.qt.io/download بروید و بسته Qt را دانلود کنید. البته، شما فقط می توانید Creator را نصب کنید.
Qt Creator را باز کنید، پنجره اصلی را خواهید دید. طراح از برگه سمت چپ قابل دسترسی است. با این حال، برای فعال کردن آن، ابتدا باید یک فایل .ui را فعال کنید.
برای ایجاد یک فایل .ui، به File > New File or Project بروید. . . در پنجره ظاهر شده، Qt را در قسمت Files and Classes در سمت چپ انتخاب کنید، سپس Qt Designer Form را در سمت راست انتخاب کنید. متوجه خواهید شد که روی آن یک نماد “ui” وجود دارد که نوع فایلی را که ایجاد می کنید نشان می دهد.
در مرحله بعد از شما سوال می شود که چه نوع ویجتی را می خواهید بسازید. اگر برنامه ای را اجرا می کنید، پنجره اصلی انتخاب مناسبی است. با این حال، می‌توانید فایل‌های .ui را برای دیالوگ‌های سفارشی، فرم‌ها و فایل‌های اجرایی ترکیبی ایجاد کنید.
سپس یک نام برای فایل انتخاب کنید و پوشه فایل را ذخیره کنید. فایل .ui خود را با همان نام کلاسی که در حال ایجاد آن هستید ذخیره کنید تا دستورات بعدی آسانتر شود.
در نهایت، اگر از سیستم کنترل نسخه استفاده می کنید، می توانید انتخاب کنید که آیا فایل را به سیستم کنترل نسخه خود اضافه کنید یا خیر. این مرحله را رد کنید زیرا بر رابط کاربری شما تأثیر نمی گذارد.
در کنار این مقاله بخوانید: آموزش شی گرایی در پایتون برای مبتدیان (به زبان ساده)
چیدمان پنجره اصلی
پنجره اصلی جدید ایجاد شده در طراح UI به شما نشان داده می شود. در ابتدا کار زیادی برای انجام دادن وجود ندارد، فقط یک ناحیه کاری خاکستری است که نمایانگر پنجره همراه با شروع نوار منوی پنجره است.
همچنین می توانید با کلیک بر روی پنجره و کشیدن دستگیره های آبی رنگ در هر گوشه، اندازه پنجره را تغییر دهید.
اولین قدم در ساختن یک برنامه، افزودن تعدادی ویجت به پنجره است. در اولین برنامه‌هایمان، یاد گرفتیم که برای تنظیم ویجت مرکزی برای QMainWindow، باید .setCentralWidget را فراخوانی کنیم. اجازه دهید استفاده کنیم ما همچنین دیدیم که برای افزودن چندین ویجت با طرح‌بندی یکسان، به یک QWidget متوسط نیاز داریم تا طرح‌بندی را اعمال کنیم، نه اینکه طرح‌بندی را مستقیماً به پنجره اضافه کنیم.
Qt Creator این کار را به صورت خودکار برای شما انجام می دهد.
برای افزودن چندین ویجت به یک پنجره اصلی که دارای طرح بندی است، ابتدا ویجت های خود را روی QmainWindow بکشید. در اینجا 3 برچسب می کشیم. مهم نیست آنها را کجا رها کنیم.
ما 2 ویجت را با کشیدن آنها روی پنجره و تبدیل آنها به فرزندان آن پنجره ایجاد کردیم. حالا می توانیم آنها را ردیف کنیم.
QmainWindow را در قسمت سمت راست پیدا کنید (باید در بالا باشد). در زیر می توانید centralwidget را ببینید که ویجت مرکزی پنجره را نشان می دهد. نماد مرکزی یک ماژول اجرایی طرح‌بندی فعلی اعمال شده را نشان می‌دهد. اولین دایره قرمز دارد که نشان می دهد هیچ پیکربندی فعالی وجود ندارد.
روی شی QmainWindow کلیک راست کرده و “Layout” را در منوی کشویی پیدا کنید.
سپس لیستی از تم هایی را می بینید که می توانید در پنجره اعمال کنید. Horizontal Layout را انتخاب کنید تا این چیدمان روی فایل اجرایی اعمال شود.
R انتخاب شده روی ویجت مرکزی QMainWindow اعمال می شود و ویجت ها به چیدمان اضافه می شوند و مطابق با چیدمان انتخاب شده مرتب می شوند. توجه داشته باشید که در Qt Creator می توانید ویجت ها را در چیدمان موجود بکشید و مرتب کنید یا طرح بندی دیگری را به دلخواه انتخاب کنید.
هر زبان برنامه نویسی را رایگان یاد بگیرید
با استفاده از فایل .ui که ایجاد کردید
ما یک رابط کاربری بسیار ساده ایجاد کرده ایم. مرحله بعدی وارد کردن این رابط به پایتون و استفاده از آن برای ایجاد یک برنامه است.
ابتدا فایل .ui را ذخیره کنید. به‌طور پیش‌فرض، این فایل در مکانی که هنگام ایجاد آن انتخاب کرده‌اید ذخیره می‌شود، اما در صورت تمایل می‌توانید مکان دیگری را انتخاب کنید.
فایل .ui با فرمت XML خواهد بود. برای استفاده از رابط کاربری پایتون، دو روش جایگزین داریم:
1- با استفاده از متد loadUI() در کلاس بارگذاری کنید
2- با استفاده از ابزار pyuic6 رابط را به پایتون تبدیل کنید
در زیر به این دو روش پرداخته شده است. من شخصا ترجیح می دهم UI را به یک فایل پایتون تبدیل کنم تا همه چیز از نظر برنامه نویسی و بسته بندی ثابت بماند.
بارگذاری مستقیم فایل .ui
برای بارگذاری فایل‌های .ui می‌توانیم از ماژول uic موجود در PyQt6 استفاده کنیم. روش ()uic.loadUI. این روش نام فایل یک فایل UI را می گیرد و با ایجاد یک شی PyQt6 کاملا کاربردی آن را بارگذاری می کند.
سیستم واردات
از PyQt6 واردات QtWidgets، uic
برنامه = QtWidgets.QApplication(sys.argv)
window = uic.loadUi (“mainwindow.ui”)
window.show()
app.exec()
از آنجا که متد uid.loadUI() یک شی نمونه را تبدیل می کند، نمی توانید کد __init__() سفارشی را پیوست کنید. با این حال، می توانید این کار را از طریق یک ویژگی تنظیمات سفارشی انجام دهید.
برای بارگیری یک رابط کاربری از بلوک __init__ یک ویجت موجود (به عنوان مثال QmainWindow)، می توانید از uic.loadUI (نام فایل، خود) برای PyQt6 استفاده کنید.
سیستم واردات
از PyQt6، QtCore، QtGui، QtWidgets را وارد کنید
از PyQt6 import uic
کلاس MainWindow (QtWidgets.QMainWindow):
def __init__(self, *args, **kwargs):
super().__init__(*args، **kwargs)
uic.loadUi (“mainwindow.ui”، self)
برنامه = QtWidgets.QApplication(sys.argv)
window = MainWindow()
window.show()
app.exec_()
یک فایل .ui را به پایتون تبدیل کنید
برای تولید یک فایل منبع پایتون، pyuic6 را از خط فرمان اجرا کنید. فایل .ui و فایل هدف را با پارامتر -o به خروجی ارسال کنید. مثال زیر یک فایل پایتون به نام MainWindow.py ایجاد می کند که شامل رابط کاربری ما می شود.
pyuic6 mainwindow.ui -o MainWindow.py
اگر از PyQt5 استفاده می کنید، این ابزار “pyuic4” نامیده می شود.
می توانید فایل MainWindow.py به دست آمده را در یک ویرایشگر مشاهده باز کنید، اما نباید این فایل را ویرایش کنید. مزیت استفاده از Qt Creator این است که می توانید برنامه را در حین توسعه ویرایش، بهینه سازی و به روز رسانی کنید. هر تغییری که در این فایل ایجاد شده باشد، پس از به‌روزرسانی از بین می‌رود. با این حال، هنگام وارد کردن و استفاده از فایل در برنامه های خود، می توانید هر چیزی را که می خواهید لغو و تغییر دهید.
وارد کردن فایل پایتون به دست آمده مانند هر فایل دیگری است. شما می توانید به صورت زیر وارد کلاس خود شوید. ابزار pyuic6 UI را به نام شی تعریف شده در Qt Creator اضافه می کند، و این شیئی است که می خواهید وارد کنید.
از MainWindow Ui_MainWindow را وارد کنید
برای ایجاد پنجره اصلی در برنامه خود، طبق معمول یک کلاس ایجاد کنید، اما به عنوان زیر کلاس QmainWindow و کلاس Ui_MainWindow که وارد کرده اید. در نهایت، self.setupUi(self) را از __init__ فراخوانی کنید تا اینترفیس مقداردهی شود.
سیستم واردات
از PyQt6 واردات QtWidgets، uic
از MainWindow Ui_MainWindow را وارد کنید
کلاس MainWindow (QtWidgets.QMainWindow، Ui_MainWindow):
def __init__(خود، *args، obj=هیچکدام، **kwargs):
super(MainWindow، self).__init__(*args، **kwargs)
self.setupUi(self)
برنامه = QtWidgets.QApplication(sys.argv)
window = MainWindow()
window.show()
app.exec()
این دقیقاً به همان نتیجه قبلی منجر می شود.
این! اکنون پنجره شما به طور کامل پیکربندی شده است. از آنجایی که استفاده از یک فایل .ui کد مختص UI را خلاصه می کند، می توانید از همان الگو برای بارگذاری هر رابطی که طراحی می کنید استفاده کنید.
اضافه کردن منطق برنامه
می‌توانید با ویجت‌هایی که با استفاده از Qt Creator ایجاد شده‌اند، طوری رفتار کنید که انگار آنها را در کد ایجاد کرده‌اید. برای آسانتر کردن کارها، uic همه ویجت‌های فرزند را با نام‌های شناسه آنها همانطور که در Qt Creator مشخص شده است، به شی پنجره اضافه می‌کند.
دوره های آموزشی
فراموش نکنید که دانلود کنید: آموزش پایتون از صفر تا صد