本系列文章前情回顾：
在PyQt4学习2系列中，采用直接敲击代码的形式，创建了一个简易计算器的界面，没有对其进行进一步的实现，如下图这个样子
这里呢，我们在PyQt4学习3之---采用Qt Designer拖动创建一个简易计算器，开始吧。
- Qt Designer 是交互式可视化GUI设计工具，可以帮助我们快速开发 PyQt 程序的速度。
- 它生成的 UI 界面是一个后缀为 .ui 的文件，可以通过 pyiuc 转换为 .py 文件。
关于Qt Designer与pycharm的配置过程这里不详述了，网上的介绍比较多，能较好的实现，我们直接在配置好的基础上进行实操。
一、新建一个项目
我这里命名为computer_add，项目创建好之后，此时点击Tools会出现如下图的内容，最后点击QtDesigner，系统自动切换到Qt Designer界面，之后的工作也就是在这个上面进行的编辑
首先分析我们的整数计算器需要的一些按钮：
- 数字键：0-9共10个。
- 操作符：+ - * / = C共6个
此时，我们在Qt Designer的主窗口中创建上述16个按钮之后，按照4行4列的顺序进行摆放。
修改按钮的属性中的objectName为相对于的名称。如数字0的objectName设置为num_0，操作符+的objectName设置为add。对于按钮的显示名称的修改，在主窗口中双击相应按钮则可以快速修改。
由于计算器中的按钮是正方形的（我们通常会选择正方形），而且不想让这些按钮根据窗口的大小进行变化，通过全选16个按钮（在主窗口中使用鼠标左键拖出选择框，选中16个按钮）在右侧找到mininumSize和maximumSize属性。点击其左面的箭头符号展开选项，将其宽和高固定为60。这样就不会因为缩放窗口而造成按钮的大小变化了。如下图
在对所有按钮完成相应操作之后，我们选中16个按钮，点击右键--->布局--->网格布局，先将按键进行布局
添加LineEdit用于对数据的输出
之后，保存ui文件，此时，回到pycharm界面，进行如下的操作，将ui界面信息，转换为.py文件
此时就发现自动创建了一个.py的文件，描述了ui界面内的信息
注意！注意！！请注意！！！—— 所有的UI操作、对UI的事件处理，都不能直接写到这个.py文件下，不能直接写！！！因为一旦你在designer.exe中对test.ui有任何的改变，都是需要重新使用pyuic才能将test.ui文件中的更改更新到.py文件中的，而更新后的.py会是一个新的.py文件，会将之前所有的，全部覆盖。如果一旦你在这里写了一些方法，或者是一些UI操作，全部都会被覆盖，消失不见。
二、进行显示
这里我们需要创建一个main.py的文件，将ui的信息进行显示出来，代码如下（在之后的项目中，可在这里进行修改即可）
__author__ = "lingjun"
# E-mail: 1763469890@qq.com
# welcome to attention:小白CV
import sys
from PyQt4 import QtCore, QtGui
import UI_main
from PyQt4.Qt import QMainWindow, QApplication, SIGNAL, QFileDialog, QIcon, QAction
class show_Workstation(QtGui.QMainWindow):
def __init__(self, parent=None):
QtGui.QWidget.__init__(self, parent)
self._createUI()
self.show()
def _createUI(self):
self.ui = UI_main.Ui_MainWindow()
self.ui.setupUi(self)
self.ui.retranslateUi(self)
if __name__ == "__main__": # 主程序
app = QtGui.QApplication(sys.argv)
ai_workstation = show_Workstation() # My_Form可以修改
sys.exit(app.exec_())结果是这样的，发现lineEdit部分有些小，接下来对这块做些简单的修改
这里添加了一个vertical spacer，用于将lineEdit与按键做个分隔，将lineEdit的大小做个设定
之后，重新将ui文件转化一次.py文件，再运行main.py，查看结果
最后，再查看一些ui转为.py文件的内容，如下（自动生成，无需改动）
# -*- coding: utf-8 -*-
# Form implementation generated from reading ui file 'untitled.ui'
#
# Created by: PyQt4 UI code generator 4.11.4
#
# WARNING! All changes made in this file will be lost!
from PyQt4 import QtCore, QtGui
try:
_fromUtf8 = QtCore.QString.fromUtf8
except AttributeError:
def _fromUtf8(s):
return s
try:
_encoding = QtGui.QApplication.UnicodeUTF8
def _translate(context, text, disambig):
return QtGui.QApplication.translate(context, text, disambig, _encoding)
except AttributeError:
def _translate(context, text, disambig):
return QtGui.QApplication.translate(context, text, disambig)
class Ui_MainWindow(object):
def setupUi(self, MainWindow):
MainWindow.setObjectName(_fromUtf8("MainWindow"))
MainWindow.resize(408, 422)
self.centralwidget = QtGui.QWidget(MainWindow)
self.centralwidget.setObjectName(_fromUtf8("centralwidget"))
self.verticalLayout = QtGui.QVBoxLayout(self.centralwidget)
self.verticalLayout.setObjectName(_fromUtf8("verticalLayout"))
self.lineEdit = QtGui.QLineEdit(self.centralwidget)
self.lineEdit.setMinimumSize(QtCore.QSize(300, 80))
self.lineEdit.setObjectName(_fromUtf8("lineEdit"))
self.verticalLayout.addWidget(self.lineEdit)
spacerItem = QtGui.QSpacerItem(20, 20, QtGui.QSizePolicy.Minimum, QtGui.QSizePolicy.Expanding)
self.verticalLayout.addItem(spacerItem)
self.gridLayout = QtGui.QGridLayout()
self.gridLayout.setObjectName(_fromUtf8("gridLayout"))
self.zero = QtGui.QPushButton(self.centralwidget)
self.zero.setMinimumSize(QtCore.QSize(60, 60))
self.zero.setMaximumSize(QtCore.QSize(60, 60))
self.zero.setObjectName(_fromUtf8("zero"))
self.gridLayout.addWidget(self.zero, 0, 3, 1, 1)
self.mul = QtGui.QPushButton(self.centralwidget)
self.mul.setMinimumSize(QtCore.QSize(60, 60))
self.mul.setMaximumSize(QtCore.QSize(60, 60))
self.mul.setObjectName(_fromUtf8("mul"))
self.gridLayout.addWidget(self.mul, 3, 2, 1, 1)
self.num_9 = QtGui.QPushButton(self.centralwidget)
self.num_9.setMinimumSize(QtCore.QSize(60, 60))
self.num_9.setMaximumSize(QtCore.QSize(60, 60))
self.num_9.setObjectName(_fromUtf8("num_9"))
self.gridLayout.addWidget(self.num_9, 0, 2, 1, 1)
self.div = QtGui.QPushButton(self.centralwidget)
self.div.setMinimumSize(QtCore.QSize(60, 60))
self.div.setMaximumSize(QtCore.QSize(60, 60))
self.div.setObjectName(_fromUtf8("div"))
self.gridLayout.addWidget(self.div, 3, 1, 1, 1)
self.num_1 = QtGui.QPushButton(self.centralwidget)
self.num_1.setMinimumSize(QtCore.QSize(60, 60))
self.num_1.setMaximumSize(QtCore.QSize(60, 60))
self.num_1.setObjectName(_fromUtf8("num_1"))
self.gridLayout.addWidget(self.num_1, 2, 0, 1, 1)
self.num_8 = QtGui.QPushButton(self.centralwidget)
self.num_8.setMinimumSize(QtCore.QSize(60, 60))
self.num_8.setMaximumSize(QtCore.QSize(60, 60))
self.num_8.setObjectName(_fromUtf8("num_8"))
self.gridLayout.addWidget(self.num_8, 0, 1, 1, 1)
self.num_5 = QtGui.QPushButton(self.centralwidget)
self.num_5.setMinimumSize(QtCore.QSize(60, 60))
self.num_5.setMaximumSize(QtCore.QSize(60, 60))
self.num_5.setObjectName(_fromUtf8("num_5"))
self.gridLayout.addWidget(self.num_5, 1, 1, 1, 1)
self.num_2 = QtGui.QPushButton(self.centralwidget)
self.num_2.setMinimumSize(QtCore.QSize(60, 60))
self.num_2.setMaximumSize(QtCore.QSize(60, 60))
self.num_2.setObjectName(_fromUtf8("num_2"))
self.gridLayout.addWidget(self.num_2, 2, 1, 1, 1)
self.num_7 = QtGui.QPushButton(self.centralwidget)
self.num_7.setMinimumSize(QtCore.QSize(60, 60))
self.num_7.setMaximumSize(QtCore.QSize(60, 60))
self.num_7.setObjectName(_fromUtf8("num_7"))
self.gridLayout.addWidget(self.num_7, 0, 0, 1, 1)
self.num_3 = QtGui.QPushButton(self.centralwidget)
self.num_3.setMinimumSize(QtCore.QSize(60, 60))
self.num_3.setMaximumSize(QtCore.QSize(60, 60))
self.num_3.setObjectName(_fromUtf8("num_3"))
self.gridLayout.addWidget(self.num_3, 2, 2, 1, 1)
self.equal = QtGui.QPushButton(self.centralwidget)
self.equal.setMinimumSize(QtCore.QSize(60, 60))
self.equal.setMaximumSize(QtCore.QSize(60, 60))
self.equal.setObjectName(_fromUtf8("equal"))
self.gridLayout.addWidget(self.equal, 1, 3, 1, 1)
self.num_4 = QtGui.QPushButton(self.centralwidget)
self.num_4.setMinimumSize(QtCore.QSize(60, 60))
self.num_4.setMaximumSize(QtCore.QSize(60, 60))
self.num_4.setObjectName(_fromUtf8("num_4"))
self.gridLayout.addWidget(self.num_4, 1, 0, 1, 1)
self.num_0 = QtGui.QPushButton(self.centralwidget)
self.num_0.setMinimumSize(QtCore.QSize(60, 60))
self.num_0.setMaximumSize(QtCore.QSize(60, 60))
self.num_0.setObjectName(_fromUtf8("num_0"))
self.gridLayout.addWidget(self.num_0, 3, 0, 1, 1)
self.num_6 = QtGui.QPushButton(self.centralwidget)
self.num_6.setMinimumSize(QtCore.QSize(60, 60))
self.num_6.setMaximumSize(QtCore.QSize(60, 60))
self.num_6.setObjectName(_fromUtf8("num_6"))
self.gridLayout.addWidget(self.num_6, 1, 2, 1, 1)
self.pushButton_add = QtGui.QPushButton(self.centralwidget)
self.pushButton_add.setMinimumSize(QtCore.QSize(60, 60))
self.pushButton_add.setMaximumSize(QtCore.QSize(60, 60))
self.pushButton_add.setObjectName(_fromUtf8("pushButton_add"))
self.gridLayout.addWidget(self.pushButton_add, 3, 3, 1, 1)
self.sub = QtGui.QPushButton(self.centralwidget)
self.sub.setMinimumSize(QtCore.QSize(60, 60))
self.sub.setMaximumSize(QtCore.QSize(60, 60))
self.sub.setObjectName(_fromUtf8("sub"))
self.gridLayout.addWidget(self.sub, 2, 3, 1, 1)
self.verticalLayout.addLayout(self.gridLayout)
MainWindow.setCentralWidget(self.centralwidget)
self.menubar = QtGui.QMenuBar(MainWindow)
self.menubar.setGeometry(QtCore.QRect(0, 0, 408, 23))
self.menubar.setObjectName(_fromUtf8("menubar"))
MainWindow.setMenuBar(self.menubar)
self.statusbar = QtGui.QStatusBar(MainWindow)
self.statusbar.setObjectName(_fromUtf8("statusbar"))
MainWindow.setStatusBar(self.statusbar)
self.retranslateUi(MainWindow)
QtCore.QMetaObject.connectSlotsByName(MainWindow)
def retranslateUi(self, MainWindow):
MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow", None))
self.zero.setText(_translate("MainWindow", "C", None))
self.mul.setText(_translate("MainWindow", "*", None))
self.num_9.setText(_translate("MainWindow", "9", None))
self.div.setText(_translate("MainWindow", "/", None))
self.num_1.setText(_translate("MainWindow", "1", None))
self.num_8.setText(_translate("MainWindow", "8", None))
self.num_5.setText(_translate("MainWindow", "5", None))
self.num_2.setText(_translate("MainWindow", "2", None))
self.num_7.setText(_translate("MainWindow", "7", None))
self.num_3.setText(_translate("MainWindow", "3", None))
self.equal.setText(_translate("MainWindow", "=", None))
self.num_4.setText(_translate("MainWindow", "4", None))
self.num_0.setText(_translate("MainWindow", "0", None))
self.num_6.setText(_translate("MainWindow", "6", None))
self.pushButton_add.setText(_translate("MainWindow", "+", None))
self.sub.setText(_translate("MainWindow", "-", None))此时，界面的编写和显示就结束了。
三、main.py的细解读
把前面的那块代码，这里再看下，如下
import sys
from PyQt4 import QtCore, QtGui
import UI_main
from PyQt4.Qt import QMainWindow, QApplication, SIGNAL, QFileDialog, QIcon, QAction
class show_Workstation(QtGui.QMainWindow):
def __init__(self, parent=None):
QtGui.QWidget.__init__(self, parent)
self._createUI()
self.show()
def _createUI(self):
self.ui = UI_main.Ui_MainWindow()
self.ui.setupUi(self)
self.ui.retranslateUi(self)
if __name__ == "__main__": # 主程序
app = QtGui.QApplication(sys.argv)
ai_workstation = show_Workstation() # My_Form可以修改
sys.exit(app.exec_())主要就做了一下的事情：
- 引入ui转.py生成的部分。import UI_main
- 定义一个类，名字随便取，其中现阶段这个类主要的事情就是显示
- 将其显示出来
这里先说到这里，之后的更加丰富的事件，也主要是在这里的类内进行定义和操作的，下节见
推荐下载的参考：pyqt designer实现的音乐播放器
425
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
