پایتون در عمق

آموزش زبان پایتون به زبان فارسی

پایتون در عمق

آموزش زبان پایتون به زبان فارسی

۲ مطلب با موضوع «طراحی ظاهر کاربری گرافیکی با پایتون» ثبت شده است

چه روز خوبی برای کار با PyQt ــست :-)

در بخش قبل ( آموزش مقدماتی طراحی رابط کاربری با PyQt ) کمی آشناشدیم، 

حال با روشی منطقی ادامه میدهیم.


در بخش قبل یک اینستنس از کلاس QMainWindow ساختیم اما در دنیای واقعی این درست نیست!

ٌٌQMainWindow در واقع به عنوان فریم ورکی است برای ساختن پنجره ها. در واقع پنجره ها اینستنس هایی از فرزندان این کلاس اند. بیایید مثال بخش قبل را اصلاح کنیم:

import sys

from PyQt4 import QtGui


class myCustomWindow(QtGui.QMainWindow):
     def __init__(self):
          super(myCustomWindow,self).__init__()
          self.setWindowTitle("Python In Depth")
          window_icon = QtGui.QIcon("pythonindepth.png") # Adress file ra vared mikonim
          self.setWindowIcon(window_icon)
          self.resize(300,200) # arz va ertefa bar hasbe pixel
          self.move(400,200) # arz va tool bar hasbe pixel
     
def main():
     app = QtGui.QApplication(sys.argv)
     my_window = myCustomWindow()
     my_window.show()
    
     app.exec_()
    
if __name__ == "__main__":
    main()

کلاس سفارشی myCustomWindow ایجاد کردیم و my_window را از این کلاس جدید ایجاد کردیم. تنظیمات پنجره را هم به __init__ کلاس جدیدمان منتقل کردیم.


حال چگونه به برنامه خود دکمه ، منو ، نوشته ، جدول و ... اضافه کنیم؟

بسیار خوب! پای کیوتی (PyQt) همه اینها را با عنوان Widget میشناسد! در نمودار زیر ویدجت های مختلف را میبینیم که همگی فرزندی از کلاس QWidget اند :

برای استفاده از این ویدجت ها لازم است از کلاسشان اینستنس بسازیم.

جهت خوانایی بهتر کد، این ویدجت ها را در متدی با نام createWidget در کلاس myCustomWindow وارد کنیم:

def createWidgets(self):
          self.label = QtGui.QLabel("Esmetun?") # anche ke mikhahim in widget nemayesh dahadra be onvan parametr midahim
          self.lineEdit = QtGui.QLineEdit()
          self.button = QtGui.QPushButton("Vurud")

  اما این کافی نیست! باید نحوه چینش ویدجت ها را هم مشخص کنیم!

برای این منظور باید میان طراحی ایستا(ثابت) یا طراحی پویا (relative - وابسته - Dynamic) یکی را برگزینیم.

برای اطلاعات بیشتر مراجعه کنید به [ بعدا تکمیل خواهد شد ]


برای طراحی دینامیکی میتوانیم از کلاس های QHBoxLayout یا QVBoxLayout یا QGridLayout ویا QFormLayout استفاده کنیم.
برای مثال:

  • QHBoxLayout : ویدجت ها را به طور افقی میچیند.
  • QVBoxLayout : ویدجت ها را به طور عمودی میچیند.
در بخش های بعد بیشتر با نحوه Layout بندی آشنا خواهیم شد.
فی الحال از QHBoxLayout برای چینش افقی ویدجت هایی که ساخته بودیم استفاده میکنیم، به این شکل که:
          h_box = QtGui.QHBoxLayout()
          h_box.addWidget(self.label)
          h_box.addWidget(self.lineEdit)
          h_box.addWidget(self.button)
یک اینستنس از کلاس QHBoxLayout ایجاد میکنیم و ویدجت های مورد نظر را در آن add میکنیم
حال باید h_box را به یکی از اجزای پنجره اصلی منسوب کنیم. با اینکار ویدجت های داخل آن هم نمایش داده میشوند
اجزای اصلی یک QMainWindow را بنگرید:
[در ادامه آموزش بیشتر با این اجزا آشنا خواهیم شد] Central Widget بخش اصلی پنجره را تشکیل میدهد. پس لی اوت h_box را به آن اعمال میکنیم، اما چون مستقیما اینکار ممکن نیست از یک متغییر دیگر استفاده میکنیم
          myCentralWidget = QtGui.QWidget()
          myCentralWidget.setLayout(h_box)
متغییر myCentralWidget را از کلاس پایه تمام ویدجت ها میسازیم. برای دسته بندی ویدجت ها هم معمولا از اینستنس این کلاس استفاده خواهیم کرد.
حال myCentralWidget را به عنوان Central Widget پنجره معرفی میکنیم:
          self.setCentralWidget(myCentralWidget)


