devbox
小蓝xlanll
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：小蓝xlanll | 2024-02-25 01:38:32

赞

踩

pyqt4

本系列文章前情回顾：

  1. 【PyQt4】 学习1 之-菜单栏（addMenu）、工具栏（addToolBar）、TextEdit工具框
  2. 【PyQt4】学习2 之-BoxLayout布局、网格GridLayout布局，实现计算器界面设计
  3. 【PyQt4】学习3 之-串联1、2手撸代码写个界面

在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的信息进行显示出来，代码如下（在之后的项目中，可在这里进行修改即可）

  1. __author__ = "lingjun"
  2. # E-mail: 1763469890@qq.com
  3. # welcome to attention:小白CV
  4.  
  5. import sys
  6. from PyQt4 import QtCore, QtGui
  7. import UI_main
  8. from PyQt4.Qt import QMainWindow, QApplication, SIGNAL, QFileDialog, QIcon, QAction
  9.  
  10. class show_Workstation(QtGui.QMainWindow):
  11.     def __init__(self, parent=None):
  12.         QtGui.QWidget.__init__(self, parent)
  13.  
  14.         self._createUI()
  15.         self.show()
  16.  
  17.  
  18.     def _createUI(self):
  19.         self.ui = UI_main.Ui_MainWindow()
  20.         self.ui.setupUi(self)
  21.         self.ui.retranslateUi(self)
  22.  
  23.  
  24. if __name__ == "__main__":  # 主程序
  25.     app = QtGui.QApplication(sys.argv)
  26.     ai_workstation = show_Workstation()  # My_Form可以修改
  27.     sys.exit(app.exec_())

结果是这样的，发现lineEdit部分有些小，接下来对这块做些简单的修改

这里添加了一个vertical spacer，用于将lineEdit与按键做个分隔，将lineEdit的大小做个设定

之后，重新将ui文件转化一次.py文件，再运行main.py，查看结果

