本系列文章前情回顧：

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: [email protected]
# 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文件的內容，如下（自動生成，無需改動）

__author__ = "lingjun"
# E-mail: [email protected]
# 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, 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))

此時，界面的編寫和顯示就結束了。

3.main.py的細解讀

把前面的那塊代碼，這裏再看下，如下

__author__ = "lingjun"
# E-mail: [email protected]
# 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_())

主要就做了一下的事情：

引入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拖動創建計算器界面

1.新建一個項目

2.進行顯示

3.main.py的細解讀

高效率使用windows

python混淆矩陣（confusion_matrix）FP、FN、TP、TN、ROC，精確率(Precision),召回率(Recall),準確率(Accuracy)詳述與實現

Sublime Text--超級好用的代碼和文件編輯器，什麼文本文件都可以打開哦

python os文件夾/文件的那些實用操作

目標檢測中Bounding Box的詳細解讀與XML文件解析

PyTorch、TorchVision、PyQt4/5、OpenCV下載安裝，Windows遠程桌面Ubuntu16.04記錄(實操)

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結