使用MVC架構寫一個PyQt計算機程式－天天向上

利用Qt Designer設計界面，並寫一個簡單python程式載入設計好的ui

1. 學習信號(signal)和槽(slot)

2. 學習GridLayout

開啟VSCode Terminal將qt 設計的介面轉成python檔案

> pyuic5 -x main.ui -o main_ui.py

轉出main_ui.py，下面是它的原始碼

# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'main.ui'
#
# Created by: PyQt5 UI code generator 5.15.9
#
# WARNING: Any manual changes made to this file will be lost when pyuic5 is
# run again.  Do not edit this file unless you know what you are doing.


from PyQt5 import QtCore, QtGui, QtWidgets


class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(640, 171)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.gridLayout = QtWidgets.QGridLayout(self.centralwidget)
        self.gridLayout.setObjectName("gridLayout")
        self.verticalLayout = QtWidgets.QVBoxLayout()
        self.verticalLayout.setObjectName("verticalLayout")
        self.horizontalLayout = QtWidgets.QHBoxLayout()
        self.horizontalLayout.setObjectName("horizontalLayout")
        self.a_lineEdit = QtWidgets.QLineEdit(self.centralwidget)
        sizePolicy = QtWidgets.QSizePolicy(QtWidgets.QSizePolicy.Expanding, QtWidgets.QSizePolicy.Expanding)
        sizePolicy.setHorizontalStretch(0)
        sizePolicy.setVerticalStretch(0)
        sizePolicy.setHeightForWidth(self.a_lineEdit.sizePolicy().hasHeightForWidth())
        self.a_lineEdit.setSizePolicy(sizePolicy)
        font = QtGui.QFont()
        font.setFamily("微軟正黑體")
        font.setPointSize(18)
        self.a_lineEdit.setFont(font)
        self.a_lineEdit.setAlignment(QtCore.Qt.AlignCenter)
        self.a_lineEdit.setObjectName("a_lineEdit")
        self.horizontalLayout.addWidget(self.a_lineEdit)
        self.label = QtWidgets.QLabel(self.centralwidget)
        font = QtGui.QFont()
        font.setFamily("Agency FB")
        font.setPointSize(36)
        self.label.setFont(font)
        self.label.setObjectName("label")
        self.horizontalLayout.addWidget(self.label)
        self.b_lineEdit = QtWidgets.QLineEdit(self.centralwidget)
        sizePolicy = QtWidgets.QSizePolicy(QtWidgets.QSizePolicy.Expanding, QtWidgets.QSizePolicy.Expanding)
        sizePolicy.setHorizontalStretch(0)
        sizePolicy.setVerticalStretch(0)
        sizePolicy.setHeightForWidth(self.b_lineEdit.sizePolicy().hasHeightForWidth())
        self.b_lineEdit.setSizePolicy(sizePolicy)
        font = QtGui.QFont()
        font.setFamily("微軟正黑體")
        font.setPointSize(18)
        self.b_lineEdit.setFont(font)
        self.b_lineEdit.setAlignment(QtCore.Qt.AlignCenter)
        self.b_lineEdit.setObjectName("b_lineEdit")
        self.horizontalLayout.addWidget(self.b_lineEdit)
        self.label_2 = QtWidgets.QLabel(self.centralwidget)
        font = QtGui.QFont()
        font.setFamily("Agency FB")
        font.setPointSize(36)
        self.label_2.setFont(font)
        self.label_2.setObjectName("label_2")
        self.horizontalLayout.addWidget(self.label_2)
        self.c_lineEdit = QtWidgets.QLineEdit(self.centralwidget)
        sizePolicy = QtWidgets.QSizePolicy(QtWidgets.QSizePolicy.Expanding, QtWidgets.QSizePolicy.Expanding)
        sizePolicy.setHorizontalStretch(0)
        sizePolicy.setVerticalStretch(0)
        sizePolicy.setHeightForWidth(self.c_lineEdit.sizePolicy().hasHeightForWidth())
        self.c_lineEdit.setSizePolicy(sizePolicy)
        font = QtGui.QFont()
        font.setFamily("微軟正黑體")
        font.setPointSize(18)
        self.c_lineEdit.setFont(font)
        self.c_lineEdit.setAlignment(QtCore.Qt.AlignCenter)
        self.c_lineEdit.setObjectName("c_lineEdit")
        self.horizontalLayout.addWidget(self.c_lineEdit)
        self.verticalLayout.addLayout(self.horizontalLayout)
        self.horizontalLayout_2 = QtWidgets.QHBoxLayout()
        self.horizontalLayout_2.setObjectName("horizontalLayout_2")
        self.clear_btn = QtWidgets.QPushButton(self.centralwidget)
        font = QtGui.QFont()
        font.setFamily("微軟正黑體")
        font.setPointSize(20)
        self.clear_btn.setFont(font)
        self.clear_btn.setObjectName("clear_btn")
        self.horizontalLayout_2.addWidget(self.clear_btn)
        self.calculate_btn = QtWidgets.QPushButton(self.centralwidget)
        font = QtGui.QFont()
        font.setFamily("微軟正黑體")
        font.setPointSize(20)
        self.calculate_btn.setFont(font)
        self.calculate_btn.setObjectName("calculate_btn")
        self.horizontalLayout_2.addWidget(self.calculate_btn)
        self.verticalLayout.addLayout(self.horizontalLayout_2)
        self.gridLayout.addLayout(self.verticalLayout, 0, 0, 1, 1)
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 640, 21))
        self.menubar.setObjectName("menubar")
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)

        self.retranslateUi(MainWindow)
        self.clear_btn.clicked.connect(self.a_lineEdit.clear) # type: ignore
        self.clear_btn.clicked.connect(self.b_lineEdit.clear) # type: ignore
        self.clear_btn.clicked.connect(self.c_lineEdit.clear) # type: ignore
        QtCore.QMetaObject.connectSlotsByName(MainWindow)

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
        self.a_lineEdit.setText(_translate("MainWindow", "2"))
        self.label.setText(_translate("MainWindow", "x"))
        self.b_lineEdit.setText(_translate("MainWindow", "3"))
        self.label_2.setText(_translate("MainWindow", "="))
        self.clear_btn.setText(_translate("MainWindow", "Clear"))
        self.calculate_btn.setText(_translate("MainWindow", "Calculate"))