最后，再查看一些ui转为.py文件的内容，如下（自动生成，无需改动）

  1. # -*- coding: utf-8 -*-
  2.  
  3. # Form implementation generated from reading ui file 'untitled.ui'
  4. #
  5. # Created by: PyQt4 UI code generator 4.11.4
  6. #
  7. # WARNING! All changes made in this file will be lost!
  8.  
  9. from PyQt4 import QtCore, QtGui
  10.  
  11. try:
  12.     _fromUtf8 = QtCore.QString.fromUtf8
  13. except AttributeError:
  14.     def _fromUtf8(s):
  15.         return s
  16.  
  17. try:
  18.     _encoding = QtGui.QApplication.UnicodeUTF8
  19.     def _translate(context, text, disambig):
  20.         return QtGui.QApplication.translate(context, text, disambig, _encoding)
  21. except AttributeError:
  22.     def _translate(context, text, disambig):
  23.         return QtGui.QApplication.translate(context, text, disambig)
  24.  
  25. class Ui_MainWindow(object):
  26.     def setupUi(self, MainWindow):
  27.         MainWindow.setObjectName(_fromUtf8("MainWindow"))
  28.         MainWindow.resize(408, 422)
  29.         self.centralwidget = QtGui.QWidget(MainWindow)
  30.         self.centralwidget.setObjectName(_fromUtf8("centralwidget"))
  31.         self.verticalLayout = QtGui.QVBoxLayout(self.centralwidget)
  32.         self.verticalLayout.setObjectName(_fromUtf8("verticalLayout"))
  33.         self.lineEdit = QtGui.QLineEdit(self.centralwidget)
  34.         self.lineEdit.setMinimumSize(QtCore.QSize(300, 80))
  35.         self.lineEdit.setObjectName(_fromUtf8("lineEdit"))
  36.         self.verticalLayout.addWidget(self.lineEdit)
  37.         spacerItem = QtGui.QSpacerItem(20, 20, QtGui.QSizePolicy.Minimum, QtGui.QSizePolicy.Expanding)
  38.         self.verticalLayout.addItem(spacerItem)
  39.         self.gridLayout = QtGui.QGridLayout()
  40.         self.gridLayout.setObjectName(_fromUtf8("gridLayout"))
  41.         self.zero = QtGui.QPushButton(self.centralwidget)
  42.         self.zero.setMinimumSize(QtCore.QSize(60, 60))
  43.         self.zero.setMaximumSize(QtCore.QSize(60, 60))
  44.         self.zero.setObjectName(_fromUtf8("zero"))
  45.         self.gridLayout.addWidget(self.zero, 0, 3, 1, 1)
  46.         self.mul = QtGui.QPushButton(self.centralwidget)
  47.         self.mul.setMinimumSize(QtCore.QSize(60, 60))
  48.         self.mul.setMaximumSize(QtCore.QSize(60, 60))
  49.         self.mul.setObjectName(_fromUtf8("mul"))
  50.         self.gridLayout.addWidget(self.mul, 3, 2, 1, 1)
  51.         self.num_9 = QtGui.QPushButton(self.centralwidget)
  52.         self.num_9.setMinimumSize(QtCore.QSize(60, 60))
  53.         self.num_9.setMaximumSize(QtCore.QSize(60, 60))
  54.         self.num_9.setObjectName(_fromUtf8("num_9"))
  55.         self.gridLayout.addWidget(self.num_9, 0, 2, 1, 1)
  56.         self.div = QtGui.QPushButton(self.centralwidget)
  57.         self.div.setMinimumSize(QtCore.QSize(60, 60))
  58.         self.div.setMaximumSize(QtCore.QSize(60, 60))
  59.         self.div.setObjectName(_fromUtf8("div"))
  60.         self.gridLayout.addWidget(self.div, 3, 1, 1, 1)
  61.         self.num_1 = QtGui.QPushButton(self.centralwidget)
  62.         self.num_1.setMinimumSize(QtCore.QSize(60, 60))
  63.         self.num_1.setMaximumSize(QtCore.QSize(60, 60))
  64.         self.num_1.setObjectName(_fromUtf8("num_1"))
  65.         self.gridLayout.addWidget(self.num_1, 2, 0, 1, 1)
  66.         self.num_8 = QtGui.QPushButton(self.centralwidget)
  67.         self.num_8.setMinimumSize(QtCore.QSize(60, 60))
  68.         self.num_8.setMaximumSize(QtCore.QSize(60, 60))
  69.         self.num_8.setObjectName(_fromUtf8("num_8"))
  70.         self.gridLayout.addWidget(self.num_8, 0, 1, 1, 1)
  71.         self.num_5 = QtGui.QPushButton(self.centralwidget)
  72.         self.num_5.setMinimumSize(QtCore.QSize(60, 60))
  73.         self.num_5.setMaximumSize(QtCore.QSize(60, 60))
  74.         self.num_5.setObjectName(_fromUtf8("num_5"))
  75.         self.gridLayout.addWidget(self.num_5, 1, 1, 1, 1)
  76.         self.num_2 = QtGui.QPushButton(self.centralwidget)
  77.         self.num_2.setMinimumSize(QtCore.QSize(60, 60))
  78.         self.num_2.setMaximumSize(QtCore.QSize(60, 60))
  79.         self.num_2.setObjectName(_fromUtf8("num_2"))
  80.         self.gridLayout.addWidget(self.num_2, 2, 1, 1, 1)
  81.         self.num_7 = QtGui.QPushButton(self.centralwidget)
  82.         self.num_7.setMinimumSize(QtCore.QSize(60, 60))
  83.         self.num_7.setMaximumSize(QtCore.QSize(60, 60))
  84.         self.num_7.setObjectName(_fromUtf8("num_7"))
  85.         self.gridLayout.addWidget(self.num_7, 0, 0, 1, 1)
  86.         self.num_3 = QtGui.QPushButton(self.centralwidget)
  87.         self.num_3.setMinimumSize(QtCore.QSize(60, 60))
  88.         self.num_3.setMaximumSize(QtCore.QSize(60, 60))
  89.         self.num_3.setObjectName(_fromUtf8("num_3"))
  90.         self.gridLayout.addWidget(self.num_3, 2, 2, 1, 1)
  91.         self.equal = QtGui.QPushButton(self.centralwidget)
  92.         self.equal.setMinimumSize(QtCore.QSize(60, 60))
  93.         self.equal.setMaximumSize(QtCore.QSize(60, 60))
  94.         self.equal.setObjectName(_fromUtf8("equal"))
  95.         self.gridLayout.addWidget(self.equal, 1, 3, 1, 1)
  96.         self.num_4 = QtGui.QPushButton(self.centralwidget)
  97.         self.num_4.setMinimumSize(QtCore.QSize(60, 60))
  98.         self.num_4.setMaximumSize(QtCore.QSize(60, 60))
  99.         self.num_4.setObjectName(_fromUtf8("num_4"))
  100.         self.gridLayout.addWidget(self.num_4, 1, 0, 1, 1)
  101.         self.num_0 = QtGui.QPushButton(self.centralwidget)
  102.         self.num_0.setMinimumSize(QtCore.QSize(60, 60))
  103.         self.num_0.setMaximumSize(QtCore.QSize(60, 60))
  104.         self.num_0.setObjectName(_fromUtf8("num_0"))
  105.         self.gridLayout.addWidget(self.num_0, 3, 0, 1, 1)
  106.         self.num_6 = QtGui.QPushButton(self.centralwidget)
  107.         self.num_6.setMinimumSize(QtCore.QSize(60, 60))
  108.         self.num_6.setMaximumSize(QtCore.QSize(60, 60))
  109.         self.num_6.setObjectName(_fromUtf8("num_6"))
  110.         self.gridLayout.addWidget(self.num_6, 1, 2, 1, 1)
  111.         self.pushButton_add = QtGui.QPushButton(self.centralwidget)
  112.         self.pushButton_add.setMinimumSize(QtCore.QSize(60, 60))
  113.         self.pushButton_add.setMaximumSize(QtCore.QSize(60, 60))
  114.         self.pushButton_add.setObjectName(_fromUtf8("pushButton_add"))
  115.         self.gridLayout.addWidget(self.pushButton_add, 3, 3, 1, 1)
  116.         self.sub = QtGui.QPushButton(self.centralwidget)
  117.         self.sub.setMinimumSize(QtCore.QSize(60, 60))
  118.         self.sub.setMaximumSize(QtCore.QSize(60, 60))
  119.         self.sub.setObjectName(_fromUtf8("sub"))
  120.         self.gridLayout.addWidget(self.sub, 2, 3, 1, 1)
  121.         self.verticalLayout.addLayout(self.gridLayout)
  122.         MainWindow.setCentralWidget(self.centralwidget)
  123.         self.menubar = QtGui.QMenuBar(MainWindow)
  124.         self.menubar.setGeometry(QtCore.QRect(0, 0, 408, 23))
  125.         self.menubar.setObjectName(_fromUtf8("menubar"))
  126.         MainWindow.setMenuBar(self.menubar)
  127.         self.statusbar = QtGui.QStatusBar(MainWindow)
  128.         self.statusbar.setObjectName(_fromUtf8("statusbar"))
  129.         MainWindow.setStatusBar(self.statusbar)
  130.  
  131.         self.retranslateUi(MainWindow)
  132.         QtCore.QMetaObject.connectSlotsByName(MainWindow)
  133.  
  134.     def retranslateUi(self, MainWindow):
  135.         MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow", None))
  136.         self.zero.setText(_translate("MainWindow", "C", None))
  137.         self.mul.setText(_translate("MainWindow", "*", None))
  138.         self.num_9.setText(_translate("MainWindow", "9", None))
  139.         self.div.setText(_translate("MainWindow", "/", None))
  140.         self.num_1.setText(_translate("MainWindow", "1", None))
  141.         self.num_8.setText(_translate("MainWindow", "8", None))
  142.         self.num_5.setText(_translate("MainWindow", "5", None))
  143.         self.num_2.setText(_translate("MainWindow", "2", None))
  144.         self.num_7.setText(_translate("MainWindow", "7", None))
  145.         self.num_3.setText(_translate("MainWindow", "3", None))
  146.         self.equal.setText(_translate("MainWindow", "=", None))
  147.         self.num_4.setText(_translate("MainWindow", "4", None))
  148.         self.num_0.setText(_translate("MainWindow", "0", None))
  149.         self.num_6.setText(_translate("MainWindow", "6", None))
  150.         self.pushButton_add.setText(_translate("MainWindow", "+", None))
  151.         self.sub.setText(_translate("MainWindow", "-", None))

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

