• QtDesigner
  • 一、 簡介
    • 1、 搭建GUI方式
      • 1.1 純手碼
      • 1.2 設計工具
    • 2、 QtDesigner介紹
    • 3、環境配置
  • 二、 使用示例
    • 1、 生成ui檔案
    • 2、 呼叫檔案

QtDesigner

一、 簡介

1、 搭建GUI方式

1.1 純手碼

一行一行的通過手寫程式碼來實現上述效果

特點：

• 工作量大
• 新手會把程式碼結構搞亂

1.2 設計工具

通過視覺化的設計工具，來按照所見所得的方式進行設計介面，然後自動轉換成程式碼或者直接生成應用程式

特點：

• 直觀、高效
• 通過視覺化完成
• 工作量小，方便修改除錯
• 介面和邏輯分離

正規開發中，使用此方式

2、 QtDesigner介紹

QtDesigner中的操作方式十分靈活，其通過拖拽的方式放置控制元件可以隨時檢視控制元件效果，並可預覽效果

QtDesigner的設計符合MVC架構，實現了檢視和邏輯分離，從而實現了開發的便捷

QtDesigner生成的.ui 檔案（實質上是XML格式的檔案）

• 可以直接使用

  from PyQt5.uic import loadUi
  
  loadUi("檔名.ui")
  

• 也可以通過pyui5工具轉換成.py 檔案

3、環境配置

安裝：

pip install PyQt5-tools

ui轉py：

pyuic5 $FileName$ -o ui_$FileNameWithoutExtension$.py -x
如：
pyuic5 test.ui -o ui_test.py -x
 

後面加的-x：其含義是轉換為可執行函式

qrc 資源轉換：

pyrcc5 $FileName$ -o $FileNameWithoutExtension$_rc.py
如：
pyrcc5 test.qrc -o test_rc.py 

二、 使用示例

1、 生成ui檔案

我設計的ui，並且轉換後的檔案程式碼為：

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

# Form implementation generated from reading ui file 'first.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_Form(object):
    def setupUi(self, Form):
        Form.setObjectName("Form")
        Form.resize(400, 300)
        self.label = QtWidgets.QLabel(Form)
        self.label.setGeometry(QtCore.QRect(120, 50, 51, 21))
        self.label.setObjectName("label")
        self.lineEdit = QtWidgets.QLineEdit(Form)
        self.lineEdit.setGeometry(QtCore.QRect(180, 50, 113, 21))
        self.lineEdit.setInputMask("")
        self.lineEdit.setText("")
        self.lineEdit.setObjectName("lineEdit")
        self.pushButton = QtWidgets.QPushButton(Form)
        self.pushButton.setGeometry(QtCore.QRect(150, 150, 93, 28))
        self.pushButton.setStyleSheet("background-color: rgb(255, 170, 0)")
        self.pushButton.setObjectName("pushButton")
        self.label.setBuddy(self.lineEdit)

        self.retranslateUi(Form)
        self.pushButton.clicked.connect(Form.check_login)
        QtCore.QMetaObject.connectSlotsByName(Form)

    def retranslateUi(self, Form):
        _translate = QtCore.QCoreApplication.translate
        Form.setWindowTitle(_translate("Form", "Form"))
        self.label.setText(_translate("Form", "賬號："))
        self.pushButton.setText(_translate("Form", "登陸"))


if __name__ == "__main__":
    import sys

    app = QtWidgets.QApplication(sys.argv)
    Form = QtWidgets.QWidget()
    ui = Ui_Form()
    ui.setupUi(Form)
    Form.show()
    sys.exit(app.exec_())
 

2、 呼叫檔案

#!/usr/bin/env python
# -*- coding: UTF-8 -*-
# @author: kun

from PyQt5.QtWidgets import QWidget
from PyQt5.QtWidgets import QApplication
from ui_first import Ui_Form


class Window(QWidget, Ui_Form):  # 使用多繼承的方法

    def __init__(self):
        super().__init__()
        self.setupUi(self)  # 呼叫父類的方法

    def check_login(self):  # 為繼承的ui檔案中的按鈕新增點選事件
        print("按鈕被點選，輸入的內容為", self.lineEdit.text())


if __name__ == '__main__':
    # 可以通過導包來執行視窗
    import sys

    app = QApplication(sys.argv)
    # 建立視窗
    w = Window()
    # 顯示視窗
    w.show()
    sys.exit(app.exec_())