Qt Designer的介紹

在PyQt中編寫UI介面可以直接通過程式碼來實現，也可以通過Qt Designer來完成。Qt Designer的設計符合MVC的架構，其實現了檢視和邏輯的分離，從而實現了開發的便捷。Qt Designer中的操作方式十分靈活，其通過拖拽的方式放置控制元件可以隨時檢視控制元件效果。Qt Designer生成的.ui檔案（實質上是XML格式的檔案）也可以通過pyuic5工具轉換成.py檔案。
Qt Designer隨PyQt5-tools包一起安裝，其安裝路徑在 “Python安裝路徑\Lib\site-packages\pyqt5-tools”下。
若要啟動Qt Designer可以直接到上述目錄下，雙擊designer.exe開啟Qt Designer；或將上述路徑加入環境變數，在命令列輸入designer開啟；或在PyCharm中將其配置為外部工具開啟。

PyCharm中PyQt5工具配置

開啟PyCharm，選擇Settings -> Tools -> External Tools，點選左上角的綠色加號。

Name填入QtDesigner（方便後續使用，名稱無所謂）。Program選擇我們安裝的PyQt5-tools下面的designer.exe。Working directory則選擇我們的工作目錄。然後點選OK，則添加了QtDesigner作為PyCharm的外接工具。
然後新增PyUIC（UI轉換工具），PyUIC的Program為Python.exe，在Python的安裝目錄下面的Scripts目錄下，Working directory同理設為我們的工作目錄，Arguments則填入如下程式碼：

-m PyQt5.uic.pyuic $FileName$ -o $FileNameWithoutExtension$.py

最後新增pyrcc用於PyQt5的資原始檔轉碼。具體配置與上述內容相同，Arguments填入：

$FileName$ -o $FileNameWithoutExtension$_rc.py

退出之前，點選Apply儲存配置。配置完成之後，PyCharm中會加入3個工具。

點選QtDesigner則開啟QtDesigner的介面。

Qt Designer介面簡介

剛開啟Qt Designer，則彈出如下圖所示的視窗。

建立新的Form給出了5個模板，其中Widget與Main Window最為常用。這裡我們選擇建立一個Main Window。

上面介面的最左側選單為Widget Box，Widget Box中包含PyQt5中的所有Widget元件，我們可以從左側的Widget Box中拖拽出諸如Button、View和Input等元件到中間的視窗中。
點選Form -> Preview（快捷鍵為Ctrl+R）則可以預覽我們設計好的介面，也可以用Preview In來選擇在相應的主題風格下預覽。
我們拖拽一個Label與Button進入主視窗（Main Window）。

此時在右上角的Object Inspector（物件檢視器）中可以看到主視窗中的已放置的物件（label與pushButton）以及其相應地Qt類。

以Label為例，此時我們點選Main Window中的label或是在Object Inspector中選取label後，檢視右側的一塊區域——Property Editor（屬性編輯器）。

其主要包含屬性有如下：

名稱	含義
objectName	控制元件物件名稱
geometry	相應寬和高與座標
sizePolicy	控制元件大小的策略
minimumSize	最小的寬和高
maximumSize	最大的寬和高
font	字型
cursor	游標

PS：將minimumSize和maximumSize設為一樣的數值之後，則視窗的大小固定。

最右下角的部分則為Resource Browser（資源瀏覽器），資源瀏覽器中可以新增相應地如圖片素材，作為Label或Button等控制元件的背景圖片等。

Qt Designer的UI檔案

使用Qt Designer設計儲存的檔案為.ui格式的檔案。
通過儲存並使用記事本等軟體開啟，我們可以看到.ui檔案的內容如下：

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>MainWindow</class>
 <widget class="QMainWindow" name="MainWindow">
 <property name="geometry">
 <rect>
 <x>0</x>
 <y>0</y>
 <width>800</width>
 <height>600</height>
 </rect>
 </property>
 <property name="windowTitle">
 <string>MainWindow</string>
 </property>
 <widget class="QWidget" name="centralwidget">
 <widget class="QLabel" name="label">
 <property name="geometry">
  <rect>
  <x>240</x>
  <y>80</y>
  <width>72</width>
  <height>15</height>
  </rect>
 </property>
 <property name="text">
  <string>TextLabel</string>
 </property>
 </widget>
 <widget class="QPushButton" name="pushButton">
 <property name="geometry">
  <rect>
  <x>240</x>
  <y>120</y>
  <width>93</width>
  <height>28</height>
  </rect>
 </property>
 <property name="text">
  <string>PushButton</string>
 </property>
 </widget>
 </widget>
 <widget class="QMenuBar" name="menubar">
 <property name="geometry">
 <rect>
  <x>0</x>
  <y>0</y>
  <width>800</width>
  <height>26</height>
 </rect>
 </property>
 </widget>
 <widget class="QStatusBar" name="statusbar"/>
 </widget>
 <resources/>
 <connections/>