三、main.py的细解读

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

  1. import sys
  2. from PyQt4 import QtCore, QtGui
  3. import UI_main
  4. from PyQt4.Qt import QMainWindow, QApplication, SIGNAL, QFileDialog, QIcon, QAction
  5.  
  6. class show_Workstation(QtGui.QMainWindow):
  7.     def __init__(self, parent=None):
  8.         QtGui.QWidget.__init__(self, parent)
  9.  
  10.         self._createUI()
  11.         self.show()
  12.  
  13.  
  14.     def _createUI(self):
  15.         self.ui = UI_main.Ui_MainWindow()
  16.         self.ui.setupUi(self)
  17.         self.ui.retranslateUi(self)
  18.  
  19.  
  20. if __name__ == "__main__":  # 主程序
  21.     app = QtGui.QApplication(sys.argv)
  22.     ai_workstation = show_Workstation()  # My_Form可以修改
  23.     sys.exit(app.exec_())

主要就做了一下的事情：

  1. 引入ui转.py生成的部分。import UI_main
  2. 定义一个类，名字随便取，其中现阶段这个类主要的事情就是显示
  3. 将其显示出来

这里先说到这里，之后的更加丰富的事件，也主要是在这里的类内进行定义和操作的，下节见

推荐下载的参考：pyqt designer实现的音乐播放器 

PyQT5速成教程-4 Qt Designer实战[上] - 简书

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/137599
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号