0.2 使用 vscode 借助 PyQt5 设计一个计算器

1. 使用 vscode 从零开始学习 PyQt5 中我们创建了 button.uibutton.py,而它们除了有一个关闭按钮外没有其他用途,为此,需要将它们删除:

$ rm button.ui button.py

接下来我们先做一个计算器:

计算器设计

重新在 vscode 的终端打开 designer,并做如下配置:

保存文件并命名为 computer.ui。使用鼠标点击 LCD 框,然后在其属性编辑器的 Fliter 栏输入 fr,跳出 frameShape,修改其值为 NoFrame(表示无框):

将 LCD 最大数字位数显示由 5 改成 10:

创建 17 个 PushButton 按钮:

为所有按钮分配名称:

选中所有按钮并修改字体大小:

选中第 1 行,设置水平布局:

依次选中下面的 3 行,设置为水平布局,效果如下:

接着选中所有按钮,设置垂直布局,效果如下:

接着选中整个窗体,设置垂直布局:

点击保存,接着使用 pyuic5 将 *.ui 转换为 *.py

然后在 main.py 中重写:

import sys
from computer import Ui_MainWindow  # 调用ui模块中的Ui_MainWindow()类
# Qt设计师上第一步创建时选择了Main Window时继承QMainWindow类
from PyQt5.QtWidgets import QApplication, QMainWindow
# Qt设计师上第一步创建时选择了Dialog时继承QDialog类
# Qt设计师上第一步创建时选择了Widget时继承QWidget类


class Digcalculator(QMainWindow, Ui_MainWindow):  # 继承自父类QtWidgets.QMainWindow
    # Qt设计师上第一步创建时选择了Main Window时继承QMainWindow类
    # Qt设计师上第一步创建时选择了Dialog时继承QDialog类
    # Qt设计师上第一步创建时选择了Widget时继承QWidget类
    # parent = None代表此QWidget属于最上层的窗口,也就是MainWindows.
    def __init__(self, parent=None):
        super(Digcalculator, self).__init__()  # 因为继承关系,要对父类初始化
        # 通过super初始化父类,__init__()函数无self,若直接QtWidgets.QMainWindow).__init__(self),括号里是有self的
        self.setupUi(self)


if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = Digcalculator()
    window.show()
    sys.exit(app.exec_())

这样便完成了 UI 的设计部分。为什么说是仅仅完成了 UI 的设计呢?因为,你现在运行代码 main.py 仅仅生成了一个 UI 界面和一些操作(action,按键),而想要计算器正常使用,还需要完成逻辑部分。

计算器的逻辑设计

首先使用 designer 修改各个按钮的名称,之后重新生成 computer.py,再重写 main.py

import sys
from computer import Ui_MainWindow  # 调用ui模块中的Ui_MainWindow()类
from PyQt5 import QtWidgets
# Qt设计师上第一步创建时选择了Main Window时选择QMainWindow
from PyQt5.QtWidgets import QApplication, QMainWindow
# Qt设计师上第一步创建时选择了Dialog时选择QDialog
# Qt设计师上第一步创建时选择了Widget时选择QWidget