</ui>

從.ui檔案的第一行我們便能看出，其實質是一個XML檔案。ui檔案中存放了在主視窗中的一切控制元件的相關屬性。使用XML檔案來儲存UI檔案，具有高可讀性和移植性，因此我們可以方便地將.ui檔案轉換到.py檔案，從而使得我們可以使用Python語言在設計的GUI上面程式設計。

將.ui檔案轉換為.py檔案

將.ui檔案轉換到.py檔案很簡單，在前面我們曾設定了pyuic5這個工具。如果你沒有在PyCharm中設定這個工具，或者根本沒有使用PyCharm，則可以到命令列中使用如下命令實現.ui到.py的轉換。

pyuic5 - o 目標檔名.py 原始檔名.ui

或者直接在PyCharm中，找到.ui檔案，右鍵 開啟選單找到External Tools->PyUIC。點選之後，我們在相應工程目錄下會產生一個.py檔案。（注意，.ui檔案必須存放在我們的External Tools中設定的相應專案目錄下）

轉換完成之後，開啟.py檔案。

# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'mainWindow.ui'
#
# Created by: PyQt5 UI code generator 5.10.1
#
# WARNING! All changes made in this file will be lost!

from PyQt5 import QtCore,QtGui,QtWidgets

class Ui_MainWindow(object):
 def setupUi(self,MainWindow):
  MainWindow.setObjectName("MainWindow")
  MainWindow.resize(800,600)
  self.centralwidget = QtWidgets.QWidget(MainWindow)
  self.centralwidget.setObjectName("centralwidget")
  self.label = QtWidgets.QLabel(self.centralwidget)
  self.label.setGeometry(QtCore.QRect(240,80,72,15))
  self.label.setObjectName("label")
  self.pushButton = QtWidgets.QPushButton(self.centralwidget)
  self.pushButton.setGeometry(QtCore.QRect(240,120,93,28))
  self.pushButton.setObjectName("pushButton")
  MainWindow.setCentralWidget(self.centralwidget)
  self.menubar = QtWidgets.QMenuBar(MainWindow)
  self.menubar.setGeometry(QtCore.QRect(0,800,26))
  self.menubar.setObjectName("menubar")
  MainWindow.setMenuBar(self.menubar)
  self.statusbar = QtWidgets.QStatusBar(MainWindow)
  self.statusbar.setObjectName("statusbar")
  MainWindow.setStatusBar(self.statusbar)

  self.retranslateUi(MainWindow)
  QtCore.QMetaObject.connectSlotsByName(MainWindow)

 def retranslateUi(self,MainWindow):
  _translate = QtCore.QCoreApplication.translate
  MainWindow.setWindowTitle(_translate("MainWindow","MainWindow"))
  self.label.setText(_translate("MainWindow","TextLabel"))
  self.pushButton.setText(_translate("MainWindow","PushButton"))

觀察上述檔案，可以看到如果不通過Qt Designer來製作介面的話，我們將會一次次地除錯程式，來講按鈕和Label等放在合適的位置，這將是極其痛苦的過程。而通過Qt Designer，我們可以快速地製作UI，並生成Python的程式碼，從而實現快速地UI的開發。

使用轉換的.py檔案

然而，此時之間執行這個轉換好的Python檔案是無法顯示任何視窗的。因為這個Python檔案只有定義主視窗以及其控制元件的程式碼，並沒有程式入口的程式碼。為了秉持檢視與邏輯分離的原則，我們再編寫一個新的指令碼來呼叫這個檔案，並且建立一個視窗。

import sys
from PyQt5.QtWidgets import QApplication,QMainWindow
from mainWindow import *


class MyWindow(QMainWindow,Ui_MainWindow):
 def __init__(self,parent=None):
  super(MyWindow,self).__init__(parent)
  self.setupUi(self)

if __name__ == '__main__':
 app = QApplication(sys.argv)
 myWin = MyWindow()
 myWin.show()
 sys.exit(app.exec_())

通過上述程式碼，我們繼承了Ui_MainWindow類，使用其構造方法構造主視窗，並定義了程式的入口，通過建立QApplication物件來建立Qt視窗。其執行結果如下：

通過上述操作，我們熟悉了Qt Designer設計介面，到實現業務邏輯的大致工作流程。通過這個工作流程可以簡化工作，實現速度的提升。
通過對檢視與業務邏輯的分離，在每次更改Qt Designer的UI設計的時候，也不用重新編寫程式碼，而只需對更改的部分做稍微的修改即可。

在下一講中，我們將繼續講解Qt Designer的使用。

到此這篇關於PyQT5速成教程之Qt Designer介紹與入門的文章就介紹到這了,更多相關Qt Designer介紹與入門內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！