1. Qt Designer 快速入門
Qt Designer 是互動式可視化GUI設計工具,可以幫助我們快速開發 PyQt 程式的速度。
它生成的 UI 界面是一個字尾為 .ui 的檔案,可以通過 pyiuc 轉換為 .py 檔案。
1.1 建立主視窗
在模闆選項中,最常用的是 Widget (通用視窗) 和 Main Window (主視窗)。
1.2 視窗主要區域介紹
Widget Box 其中提供了很多控件,可以直接拖放到主視窗中。在菜單欄選擇 “Form” -> "Preview", 或者按“Ctrl + R”即可預覽。
Object Inspactor 裡邊是對象清單,可以看出對象的層次關系。
Property Editor 可以編輯對象的屬性
Signal / slot Editor 編輯信号,管理圖檔
1.3 将 ui 檔案轉為 py 檔案
利用 加載好的 PyUIC 工具 轉變為 py
轉換成功的 myMainWindow.py 代碼如下所示
# -*- coding: utf-8 -*-
# Form implementation generated from reading ui file 'myMainWindow.ui'
#
# Created by: PyQt5 UI code generator 5.6
#
# WARNING! All changes made in this file will be lost!
from PyQt5 import QtCore, QtGui, QtWidgets
class Ui_myMainWindow(object):
def setupUi(self, myMainWindow):
myMainWindow.setObjectName("myMainWindow")
myMainWindow.resize(800, 600)
self.centralwidget = QtWidgets.QWidget(myMainWindow)
self.centralwidget.setObjectName("centralwidget")
self.pushButton = QtWidgets.QPushButton(self.centralwidget)
self.pushButton.setGeometry(QtCore.QRect(140, 270, 75, 23))
self.pushButton.setObjectName("pushButton")
myMainWindow.setCentralWidget(self.centralwidget)
self.menubar = QtWidgets.QMenuBar(myMainWindow)
self.menubar.setGeometry(QtCore.QRect(0, 0, 800, 23))
self.menubar.setObjectName("menubar")
myMainWindow.setMenuBar(self.menubar)
self.statusbar = QtWidgets.QStatusBar(myMainWindow)
self.statusbar.setObjectName("statusbar")
myMainWindow.setStatusBar(self.statusbar)
self.retranslateUi(myMainWindow)
QtCore.QMetaObject.connectSlotsByName(myMainWindow)
def retranslateUi(self, myMainWindow):
_translate = QtCore.QCoreApplication.translate
myMainWindow.setWindowTitle(_translate("myMainWindow", "MainWindow"))
self.pushButton.setText(_translate("myMainWindow", "Confirm"))
1.4 界面與邏輯分離
通過轉換 ui 檔案為 py 檔案,得到的隻是界面的 ui 的類, 并不包括啟動界面的函數,我們稱之為界面檔案。需要一個建立一個 py 檔案調用檔案,這個建立的檔案我們稱為邏輯檔案。
建立一個 CallmyMainWindow.py 代碼如下
# -*- coding: utf-8 -*-
import sys
from PyQt5.QtWidgets import QApplication , QMainWindow
from myMainWindow import *
class MyMainWindow(QMainWindow, Ui_myMainWindow):
def __init__(self, parent=None):
super(MyMainWindow, self).__init__(parent)
self.setupUi(self)
if __name__=="__main__":
# 每一pyqt5應用程式必須建立一個應用程式對象。sys.argv參數是一個清單,從指令行輸入參數。
app = QApplication(sys.argv)
myWin = MyMainWindow()
# 顯示在螢幕上
myWin.show()
# 系統exit()方法確定應用程式幹淨的退出
# 的exec_()方法有下劃線。因為執行是一個Python關鍵詞。是以,exec_()代替
sys.exit(app.exec_())
2. 布局
2.1 布局管理器布局
四種布局方式
建立一個文本框( lineEdit) 和一個按鈕 ( pushButton ).選中右鍵布局
# WARNING! All changes made in this file will be lost!
from PyQt5 import QtCore, QtGui, QtWidgets
class Ui_myMainWindow(object):
def setupUi(self, myMainWindow):
myMainWindow.setObjectName("myMainWindow")
myMainWindow.resize(800, 600)
self.centralwidget = QtWidgets.QWidget(myMainWindow)
self.centralwidget.setObjectName("centralwidget")
self.widget = QtWidgets.QWidget(self.centralwidget)
self.widget.setGeometry(QtCore.QRect(130, 190, 216, 25))
self.widget.setObjectName("widget")
self.horizontalLayout = QtWidgets.QHBoxLayout(self.widget)
self.horizontalLayout.setContentsMargins(0, 0, 0, 0)
self.horizontalLayout.setObjectName("horizontalLayout")
self.lineEdit = QtWidgets.QLineEdit(self.widget)
self.lineEdit.setObjectName("lineEdit")
self.horizontalLayout.addWidget(self.lineEdit)
self.pushButton = QtWidgets.QPushButton(self.widget)
self.pushButton.setObjectName("pushButton")
self.horizontalLayout.addWidget(self.pushButton)
myMainWindow.setCentralWidget(self.centralwidget)
self.menubar = QtWidgets.QMenuBar(myMainWindow)
self.menubar.setGeometry(QtCore.QRect(0, 0, 800, 23))
self.menubar.setObjectName("menubar")
myMainWindow.setMenuBar(self.menubar)
self.statusbar = QtWidgets.QStatusBar(myMainWindow)
self.statusbar.setObjectName("statusbar")
myMainWindow.setStatusBar(self.statusbar)
self.retranslateUi(myMainWindow)
QtCore.QMetaObject.connectSlotsByName(myMainWindow)
def retranslateUi(self, myMainWindow):
_translate = QtCore.QCoreApplication.translate
myMainWindow.setWindowTitle(_translate("myMainWindow", "MainWindow"))
self.pushButton.setText(_translate("myMainWindow", "Confirm"))
QpushButton 和 QlineEdit 建構時父對象都是 QWidget 布局對象 QHBoxLayout 也是。
2.2 使用容器進行布局
在左側 Containers 拖入一個 frame 控件,然後放入 LineEdit 、 Button 控件。
from PyQt5 import QtCore, QtGui, QtWidgets
class Ui_myMainWindow(object):
def setupUi(self, myMainWindow):
myMainWindow.setObjectName("myMainWindow")
myMainWindow.resize(800, 600)
self.centralwidget = QtWidgets.QWidget(myMainWindow)
self.centralwidget.setObjectName("centralwidget")
self.frame = QtWidgets.QFrame(self.centralwidget)
self.frame.setGeometry(QtCore.QRect(170, 270, 411, 161))
self.frame.setFrameShape(QtWidgets.QFrame.StyledPanel)
self.frame.setFrameShadow(QtWidgets.QFrame.Raised)
self.frame.setObjectName("frame")
self.lineEdit = QtWidgets.QLineEdit(self.frame)
self.lineEdit.setGeometry(QtCore.QRect(20, 50, 214, 20))
self.lineEdit.setObjectName("lineEdit")
self.pushButton = QtWidgets.QPushButton(self.frame)
self.pushButton.setGeometry(QtCore.QRect(280, 50, 75, 23))
self.pushButton.setObjectName("pushButton")
myMainWindow.setCentralWidget(self.centralwidget)
self.menubar = QtWidgets.QMenuBar(myMainWindow)
self.menubar.setGeometry(QtCore.QRect(0, 0, 800, 23))
self.menubar.setObjectName("menubar")
myMainWindow.setMenuBar(self.menubar)
self.statusbar = QtWidgets.QStatusBar(myMainWindow)
self.statusbar.setObjectName("statusbar")
myMainWindow.setStatusBar(self.statusbar)
self.retranslateUi(myMainWindow)
QtCore.QMetaObject.connectSlotsByName(myMainWindow)
def retranslateUi(self, myMainWindow):
_translate = QtCore.QCoreApplication.translate
myMainWindow.setWindowTitle(_translate("myMainWindow", "MainWindow"))
self.pushButton.setText(_translate("myMainWindow", "Confirm"))
容器Qframe 與子控件之間有一個 QHBoxLayout,使用容器進行控件布局本質上還是調用布局管理器進行的。
Qt開發學習路線:Qt開發技術棧
Qt資料領取:「連結」