PyQT5速成教程-

Qt Designer的介紹

在PyQt中編寫UI界面可以直接通過代碼來實(shí)現(xiàn)，也可以通過Qt Designer來完成疾党。Qt Designer的設(shè)計(jì)符合MVC的架構(gòu)音诫，其實(shí)現(xiàn)了視圖和邏輯的分離，從而實(shí)現(xiàn)了開發(fā)的便捷雪位。Qt Designer中的操作方式十分靈活竭钝，其通過拖拽的方式放置控件可以隨時(shí)查看控件效果。Qt Designer生成的.ui文件（實(shí)質(zhì)上是XML格式的文件）也可以通過pyuic5工具轉(zhuǎn)換成.py文件。
Qt Designer隨PyQt5-tools包一起安裝香罐，其安裝路徑在 “Python安裝路徑\Lib\site-packages\pyqt5-tools”下卧波。
若要啟動(dòng)Qt Designer可以直接到上述目錄下，雙擊designer.exe打開Qt Designer庇茫；或?qū)⑸鲜雎窂郊尤氕h(huán)境變量港粱，在命令行輸入designer打開；或在PyCharm中將其配置為外部工具打開旦签。
下面以PyCharm為例查坪，講述PyCharm中Qt Designer的配置方法。

PyCharm中PyQt5工具配置

打開PyCharm顷霹，選擇Settings -> Tools -> External Tools咪惠，點(diǎn)擊左上角的綠色加號(hào)。

Create Tool

Name填入QtDesigner（方便后續(xù)使用淋淀，名稱無所謂）遥昧。Program選擇我們安裝的PyQt5-tools下面的designer.exe。Working directory則選擇我們的工作目錄朵纷。然后點(diǎn)擊OK炭臭，則添加了QtDesigner作為PyCharm的外置工具。
然后添加PyUIC（UI轉(zhuǎn)換工具）袍辞，PyUIC的Program為Python.exe鞋仍，在Python的安裝目錄下面的Scripts目錄下，Working directory同理設(shè)為我們的工作目錄搅吁，Arguments則填入如下代碼：

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

最后添加pyrcc用于PyQt5的資源文件轉(zhuǎn)碼威创。具體配置與上述內(nèi)容相同，Arguments填入：

$FileName$ -o $FileNameWithoutExtension$_rc.py

退出之前谎懦，點(diǎn)擊Apply保存配置肚豺。配置完成之后，PyCharm中會(huì)加入3個(gè)工具界拦。

配置好的工具

點(diǎn)擊QtDesigner則打開QtDesigner的界面吸申。

Qt Designer界面簡介

剛打開Qt Designer，則彈出如下圖所示的窗口享甸。

模板窗口

創(chuàng)建新的Form給出了5個(gè)模板截碴，其中Widget與Main Window最為常用。這里我們選擇創(chuàng)建一個(gè)Main Window蛉威。

QtDesigner界面

我們拖拽一個(gè)Label與Button進(jìn)入主窗口（Main Window）妒牙。

主窗口

對(duì)象查看器

屬性編輯器

PS：將minimumSize和maximumSize設(shè)為一樣的數(shù)值之后，則窗口的大小固定摩瞎。

最右下角的部分則為Resource Browser（資源瀏覽器）拴签，資源瀏覽器中可以添加相應(yīng)地如圖片素材，作為Label或Button等控件的背景圖片等旗们。

資源瀏覽器

Qt Designer的UI文件

使用Qt Designer設(shè)計(jì)保存的文件為.ui格式的文件蚓哩。
通過保存并使用記事本等軟件打開，我們可以看到.ui文件的內(nèi)容如下：

<?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文件的第一行我們便能看出上渴，其實(shí)質(zhì)是一個(gè)XML文件岸梨。ui文件中存放了在主窗口中的一切控件的相關(guān)屬性。使用XML文件來存儲(chǔ)UI文件稠氮，具有高可讀性和移植性曹阔，因此我們可以方便地將.ui文件轉(zhuǎn)換到.py文件，從而使得我們可以使用Python語言在設(shè)計(jì)的GUI上面編程隔披。

將.ui文件轉(zhuǎn)換為.py文件

將.ui文件轉(zhuǎn)換到.py文件很簡單赃份，在前面我們?cè)O(shè)置了pyuic5這個(gè)工具。如果你沒有在PyCharm中設(shè)置這個(gè)工具奢米，或者根本沒有使用PyCharm抓韩，則可以到命令行中使用如下命令實(shí)現(xiàn).ui到.py的轉(zhuǎn)換。

pyuic5 - o 目標(biāo)文件名.py 源文件名.ui

或者直接在PyCharm中鬓长，找到.ui文件谒拴，右鍵 打開菜單找到External Tools->PyUIC。點(diǎn)擊之后痢士，我們?cè)谙鄳?yīng)工程目錄下會(huì)產(chǎn)生一個(gè).py文件彪薛。（注意茂装，.ui文件必須存放在我們的External Tools中設(shè)置的相應(yīng)項(xiàng)目目錄下）

PyUIC

轉(zhuǎn)換完成之后怠蹂，打開.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, 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來制作界面的話城侧，我們將會(huì)一次次地調(diào)試程序，來講按鈕和Label等放在合適的位置彼妻，這將是極其痛苦的過程嫌佑。而通過Qt Designer豆茫，我們可以快速地制作UI，并生成Python的代碼屋摇，從而實(shí)現(xiàn)快速地UI的開發(fā)揩魂。

使用轉(zhuǎn)換的.py文件

然而，此時(shí)之間運(yùn)行這個(gè)轉(zhuǎn)換好的Python文件是無法顯示任何窗口的炮温。因?yàn)檫@個(gè)Python文件只有定義主窗口以及其控件的代碼火脉，并沒有程序入口的代碼。為了秉持視圖與邏輯分離的原則柒啤，我們?cè)倬帉懸粋€(gè)新的腳本來調(diào)用這個(gè)文件倦挂，并且創(chuàng)建一個(gè)窗口。

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類方援，使用其構(gòu)造方法構(gòu)造主窗口，并定義了程序的入口涛癌，通過創(chuàng)建QApplication對(duì)象來創(chuàng)建Qt窗口犯戏。其運(yùn)行結(jié)果如下：

Qt窗口

通過上述操作，我們熟悉了Qt Designer設(shè)計(jì)界面祖很，到實(shí)現(xiàn)業(yè)務(wù)邏輯的大致工作流程笛丙。通過這個(gè)工作流程可以簡化工作，實(shí)現(xiàn)速度的提升假颇。
通過對(duì)視圖與業(yè)務(wù)邏輯的分離胚鸯，在每次更改Qt Designer的UI設(shè)計(jì)的時(shí)候，也不用重新編寫代碼笨鸡，而只需對(duì)更改的部分做稍微的修改即可姜钳。

在下一講中，我們將繼續(xù)講解Qt Designer的使用形耗。

覺得寫的不錯(cuò)的朋友可以點(diǎn)一個(gè) 喜歡? ~
謝謝你的支持哥桥！