PyQT5 PyQT入門教程（之一）

REF https://www.jianshu.com/p/5b063c5745d0

 

本篇博客對應的視頻講解：https://www.bilibili.com/video/BV1NZ4y1Z7ue/

 

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中將其配置為外部工具打開。

 

安裝PyQT5

pip install pyqt5

pip install pyqt5-tools

 

示例如下：

 從上圖可知：

 安裝了Anaconda3，或，安裝了PyQt5-tools 就會有 Qt Designer。

 

下面以PyCharm為例，講述PyCharm中 Qt Designer 的配置方法。

 

PyCharm中PyQt5工具配置

打開PyCharm，選擇 File -> Settings -> Tools -> External Tools，點擊左上角的 加號 + 。

 

 
Create Tool

Name 填入QtDesigner（方便后續使用，名稱無所謂）。

Program 選擇我們安裝的 PyQt5-tools下面的 designer.exe [D:\Program Files\python_3_6_4\Lib\site-packages\qt5_applications\Qt\bin\designer.exe]。

Working directory 則選擇我們的工作目錄 [D:\Program Files\python_3_6_4\Lib\site-packages\qt5_applications\Qt\bin]。

然后點擊OK，則添加了QtDesigner作為PyCharm的外置工具。

 

 

 

然后添加PyUIC（UI轉換工具），PyUIC的

Program為Python.exe，在Python的安裝目錄下面的Scripts目錄下【D:\Program Files\python_3_6_4\python.exe】，

Working directory 同理設為我們的工作目錄（最好與其他工具相同目錄  ）[D:\Program Files\python_3_6_4\Lib\site-packages\qt5_applications\Qt\bin]，

Arguments則填入如下代碼：

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

 

如果沒有 PyQt5.uic.pyuic， 可以采用以下配置：

 

 

 

最后添加 pyrcc 用於PyQt5的資源文件轉碼。

Program為pyrcc5.exe，在Python的安裝目錄下面的Scripts目錄下【D:\Program Files\python_3_6_4\Scripts\pyrcc5.exe】，

Working directory 同理設為我們的工作目錄（最好與其他工具相同目錄  ）[D:\Program Files\python_3_6_4\Lib\site-packages\qt5_applications\Qt\bin]，

具體配置與上述內容相同，Arguments填入：

$FileName$ -o $FileNameWithoutExtension$_rc.py

退出之前，點擊Apply保存配置。配置完成之后，PyCharm中會加入3個工具。

配置好的工具

 

 
點擊QtDesigner則打開QtDesigner的界面。

 Qt Designer界面簡介

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

模板窗口

 

 

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

QtDesigner界面

 

 

 

上面界面的最左側菜單為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="QPushButton" name="pushButton">
    <property name="geometry">
     <rect>
      <x>80</x>
      <y>100</y>
      <width>75</width>
      <height>23</height>
     </rect>
    </property>
    <property name="text">
     <string>PushButton</string>
    </property>
   </widget>
   <widget class="QLabel" name="label">
    <property name="geometry">
     <rect>
      <x>90</x>
      <y>50</y>
      <width>54</width>
      <height>12</height>
     </rect>
    </property>
    <property name="text">
     <string>TextLabel</string>
    </property>
   </widget>
  </widget>
  <widget class="QMenuBar" name="menubar">
   <property name="geometry">
    <rect>
     <x>0</x>
     <y>0</y>
     <width>800</width>
     <height>21</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

pyuic5 -o  目標文件名.py  源文件名.ui    -x

-x 會生成可以直接運行的py文件

如果不帶-x，生成的py只有class

或者直接在PyCharm中，找到.ui文件，右鍵 打開菜單找到 External Tools->PyUIC。點擊之后，我們在相應工程目錄下會產生一個.py文件。（注意，.ui文件必須存放在我們的External Tools中設置的相應項目目錄下）

 

 

 轉換完成之后，打開.py文件。

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

# Form implementation generated from reading ui file 'firstQTui.ui'
#
# Created by: PyQt5 UI code generator 5.15.4
#
# WARNING: Any manual changes made to this file will be lost when pyuic5 is
# run again.  Do not edit this file unless you know what you are doing.


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.pushButton = QtWidgets.QPushButton(self.centralwidget)
        self.pushButton.setGeometry(QtCore.QRect(80, 100, 75, 23))
        self.pushButton.setObjectName("pushButton")
        self.label = QtWidgets.QLabel(self.centralwidget)
        self.label.setGeometry(QtCore.QRect(90, 50, 54, 12))
        self.label.setObjectName("label")
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 800, 21))
        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.pushButton.setText(_translate("MainWindow", "PushButton"))
        self.label.setText(_translate("MainWindow", "TextLabel"))

 

 

觀察上述文件，可以看到如果不通過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) ## 關於 super() 函數，查閱 https://www.cnblogs.com/emanlee/p/15806602.html
        self.setupUi(self)


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

通過上述代碼，我們繼承了Ui_MainWindow類，使用其構造方法構造主窗口，並定義了程序的入口，通過創建QApplication對象來創建Qt窗口。其運行結果如下：

 

 

Qt窗口

 

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

 

下一篇： PyQT5 入門教程（之二）

 

四步：

前提：安裝 PyQT5，PyQT5-tools，pyinstaller； 安裝之后在環境變量里面配置path，增加這些程序的路徑。

安裝pycharm，安裝Anaconda3，安裝pyinstaller

 

1 用 designer.exe 做UI界面，保存為 ui 文件。

2 用 pyuic5 把 ui 文件轉換為 py 文件。

cd D:\Program Files\python_3_6_4\Scripts\
pyuic5 -o D:\temp-test\RecordScreen\division.py D:\temp-test\RecordScreen\division.ui -x

3 寫方法處理業務邏輯，並連接信號槽

self.pushButton.clicked.connect(self.dosomething)

4 采用 pyinstaller 做成 exe 程序 （pip install pyinstaller   https://www.cnblogs.com/emanlee/p/15807421.html）

pyinstaller -F -w division_test.py

 

pyinstaller

https://www.cnblogs.com/emanlee/p/15807421.html

 

REF

https://www.jianshu.com/nb/26159952