PyQt5（3）——快速界面设计

通过代码添加控件是不那么方便的快捷的，PyQt提供了QtDesigner设计师的界面编辑器来辅助我们快速添加简单的界面控件。

（如果要实现更复杂更精细的界面渲染，还是需要通过代码实现的）

第一次打开Qt设计师，首先要创建一个窗口，这里可以选择Main Window（顾名思义）或者Widget通用窗口类



点击创建后，生成新的窗口

可以看到，MainWindows默认添加了菜单栏、和状态栏



接下来，我们可以通过左边的控件栏直接添加控件到创建好的窗体上



这里有很多适应不同需求的控件，只能在需要的时候再去一一了解了

我们需要优先了解的是

窗口布局Layouts：

Vertical Layout 纵向布局

Horizontal Layout 横向布局

Grid Layout 栅格布局

Form Layout 窗体布局

一个Qt界面一般是以窗体（Form）--布局（Layout）--控件（比如各种按钮）这样的层次关系来设计的，

布局可以自动调整所属控件之间的位置间隔等。

我们可以先随意拖放几个PushButton到窗体中，然后通过右键-->布局-->栅栏布局 来快速设定布局

拖放后如下图：



设置布局后的效果如下图：



最后 ，我们保存设计好的界面文件，随意命名为 TestFrm.ui

为了使设计出来的界面能够使用，需要对ui文件进行转换，生成对应的py文件

这就需要通过PyQt自带的pyuic5.bat来进行

使用如下批处理命令，其中C:\Python34\Lib\site-packages\PyQt5\是我安装PyQt5后pyuic5.bat所在的目录

::转换指定UI成Py文件
C:\Python34\Lib\site-packages\PyQt5\pyuic5.bat TestFrm.ui -o TestFrm.py

双击批处理执行后

生成如下代码

TestFrm.py

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

# Form implementation generated from reading ui file 'TestFrm.ui'
#
# Created by: PyQt5 UI code generator 5.5.1
#
# WARNING! All changes made in this file will be lost!

from PyQt5 import QtCore, QtGui, QtWidgets

class Ui_MainWindow(object):
def setupUi(self, MainWindow):
MainWindow.setObjectName("MainWindow")
MainWindow.resize(701, 441)
self.centralwidget = QtWidgets.QWidget(MainWindow)
self.centralwidget.setObjectName("centralwidget")
self.widget = QtWidgets.QWidget(self.centralwidget)
self.widget.setGeometry(QtCore.QRect(-2, 0, 601, 281))
self.widget.setObjectName("widget")
self.gridLayout = QtWidgets.QGridLayout(self.widget)
self.gridLayout.setObjectName("gridLayout")
self.pushButton_2 = QtWidgets.QPushButton(self.widget)
self.pushButton_2.setObjectName("pushButton_2")
self.gridLayout.addWidget(self.pushButton_2, 1, 2, 1, 1)
self.pushButton_5 = QtWidgets.QPushButton(self.widget)
self.pushButton_5.setObjectName("pushButton_5")
self.gridLayout.addWidget(self.pushButton_5, 3, 0, 1, 1)
self.pushButton_3 = QtWidgets.QPushButton(self.widget)
self.pushButton_3.setObjectName("pushButton_3")
self.gridLayout.addWidget(self.pushButton_3, 1, 1, 1, 1)
self.pushButton = QtWidgets.QPushButton(self.widget)
self.pushButton.setObjectName("pushButton")
self.gridLayout.addWidget(self.pushButton, 1, 0, 1, 1)
self.pushButton_4 = QtWidgets.QPushButton(self.widget)
self.pushButton_4.setObjectName("pushButton_4")
self.gridLayout.addWidget(self.pushButton_4, 3, 1, 1, 1)
self.pushButton_6 = QtWidgets.QPushButton(self.widget)
self.pushButton_6.setObjectName("pushButton_6")
self.gridLayout.addWidget(self.pushButton_6, 3, 2, 1, 1)
MainWindow.setCentralWidget(self.centralwidget)
self.menubar = QtWidgets.QMenuBar(MainWindow)
self.menubar.setGeometry(QtCore.QRect(0, 0, 701, 23))
self.menubar.setObjectName("menubar")
MainWindow.setMenuBar(self.menubar)
self.statusbar = QtWidgets.QStatusBar(MainWindow)
self.statusbar.setObjectName("statusbar")
MainWindow.setStatusBar(self.statusbar)

self.retranslateUi(MainWindow)
QtCore.QMetaObject.connectSlotsByName(MainWindow)

def retranslateUi(self, MainWindow):
_translate = QtCore.QCoreApplication.translate
MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
self.pushButton_2.setText(_translate("MainWindow", "PushButton"))
self.pushButton_5.setText(_translate("MainWindow", "PushButton"))
self.pushButton_3.setText(_translate("MainWindow", "PushButton"))
self.pushButton.setText(_translate("MainWindow", "PushButton"))
self.pushButton_4.setText(_translate("MainWindow", "PushButton"))
self.pushButton_6.setText(_translate("MainWindow", "PushButton"))

生成的代码是一个UI设计类，需要通过绑定到界面类才能使用，在TestFrm.py内添加如下代码

if __name__=="__main__":
import sys
app=QtWidgets.QApplication(sys.argv)
formObj=QtWidgets.QMainWindow()  #注意，这里和我们一开始创建窗体时使用的界面类型相同
ui=Ui_MainWindow()
ui.setupUi(formObj)
formObj.show()
sys.exit(app.exec_())

尝试运行，这时候看到我们之前创建好的界面已经成功显示