Qt Designer 的使用
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 代碼如下所示
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
# -*- 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 代碼如下
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
# -*- 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 ).選中右鍵布局
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
# 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 控件。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
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,使用容器進行控件布局本質上還是調用布局管理器進行的。