خوب! به کلاس myCustomWindow برمیگردیم! متد __init__ ویژگی اصلی پنجره را تنظیم میکرد، متد createWidget ویدجت های مورد نیازمان را تولید میکرد. حال متد initUI را هم اضافه میکنیم تا وظیفه مدیریت چینش ویدجت ها را برعهده گیرد.
ایندو متد را در __init__ فراخوانی میکنیم.

در نهایت کد ما بدین شکل تبدیل میشود:
import sys
from PyQt4 import QtGui
class myCustomWindow(QtGui.QMainWindow):
     def __init__(self):
          super(myCustomWindow,self).__init__()
          self.setWindowTitle("Python In Depth")
          window_icon = QtGui.QIcon("pythonindepth.png") # Adress file ra vared mikonim
          self.setWindowIcon(window_icon)
          self.resize(300,200) # arz va ertefa bar hasbe pixel
          self.move(400,200) # arz va tool bar hasbe pixel
          
          self.createWidgets()
          self.initUI()
     
     def initUI(self):
          h_box = QtGui.QHBoxLayout()
          h_box.addWidget(self.label)
          h_box.addWidget(self.lineEdit)
          h_box.addWidget(self.button)
          myCentralWidget = QtGui.QWidget()
          myCentralWidget.setLayout(h_box)
          
          self.setCentralWidget(myCentralWidget)
          
     def createWidgets(self):
          self.label = QtGui.QLabel("Esmetun?")
          self.lineEdit = QtGui.QLineEdit()
          self.button = QtGui.QPushButton("Vurud")
          
          
          
def main():
     app = QtGui.QApplication(sys.argv)
     my_window = myCustomWindow()
     my_window.show()
    
     app.exec_()
    
if __name__ == "__main__":
    main()
و در نهایت خروجی کد ما:

در بخش بعد با signal & slot آشنا میشویم. هیجان انگیز است :-)

۲ نظر موافقین ۰ مخالفین ۰ ۱۵ اسفند ۹۴ ، ۲۲:۵۴
محسن فراهانچی
بیایید اولین برنامه خود با یک رابط کاربری گرافیکی را بنویسیم! و با کلیت برنامه نویسی واسط کاربری گرافیکی یا همان GUI بیشتر آشنا شویم.

تفکر حاکم بر طراحی PyQt بر این اساس است که :
  • ایجاد یک و تنها یک اینستنس از کلاس اصلی PyQt GUI است ( QApplication )
  • ایجاد پنجره اصلی برنامه
  • نمایش پنجره اصلی
  • به راه انداختن اینستنس مرحله اول
یک نمونه کد را بررسی میکنیم:
import sys
from PyQt4 import QtGui

def main():
    app = QtGui.QApplication(sys.argv) # instance az class QAplication

    my_window = QtGui.QMainWindow() # instance az class QMainWidow
    my_window.show() # nemayesh dadan an window
    
    app.exec_() # be rah andakhtan GUI

if __name__ == "__main__":

main()

خروجی کد:

pyqt gui Programming 

حال در ادامه عنوان پنجره ، آیکن ، عرض و ارتفاع و موقعیت پنجره را تعیین میکنیم:

  • عنوان پنجره:
my_window.setWindowTitle("Python In Depth")

  • آیکن پنجره:
    برای قرار دادن تصویری به عنوان آیکن باید از تصویر یک اینستنس از کلاس QIcon بسازیم و سپس به عنوان آیکن پنجره معرفی اش کنیم:
window_icon = QtGui.QIcon("pythonindepth.png") # Adress file ra vared mikonim
my_window.setWindowIcon(window_icon)
  • تعیین عرض و ارتفاع پنجره:
 my_window.resize(300,200) # arz va ertefa bar hasbe pixel
  • تعیین موقعیت پنجره:
my_window.move(400,200) # arz va tool bar hasbe pixel

با این تغییرات کد بدین صورت تبدیل میشود:
import sys
from PyQt4 import QtGui
def main():
     app = QtGui.QApplication(sys.argv)
     my_window = QtGui.QMainWindow()
     my_window.setWindowTitle("Python In Depth")
     window_icon = QtGui.QIcon("pythonindepth.png") # Adress file ra vared mikonim
     my_window.setWindowIcon(window_icon)
     my_window.resize(300,200) # arz va ertefa bar hasbe pixel
     my_window.move(400,200) # arz va tool bar hasbe pixel
     
     my_window.show()
    
     app.exec_()
    
if __name__ == "__main__":
    main()
و خروجی آن:

بسیار خوب!

علی الظاهر بکاربستن PyQt آسان است! و کد هایش قابل فهمند.
در بخش دوم با سیاستی متفاوت و اصولی به ادامه یادگیری میپردازیم :-)
۱ نظر موافقین ۱ مخالفین ۰ ۱۵ اسفند ۹۴ ، ۱۸:۰۲
محسن فراهانچی