1.新建一个项目

2.进行显示

3.main.py的细解读

本系列文章前情回顾：

PyQt4学习1之---菜单栏（addMenu）、工具栏（addToolBar）、TextEdit工具框

PyQt4学习2之---BoxLayout布局、网格GridLayout布局，实现计算器界面设计

在PyQt4学习2系列中，采用直接敲击代码的形式，创建了一个简易计算器的界面，没有对其进行进一步的实现，如下图这个样子

这里呢，我们在PyQt4学习3之---采用Qt Designer拖动创建一个简易计算器，开始吧。

Qt Designer 是交互式可视化GUI设计工具，可以帮助我们快速开发 PyQt 程序的速度。

它生成的 UI 界面是一个后缀为 .ui 的文件，可以通过 pyiuc 转换为 .py 文件。

关于Qt Designer与pycharm的配置过程这里不详述了，网上的介绍比较多，能较好的实现，我们直接在配置好的基础上进行实操。

1.新建一个项目

我这里命名为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操作，全部都会被覆盖，消失不见。

2.进行显示

这里我们需要创建一个main.py的文件，将ui的信息进行显示出来，代码如下（在之后的项目中，可在这里进行修改即可）

__author__ = "lingjun"
# E-mail: 1763469890@qq.com
# welcome to attention:小白CVimport sys
from PyQt4 import QtCore, QtGui
import UI_main
from PyQt4.Qt import QMainWindow, QApplication, SIGNAL, QFileDialog, QIcon, QActionclass 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文件的内容，如下（自动生成，无需改动）

__author__ = "lingjun"
# E-mail: 1763469890@qq.com
# welcome to attention:小白CV# -*- 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, QtGuitry:_fromUtf8 = QtCore.QString.fromUtf8
except AttributeError:def _fromUtf8(s):return stry:_encoding = QtGui.QApplication.UnicodeUTF8def _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))

此时，界面的编写和显示就结束了。

3.main.py的细解读

把前面的那块代码，这里再看下，如下

__author__ = "lingjun"
# E-mail: 1763469890@qq.com
# welcome to attention:小白CVimport sys
from PyQt4 import QtCore, QtGui
import UI_main
from PyQt4.Qt import QMainWindow, QApplication, SIGNAL, QFileDialog, QIcon, QActionclass 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实现的音乐播放器

https://www.jianshu.com/p/61cb5ed4548f?utm_campaign=haruki&utm_content=note&utm_medium=reader_share&utm_source=qzone

小白CV：公众号旨在专注CV（计算机视觉）、AI（人工智能）领域相关技术，文章内容主要围绕C++、Python编程技术，机器学习（ML）、深度学习（DL）、OpenCV等图像处理技术，深度发掘技术要点，记录学习工作中常用的操作，做你学习工作的问题小助手。只关注技术，做CV领域专业的知识分享平台。

PyQt4学习4之---采用Qt Designer拖动创建计算器界面相关推荐

PyQt5学习笔记02----初探Qt Designer 设计师
网上很多教程都是纯代码,对于新手看起来就很头疼,pyqt为我们提供了Qt designer来设计窗口界面,用起来也非常方便.对于新手来说应该善用它,虽然做出来的界面不那么华丽,但至少可以做出个像样的窗 ...
Qt Designer自定义控件创建、使用
Qt Designer自定义控件创建.使用如何创建一个自定义的QWidget控件并导入Qt Designer 中进行使用? 一.创建Qt Designer自定义控件第一步: 创建Qt Design ...
[PyQt]使用Qt Designer设计师完成PyQt界面图标设计
开发环境 Python3.5.3 + PyQt5.6 + PyCharm2017.2 开发环境暂不赘述,打开Qt Designer后,右键空白处添加工具栏顶栏处文件编辑关于都是通过双击在这里输 ...
PyQt5 图形界面-用Qt Designer来设计UI界面，并转化为python代码运行实例演示
Qt Designer 是 Qt Creater 程序里的一个功能. PyQt5 是把 Qt Designer 设计的界面转化为 python 代码的库. 请看这篇文章: Qt Creater.PyQ ...
Qt 快速利用qt designer Layout绘制GUI界面
文章目录前言一.目的二.实现过程 1.界面使用的元素介绍: 2.实现步骤总结前言最近用qt画一个项目界面,本文主要记录了如何通过qt designer使用layout进行快速绘制,下文中的 ...
如何将PyQt（pyqt-tools）中的Qt Designer改为中文界面（汉化）
说明:转载自https://blog.csdn.net/Bingoooooo_/article/details/81535892 首先直接用pip安装的PyQt-tools的Designer是不带翻译 ...
python操作界面_Python使用PyQt5的Designer工具创建UI界面
一.Designer-UI编辑器 Designer是pyqt5-tools带的工具,默认可以在Python安装目录下找到的.我的之前项目导入过pyqt5-tools,所以我直接全盘搜索到了. 打开de ...
distiller的另一个实例正忙于启动_PYQT5学习（02）：利用Qt Designer制作第一个窗口程序
目标利用Qt Designer设计窗口界面使用PyUIC把Qt Designer生成的UI文件转换为py文件使用转换生成的py文件创建项目启动启动pycharm并创建项目这一环节在这里就不 ...
linux qt 自定义控件,编写Qt Designer自定义控件（一）——如何创建并使用Qt自定义控件...
要想在Qt Designer中使用自定义控件,必须要使Qt Designer能够知道我们的自定义控件的存在.有两种方法可以把新自定义控件的信息通知给Qt Designer:"升级(promo ...

PyQt4学习4之---采用Qt Designer拖动创建计算器界面

1.新建一个项目

2.进行显示

3.main.py的细解读

PyQt4学习4之---采用Qt Designer拖动创建计算器界面相关推荐

最新文章

热门文章