if __name__ == "__main__":
    import sys
    app = QtWidgets.QApplication(sys.argv)
    MainWindow = QtWidgets.QMainWindow()
    ui = Ui_MainWindow()
    ui.setupUi(MainWindow)
    MainWindow.show()
    sys.exit(app.exec_())

開啟VSCode，新增 main.py

main.py原始碼如下

import sys
from PyQt5.QtWidgets import QApplication, QMainWindow, QMessageBox

# 1. Ui_MainWindow 是用qt designer設計介面的儲存為main.ui
# 2. 用下列指令將人機介面(main.ui)轉為python檔案(main_ui.py)  
#    pyuic5 -x main.ui -o  main_ui.py
# 3. 從main.ui.py檔案中 引用 UI_MainWindow類別
from main_ui import Ui_MainWindow

# Calculate_Main繼承QMainWindow
class Calculate_Main(QMainWindow):
    def __init__(self):
        QMainWindow.__init__(self)

        # 建立人機介面           
        self.ui = Ui_MainWindow()
       
        # 利用serupUI指向物件本身(Calculate_Main實體)
        # 若缺少這一行，則ui會缺少屬性(attribue)   
        # calculate_btn       
        self.ui.setupUi(self)  
       
        # 新增 訊號-槽
        self.ui.calculate_btn.clicked.connect(lambda: self.calculate_btn_clicked())
   

    def calculate_btn_clicked(self):
        try:
            a = float(self.ui.a_lineEdit.text())
            b = float(self.ui.b_lineEdit.text())
            c = a*b
            self.ui.c_lineEdit.setText(str(c))
        except ValueError as e:
            # print("Exception ", str(e))   
            QMessageBox.critical(self, "Error", str(e))
 

if __name__ == "__main__":
    app = QApplication(sys.argv)
    win = Calculate_Main()
    win.show()
    sys.exit(app.exec_())
 