分享

PyQt5(3)快速界面设计

 星光闪亮图书馆 2018-05-02

通过代码添加控件是不那么方便的快捷的,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所在的目录

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


双击批处理执行后

生成如下代码

TestFrm.py

  1. # -*- coding: utf-8 -*-  
  2.   
  3. # Form implementation generated from reading ui file 'TestFrm.ui'  
  4. #  
  5. # Created by: PyQt5 UI code generator 5.5.1  
  6. #  
  7. # WARNING! All changes made in this file will be lost!  
  8.   
  9. from PyQt5 import QtCore, QtGui, QtWidgets  
  10.   
  11. class Ui_MainWindow(object):  
  12.     def setupUi(self, MainWindow):  
  13.         MainWindow.setObjectName("MainWindow")  
  14.         MainWindow.resize(701, 441)  
  15.         self.centralwidget = QtWidgets.QWidget(MainWindow)  
  16.         self.centralwidget.setObjectName("centralwidget")  
  17.         self.widget = QtWidgets.QWidget(self.centralwidget)  
  18.         self.widget.setGeometry(QtCore.QRect(-2, 0, 601, 281))  
  19.         self.widget.setObjectName("widget")  
  20.         self.gridLayout = QtWidgets.QGridLayout(self.widget)  
  21.         self.gridLayout.setObjectName("gridLayout")  
  22.         self.pushButton_2 = QtWidgets.QPushButton(self.widget)  
  23.         self.pushButton_2.setObjectName("pushButton_2")  
  24.         self.gridLayout.addWidget(self.pushButton_2, 1, 2, 1, 1)  
  25.         self.pushButton_5 = QtWidgets.QPushButton(self.widget)  
  26.         self.pushButton_5.setObjectName("pushButton_5")  
  27.         self.gridLayout.addWidget(self.pushButton_5, 3, 0, 1, 1)  
  28.         self.pushButton_3 = QtWidgets.QPushButton(self.widget)  
  29.         self.pushButton_3.setObjectName("pushButton_3")  
  30.         self.gridLayout.addWidget(self.pushButton_3, 1, 1, 1, 1)  
  31.         self.pushButton = QtWidgets.QPushButton(self.widget)  
  32.         self.pushButton.setObjectName("pushButton")  
  33.         self.gridLayout.addWidget(self.pushButton, 1, 0, 1, 1)  
  34.         self.pushButton_4 = QtWidgets.QPushButton(self.widget)  
  35.         self.pushButton_4.setObjectName("pushButton_4")  
  36.         self.gridLayout.addWidget(self.pushButton_4, 3, 1, 1, 1)  
  37.         self.pushButton_6 = QtWidgets.QPushButton(self.widget)  
  38.         self.pushButton_6.setObjectName("pushButton_6")  
  39.         self.gridLayout.addWidget(self.pushButton_6, 3, 2, 1, 1)  
  40.         MainWindow.setCentralWidget(self.centralwidget)  
  41.         self.menubar = QtWidgets.QMenuBar(MainWindow)  
  42.         self.menubar.setGeometry(QtCore.QRect(0, 0, 701, 23))  
  43.         self.menubar.setObjectName("menubar")  
  44.         MainWindow.setMenuBar(self.menubar)  
  45.         self.statusbar = QtWidgets.QStatusBar(MainWindow)  
  46.         self.statusbar.setObjectName("statusbar")  
  47.         MainWindow.setStatusBar(self.statusbar)  
  48.   
  49.         self.retranslateUi(MainWindow)  
  50.         QtCore.QMetaObject.connectSlotsByName(MainWindow)  
  51.   
  52.     def retranslateUi(self, MainWindow):  
  53.         _translate = QtCore.QCoreApplication.translate  
  54.         MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))  
  55.         self.pushButton_2.setText(_translate("MainWindow", "PushButton"))  
  56.         self.pushButton_5.setText(_translate("MainWindow", "PushButton"))  
  57.         self.pushButton_3.setText(_translate("MainWindow", "PushButton"))  
  58.         self.pushButton.setText(_translate("MainWindow", "PushButton"))  
  59.         self.pushButton_4.setText(_translate("MainWindow", "PushButton"))  
  60.         self.pushButton_6.setText(_translate("MainWindow", "PushButton"))  


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

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


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






    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多