class Digcalculator(QMainWindow, Ui_MainWindow):  # 继承自父类QtWidgets.QMainWindow
    # Qt设计师上第一步创建时选择了Main Window时选择QMainWindow
    # Qt设计师上第一步创建时选择了Dialog时选择QDialog
    # Qt设计师上第一步创建时选择了Widget时选择QWidget

    # 定义5个类变量,公用变量
    lcdstring = ''  # 用来显示lcd上用来显示的字符
    operation = ''  # 定义一个操作符
    currentNum = 0  # 当前值
    previousNum = 0  # 上一个值
    result = 0  # 存放结果

    # parent = None代表此QWidget属于最上层的窗口,也就是MainWindows.
    def __init__(self, parent=None):
        super(Digcalculator, self).__init__()  # 因为继承关系,要对父类初始化
        # 通过super初始化父类,__init__()函数无self,若直接QtWidgets.QDialog).__init__(self),括号里是有self的
        self.setupUi(self)
        self.action()  # 存放所有的信号槽

    def action(self):
        # 定义按下数字执行的方法
        self.button_0.clicked.connect(self.buttonClicked)
        self.button_1.clicked.connect(self.buttonClicked)
        self.button_2.clicked.connect(self.buttonClicked)
        self.button_3.clicked.connect(self.buttonClicked)
        self.button_4.clicked.connect(self.buttonClicked)
        self.button_5.clicked.connect(self.buttonClicked)
        self.button_6.clicked.connect(self.buttonClicked)
        self.button_7.clicked.connect(self.buttonClicked)
        self.button_8.clicked.connect(self.buttonClicked)
        self.button_9.clicked.connect(self.buttonClicked)
        self.button_point.clicked.connect(self.buttonClicked)

        # 定义按下操作符执行的方法
        self.button_plus.clicked.connect(self.opClicked)
        self.button_subtract.clicked.connect(self.opClicked)  # -
        self.button_multiply.clicked.connect(self.opClicked)  # *
        self.button_divide.clicked.connect(self.opClicked)  # /

        # 定义按下清除键执行的方法
        self.button_clear.clicked.connect(self.clearClicked)

        # 定义按下等于号执行的方法
        self.button_equal.clicked.connect(self.equalClicked)

    def buttonClicked(self):
        if len(self.lcdstring) <= 27:  # 当lcd数值显示长度小于等于27时执行
            self.lcdstring = self.lcdstring + self.sender().text()
            # 新lcd的显示内容=老lcd的显示内容+按钮传过来的对象的text值
            if str(self.lcdstring) == '.':  # 若第一次输入时为1个点
                self.lcdstring = '0.'  # 我们把'.'替换成'0.'
                self.lcd.display(self.lcdstring)
                # 将self.lcdstring值在lcd中显示出来
                self.currentNum = float(self.lcdstring)
                # 将lcd中的数字强制转换为浮点型,方便小数计算
            else:
                if str(self.lcdstring).count('.') > 1:  # 当小数点的数量大于1时,必须转换成str字符串,否则无count属性
                    self.lcdstring = str(self.lcdstring)[:-1]  # 我们利用切片将最后一个点去除
                    self.lcd.display(self.lcdstring)
                    # 将self.lcdstring值在lcd中显示出来
                    self.currentNum = float(self.lcdstring)  # 无法将字符串转换为浮点型
                    # 将lcd中的数字强制转换为浮点型,方便小数计算
                else:
                    self.lcd.display(self.lcdstring)
                    # 将self.lcdstring值在lcd中显示出来
                    self.currentNum = float(self.lcdstring)  # 无法将字符串转换为浮点型
                    # 将lcd中的数字强制转换为浮点型,方便小数计算
        else:  # lcd长度大于9
            pass

    def opClicked(self):
        # 按下等号后都要,清空操作符,为后续判断是否是连续运算做准备(比如9 * 9 * 9 = 729,但若不判断是否是连续运算程序则只运算等号前一步运算即9 * 9 = 81)
        if self.operation != '':  # 操作符不是空的,证明是连续运算
            self.equalClicked()
            self.previousNum = self.currentNum  # 将当前值传送给previousNum变量
            self.currentNum = 0  # 并把当前值清零
            self.lcdstring = ''  # 按下操作符后lcd显示屏首先会被清空
            self.operation = self.sender().text()  # 操作符等于按钮传过来的对象的text值
        else:
            self.previousNum = self.currentNum  # 将当前值传送给previousNum变量
            self.currentNum = 0  # 并把当前值清零
            self.lcdstring = ''  # 按下操作符后lcd显示屏首先会被清空
            self.operation = self.sender().text()  # 操作符等于按钮传过来的对象的text值
        # print(self.sender().text())
        # print(self.sender().objectName())

    def clearClicked(self):
        # 清除键按下去就是把所有参数清零就好
        self.lcdstring = ''  # 用来显示lcd上用来显示的字符
        self.operation = ''  # 定义一个操作符
        self.currentNum = 0  # 当前值
        self.previousNum = 0  # 上一个值
        self.result = 0  # 存放结果
        self.lcd.display(0)  # 最后把lcd中的数字改成0

    def equalClicked(self):
        if self.operation == '+':  # 当操作符为加号
            self.result = self.previousNum+self.currentNum  # 结果就是上一个值加当前值
            self.lcd.display(self.result)  # 把结果显示在lcd中

        if self.operation == '-':  # 当操作符为减号
            self.result = self.previousNum-self.currentNum  # 结果就是上一个值减当前值
            self.lcd.display(self.result)  # 把结果显示在lcd中

        if self.operation == '*':  # 当操作符为乘号
            self.result = self.previousNum*self.currentNum  # 结果就是上一个值乘当前值
            self.lcd.display(self.result)  # 把结果显示在lcd中

        if self.operation == '/':  # 当操作符为除以号
            if self.currentNum == 0:
                self.lcd.display('Error')
                self.result = 0  # 出现错误后将结果清零
                self.previousNum = 0  # 上一个值清零
            else:
                self.result = self.previousNum/self.currentNum  # 结果就是上一个值除当前值
                self.lcd.display(self.result)  # 把结果显示在lcd中

        # 将运算的结果result顺便保存到currentNum当前值里,为后续计算做准备.否则无法准确计算紧接着操作.
        self.currentNum = self.result
        self.lcdstring = ''  # 将lcdstring顺便清空,为后续计算做准备.否则无法准确计算紧接着操作.相当于初始化
        # 清空操作符,为后续判断是否是连续运算做准备(比如9*9*9=729,但若不判断是否是连续运算程序则只运算等号前一步运算即9*9=81)
        self.operation = ''

    def closeEvent(self, event):  # 函数名固定不可变
        # 当我们关闭一个窗口时,在PyQt中就会触发一个QCloseEvent的事件,正常情况下会直接关闭这个窗口,
        # 但是我们不希望这样的事情发生,所以我们需要重新定义QCloseEvent,函数名称为closeEvent不可变
        reply = QtWidgets.QMessageBox.question(self, u'警告', u'确认退出?', QtWidgets.QMessageBox.Yes,
                                               QtWidgets.QMessageBox.No)
        # QtWidgets.QMessageBox.question(self,u'弹窗名',u'弹窗内容',选项1,选项2)
        if reply == QtWidgets.QMessageBox.Yes:
            event.accept()  # 关闭窗口
        else:
            event.ignore()  # 忽视点击X事件


