python：图形化GUI-pyQt5-tools入门
赞
踩
python：图形化GUI-pyQt5-tools入门
目录
通过Qt设计师在GUI中添加窗口部件
继续添加一个菜单
使用代码创建了GUI，我们继续在GUI窗口中创建一个“修改”菜单：
image
为“退出”菜单添加状态栏信息
目前使用qt设计师创建的GUI中，当鼠标移动到菜单项时，底部的状态栏是不会有变化的：
image
我们通过右侧的属性设置列表中的“statusTip”，设置为：当鼠标移动到“退出”按钮时，状态栏提示“点击退出应用程序”：
image
为“退出”菜单添加一个关闭信号，来实现点击关闭程序
在qt设计师面板右侧的“信号/槽编辑器”中，我们可以添加一个信号/槽。
在Pyqt中，响应和操作可以通过信号/槽来实现，一个信号槽由发送者、信号、接收者和槽组成，发送者发生信号，然后接收者调用槽。
我们使用信号槽来为“退出”菜单添加一个关闭窗口的操作：
image
其中：
- 发送者为“退出”菜单的name;
- 信号为triggerd()，也就是触发的意思；
- 接收者为主窗口；
- 槽为close()方法，也就是退出操作。
为“退出”菜单项添加一个快捷键
在实现了“退出”菜单项的功能之后，我们可以为菜单项设置一个快捷键，以进行快捷操作。
快捷键的设置在“动作编辑器”选项卡中进行编辑设置：
image
双击快捷键，弹出快捷键的编辑窗口：
image
我们设置Ctrl+Q作为退出的快捷键：
image
在窗口中添加选项卡
选项卡在GUI程序中是很常见的小部件，可以分隔不同的内。在qt设计师中，可以直接从左侧的部件列表中拖拽添加到窗口中：
image
在选项卡中添加按钮和其他小部件
在主窗口中添加选项卡部件后，我们可以在选项卡部件中继续添加其他的小部件，我们分别拖拽添加一个按钮部件和一个刻度盘部件（添加部件之后，部件属性可以在右侧的属性列表中进行设置）：
image
使用Qt设计师进行窗口布局
垂直布局
从左侧面板的“Layouts”栏中拖拽“Vertical Layout”到GUI窗口中，设置好布局大小，再在“Buttons”栏中拖拽3个“Push Button”到设置好大小的“Vertical Layout”中：
image
水平布局
从左侧面板的“Layouts”栏中拖拽“Horizontal Layout”到GUI窗口中，设置好布局大小，再在“Buttons”栏中拖拽3个“Push Button”到设置好大小的“Horizontal Layout”中：
image
使用水平布局、垂直布局的另一种方式
上面我们使用的是先设置一个布局部件，再将窗口部件放入布局部件之中布局方式。除此之外，我们还可以先在GUI窗口中放置窗口部件，框选需要进行布局的部件，再使用工具栏中的“水平布局”、“垂直布局”按钮对窗口部件进行布局管理：
image
网格布局
与垂直布局和水平布局一样，网格布局也可以使用上述的两种方法来对窗口部件进行布局管理：
image
除了对部件进行布局之外，我们还可以在网格中再进行嵌套布局：
image
容器布局
除了使用布局控件之外，我们还能使用容器进行粗略的布局，下面以groupBox容器作为演示：
image
使用“Spacer”间隔
我们在布局部件中放置的窗口部件都是等距离的，如果我们需要对其中某个部件的距离设置远一点呢，可以使用“Spacer”间隔部件。
“Spacer”部件分为两种：
- Horizontal Spacer：垂直间隔；
-
Vertical Spacer：水平间隔。
间隔部件在左侧部件的“Spacer”栏中，下面我们演示一下：image
为标签设置“伙伴”
Pyqt中有一个好用的基本功能就是“伙伴”部件，当用户键入标签的快捷键时，光标的焦点会出现在标签的伙伴上。例如：我们有一个用户名的标签和一个用户名的输入框，设置用户名标签与用户名输入框为“伙伴”，设置用户名标签的文本为”用户名(&2)”，表示用户名标签的快捷键为Alt+2，如果我们按快捷键Alt+2，那么光标的输入符就会移动到用户名的输入框中。
qt设计师中，“伙伴”功能，在工具栏的“编辑伙伴”按钮中：
image
转换qt设计师的ui代码为Python代码
查看qt设计师生成的UI文件
我们在qt设计师中设计好的GUI窗口都会被保存为.ui格式的文件。
image
实质上，.ui文件依然是文本格式文件，我们使用notepad++打开刚刚保存的.ui文件：
image
可以发现，.ui文件其实是一个xml文件，其通过不同的标签来表示不同的窗口部件或是行为和信号槽的声明和描述。
通过pyuic5转换UI文件为Python文件
设计好的UI文件如何需要转换为Python文件，该怎么办？毕竟我们需要使用Python来扩展GUI的功能。
我们可以使用PyQt自带的pyuic5工具，对Qt设计师保存的.ui文件进行转换。
pyuic5是一个命令行工具，直接在cmd命令行界面运行即可。下面我们使用pyuic5将刚刚保存的UI文件转换问Python代码：
image
运行之后，便会自动生成一个ui2py.py的python文件，我们打开看看：
- from PyQt5 import QtCore, QtGui, QtWidgets
-
- class Ui_MainWindow(object):
- def setupUi(self, MainWindow):
- MainWindow.setObjectName("MainWindow")
- MainWindow.resize(585, 477)
- self.centralwidget = QtWidgets.QWidget(MainWindow)
- self.centralwidget.setObjectName("centralwidget")
- self.pushButton = QtWidgets.QPushButton(self.centralwidget)
- self.pushButton.setGeometry(QtCore.QRect(170, 140, 75, 23))
- self.pushButton.setObjectName("pushButton")
- MainWindow.setCentralWidget(self.centralwidget)
- self.menubar = QtWidgets.QMenuBar(MainWindow)
- self.menubar.setGeometry(QtCore.QRect(0, 0, 585, 23))
- self.menubar.setObjectName("menubar")
- self.menu = QtWidgets.QMenu(self.menubar)
- self.menu.setObjectName("menu")
- MainWindow.setMenuBar(self.menubar)
- self.statusbar = QtWidgets.QStatusBar(MainWindow)
- self.statusbar.setObjectName("statusbar")
- MainWindow.setStatusBar(self.statusbar)
- self.actionMen1 = QtWidgets.QAction(MainWindow)
- self.actionMen1.setObjectName("actionMen1")
- self.actionMen2 = QtWidgets.QAction(MainWindow)
- self.actionMen2.setObjectName("actionMen2")
- self.menu.addAction(self.actionMen1)
- self.menu.addSeparator()
- self.menu.addAction(self.actionMen2)
- self.menubar.addAction(self.menu.menuAction())
-
- self.retranslateUi(MainWindow)
- QtCore.QMetaObject.connectSlotsByName(MainWindow)
-
- def retranslateUi(self, MainWindow):
- _translate = QtCore.QCoreApplication.translate
- MainWindow.setWindowTitle(_translate("MainWindow", "州的先生zmister.com PythonGUI教程"))
- self.pushButton.setText(_translate("MainWindow", "PushButton"))
- self.menu.setTitle(_translate("MainWindow", "文件"))
- self.actionMen1.setText(_translate("MainWindow", "men1"))
- self.actionMen2.setText(_translate("MainWindow", "men2"))
-
-
- if __name__ == "__main__":
- import sys
- app = QtWidgets.QApplication(sys.argv)
- MainWindow = QtWidgets.QMainWindow()
- ui = Ui_MainWindow()
- ui.setupUi(MainWindow)
- MainWindow.show()
- sys.exit(app.exec_())
生成的是标准的Python代码，运行一下，看看是否和qt设计师中的一致：
image
修改信号槽
除了直接使用UI文件转换而来的PythonGUI代码，我们有时候也需要对部分事件进行修改。
我们可以在qt设计师中添加简单的信号槽，复制的信号槽还是得自己在python代码中定义。
首先，我们在窗口中添加一个label标签，设置一个信号槽为：点击按钮的时候，label标签就清空。
image
然后使用pyuic5将其转换为Python代码，运行正常，按钮的信号槽也正常：
image
image
下面，我们并不想在点击button按钮的时候label标签消失，而是换一个文字。我们该怎么做呢？
直接在Python代码中进行修改，添加一个方法，并连接到信号槽上：
image
现在点击按钮之后，label标签会变为“zmister”而不是像之前那样清空。
在主窗口中调用对话框
一、创建两个窗口
根据本篇的最终目标——在主窗口中调用对话窗口，我们先使用qt设计师创建两个窗口，其中一个主窗口MainWindows，一个含有两个按钮的对话窗口Dialog。
通过qt设计师新建一个MainWindows窗口，并在其中放置一个按钮：
image
保存为UI文件，再新建一个对话窗口：
image
同样保存为UI文件。
image
这样我们本地文件夹有两个可供转换为Python代码的UI文件：
image
二、转换UI文件为Python代码文件
保存好两个窗口的UI文件之后，我们继续使用pyuic5工具，将这两个UI文件转换为Python代码文件。
打开命令行输入：
- pyuic5 -x -o mainWindow.py mainWindow.ui
- pyuic5 -x -o dialog.py dialog.ui
image
运行一下转换出来的Python文件，是否正常：
image
三、从主窗口中调用对话框窗口
在进行下一步之前，我们先在主窗口mainWindow中添加一个文本标签，设置文本为空，字体加大：
image
有个这个label我们可以将对对话框的操作，反馈在label标签中。
保存UI文件，使用pyuic5重新转换一次Python代码。
为了在主窗口代码中调用对话框窗口，我们需要在mainWindow.py文件中引入对话框窗口：
from GUI import dialog
然后定义在主窗口的主类中定义一个方法，用来显示对话框窗口：
- def click_button(self):
- Dialog = QtWidgets.QDialog()
- ui = dialog.Ui_Dialog()
- ui.setupUi(Dialog)
- Dialog.show()
- Dialog.exec_()
定义好了方法，我们需要对按钮进行点击调用的绑定，这在setupUi()方法中进行设置：
self.pushButton.clicked.connect(self.click_button)
这样就实现了按钮点击绑定对话框。
image
我们知道，我们的对话框是有两个按钮的，一个“OK”，一个“Cancel”，在我们的GUI程序中，点击任意一个都会关闭对话框，效果似乎是一样的，但在PyQt5的内部机制的，这是两个不同的事件，下面我们就通过之前设置的label标签，展示其不同的机制。
我们修改一下click_button()方法，修改如下：
- def click_button(self):
- Dialog = QtWidgets.QDialog()
- ui = dialog.Ui_Dialog()
- ui.setupUi(Dialog)
- Dialog.show()
- # Dialog.exec_()
- rsp = Dialog.exec_()
- if rsp == QtWidgets.QDialog.Accepted:
- self.label.setText("点击了OK")
- else:
- self.label.setText("点击了Cannel")
在这里我们将对话框的运行赋值给了一个变量，然后将其与QtWidgets.QDialog.Accepted进行比较，QtWidgets.QDialog.Accepted表示的是对话框的接收事件，也就是“OK”代表的事件，如果为接收时间，设置label标签为“点击了OK”，否则设置label标签为“点击了Cannel”
image
