PyCharm中使用PyQt實現UI界面設計

系統 - windows10：64位

語言 - Python：3.7.1

第三方庫 - PyQT5：5.11.3 qt5-tools-5.15.2.1.0.1

工具 - PyCharm：2020.2.1

一、PyCharm的安裝

首先需要安裝好pycharm。這個話不多說可以參照：

pycharm社區版安裝

Pycharm的安裝與使用

二、Qt Designer的配置

網上配置 Qt designer 的教程很多，主要有使用 anaconde 下載以及在 pycharm 里的第三方庫里下載。這里使用 PyCharm 集成開發環境，所以直接通過 PyCharm 安裝，詳細教程如下：

2.1 安裝pyqt5

file -> setting -> project -> project interpreter -> 點擊右邊的加號 -> 搜索pyqt5（如下圖）

2.2 安裝PyQt5 tools

在 PyCharm 左下角的終端，安裝缺少的 PyQt5 tools，具體的安裝命令如下：

# 安裝qtdesinger工具包
pip install PyQt5-tools

# 查看是否安裝成功，若出現圖形界面則表示成功
desinger

# 由於我本機有多個python虛擬環境，為了查看desinger到底在哪個目錄下；之所以需要確定是因為后期pycharm中會用到
echo $PATH　　　#我這里確定的路徑是/home/xxx/anaconda/bin

也可使用以下源安裝：

pip install PyQt5-tools -i http://pypi.douban.com/simple --trusted-host=pypi.douban.com

安裝完成后，在C:\Users\feng\PycharmProjects\pythonProject\venv\Lib\site-packages\qt5_applications\Qt\bin目錄下可找到 designer.exe，此后可在 PyCharm 中找到並添加 designer.exe。

2.3 配置Qt Designer和PyUIC

• Name：輸入最后工具在菜單中的想呈現名稱，比如我這里命名為 QtDesigner

• Program：designer.exe 程序的位置，就在上面安裝的C:\Users\feng\PycharmProjects\pythonProject\venv\Lib\site-packages\qt5_applications\Qt\bin\designer.exe

• Working directory：designer.exe 工作路徑，設置為 $ProjectFileDir$

類似地添加 PyUIC，

• name：PyUIC

• Program：PyUIC 位於當前解析器的Scripts\pyuic5.exe，我這里是C:\Users\feng\PycharmProjects\pythonProject\venv\Scripts\pyuic5.exe

• Arguments：$FileName$ -o $FileNameWithoutExtension$.py

• Working dirctory：$ProjectFileDir$

回到主界面“Tools” -> “External Tools”，即可看到我們添加的 QtDesigner 和 PyUIC。

三、使用Pycharm進行界面開發

3.1 使用Qt Designer開發

點擊 Tools -> External Tools -> 選擇 QtDesigner，則會打開 QtDesinger 的圖像界面，在其上面進行編輯。

進入 Qt Designer 界面，選擇 Main Window，點擊 Create。

按 Ctrl+R 預覽窗口，看是否是想要的界面。測試 OK，保存文件到 GUI 項目下。

回到 PyCharm，在 GUI 項目下面有一個 MainWindow.ui，就是剛在使用 Qt Designer 保存的文件，現在需要將這個文件轉換成 .py 文件，在該文件上點擊右鍵，選擇 PyUIC。

等程序運行完畢后，會多一個 MainWindow.py 的文件。

里面已經幫我們編寫了窗體的框架代碼，但是這個文件無法運行，他只是定義了一個類。新建一個py 文件，將這個窗體框架文件用import的方式導入進來，並編寫如下代碼：

import sys
from PyQt5.QtWidgets import QApplication, QMainWindow,QMessageBox
from MainWindow import *

class MyWindow(QMainWindow,Ui_MainWindow):
    def __init__(self, parent=None):
        super(MyWindow, self).__init__(parent)
        self.setupUi(self)
        self.end_Btn.clicked.connect(self.end_event)  # 綁定登陸函數

    # 登陸函數
    def end_event(self):
        if self.name_Edit.text() == "":
            QMessageBox.about(self, '登陸', '請輸入姓名')
        elif self.pass_Edit.text() == "":
            QMessageBox.about(self, '登陸', '請輸入密碼')
        else:
            QMessageBox.about(self, '登陸', self.name_Edit.text() + ' 歡迎登陸')

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

右鍵運行，得到如上圖所示的窗口。

3.2 手動編寫界面

使用手動編寫一個上面的登陸窗口：

import sys
from PyQt5.QtWidgets import (QApplication, QWidget, QLabel,
                             QLineEdit, QMessageBox, QPushButton)
from PyQt5.QtCore import QCoreApplication

# 主窗體
app = QApplication(sys.argv)  # 創建應用對象
LoginWindow = QWidget()  # 構造登陸窗口
LoginWindow.setWindowTitle('登陸窗口')  # 窗口標題
LoginWindow.resize(300, 180)  # 窗口大小

# 姓名Label
name_Label = QLabel(LoginWindow)  # 放置在登陸窗口上
name_Label.setText('姓名')  # 設置顯示文本
name_Label.move(60, 40)  # 設置位置

# 輸入姓名文本框
name_Edit = QLineEdit(LoginWindow)  # 放置在登陸窗口上
name_Edit.move(100, 36)  # 設置位置

# 密碼Label
pass_Label = QLabel(LoginWindow)  # 放置在登陸窗口上
pass_Label.setText('密碼')  # 設置顯示文本
pass_Label.move(60, 80)  # 設置位置

# 輸入密碼文本框
pass_Edit = QLineEdit(LoginWindow)  # 放置在登陸窗口上
pass_Edit.move(100, 76)  # 設置位置
pass_Edit.setEchoMode(QLineEdit.Password)  # 設置輸入密碼不可見


# 登陸函數
def end_event():
    if name_Edit.text() == "":
        QMessageBox.about(LoginWindow, '登陸', '請輸入姓名')
    elif pass_Edit.text() == "":
        QMessageBox.about(LoginWindow, '登陸', '請輸入密碼')
    else:
        QMessageBox.about(LoginWindow, '登陸', name_Edit.text() + ' 歡迎登陸')


# 登陸按鈕
end_Btn = QPushButton('登陸', LoginWindow)
end_Btn.clicked.connect(end_event)  # 綁定登陸函數
end_Btn.move(60, 120)

# 退出按鈕
exit_Btn = QPushButton('退出', LoginWindow)
exit_Btn.clicked.connect(QCoreApplication.instance().quit)  # 綁定退出事件
exit_Btn.move(160, 120)

LoginWindow.show()  # 顯示窗口
sys.exit(app.exec_())  # 進入消息循環

右鍵選擇 Run 運行代碼，一個簡單的登陸窗口就制作完畢。

3.3 兩者區別

手動編寫的時候，需要大量的代碼和運算來設置窗體中的控件屬性以及大小位置等。

而使用 Qt Designer 來做，

• 先通過可視化的排版。鼠標拖拽，點擊就能很輕松的得到一個符合業務邏輯的窗體。
• 然后使用PyUIC將.ui文件轉換成.py。
• 最后新建一個文件，將創建好的窗體文件通過import的方式導入即可
• 這樣的好處是將業務邏輯代碼和窗體代碼分離。將主要精力放在業務邏輯上，而不是在美化窗體。

參考：

PyCharm+Qt Designer+PyUIC安裝配置教程

安裝PyQt5時缺少designer.exe的解決辦法

PyCharm中Qt Designer+PyUIC配置