if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = Digcalculator()
    window.show()
    sys.exit(app.exec_())

这样,便真正的完成计算器的编写(UI+逻辑)。

为了代码的可复用,下面需要重构代码结构。

  1. 创建目录 UI,并将 computer.ui 放入其中,删除 computer.py
  2. 创建目录 app/computer 并将 main.py 放入其中;
  3. 进入 目录 UI,将 computer.ui 转换为 ui.py,并放入 app/computer 目录下。
$ pyuic5 .\computer.ui -o ..\app\computer\ui.py

文件树如下:

可以看到文件后面有标记 U,表示未被 git 跟踪,由于我们已经完成了“计算器”的开发(后期可能加入一些新功能)下面需要放入 git 中进行管理:

$ git add .
$ git commit -m "creat computer UI"
$ git flow feature finish designer

打包为 exe 文件

我们不仅仅满足于此,下面将 computer UI 打包为 .exe

$ pip install pyinstaller

切换到目录 app/computer,再输入:

$ pyinstaller -F -w main.py

即可完成文件打包。

dist 目录下的 main.exe 便可以作为一个独立软件,脱离 Python 直接运行。为了使用方便,需要重命名,比如 computer.exe

为了更加便利,我将该 pyqt5 项目放置到了 github:https://enjoying-learning.github.io/StudyPyQt5/examples/computer 之下。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
禁止转载,如需转载请通过简信或评论联系作者。
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,743评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,296评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,285评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,485评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,581评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,821评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,960评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,719评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,186评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,516评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,650评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,329评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,936评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,757评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,991评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,370评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,527评论 2 349