內容目錄

看完這篇文章你會得到的成果圖

今天我們要延伸昨天的概念，開始來講解我們如何設計 controller.py

此篇文章的範例程式碼 github

https://github.com/howarder3/ironman2021_PyQt5_photoshop/tree/main/day05_pyqt_template

先複習一下 PyQt 的程式邏輯

細節我們在昨天已經有提過了，這個是我們設計「視覺化應用的精神」

接下來我們會以「程式的角度」，來說明怎麼樣寫這樣的程式

以「程式角度」，來說明如何建立 PyQt 的系統

我們設計完 UI.py 後，再來我們要設計 controller.py，
我們可以先看下圖，先有個架構理解我們在做什麼：

用「controller.py」去 import「UI.py」來使用，
用「start.py」去 import「controller.py」來使用，

之前在網路上看到的程式碼，很多都會將程式進入點也寫在這裡
並將 controller.py 命名為 start.py 或 strat_UI.py 之類的
這邊讀者只要有一隻程式會有包含「UI.py」、「controller.py」的概念，
相信就能對網路上大部分的範例程式碼能夠進行初步的解讀，
(之前我就是卡在 UI 與 control 的概念整個混在同一支程式碼中，所以學得非常混亂XD)

先來看 controller.py 範例，將程式進入點 (start.py) 整在一起

這個範例是我看來不少文章後，做給自己的特製版

第二行的「from UI import Ui_MainWindow」：UI 的部分，請改成你儲存的 UI.py 檔名

Ui_MainWindow，是 Qt dedigner 預設產生出 .py 檔就會取名的 class 封裝後的名稱，建議沒必要不需要特別去更改

from PyQt5 import QtWidgets, QtGui, QtCore
from UI import Ui_MainWindow

class MainWindow(QtWidgets.QMainWindow):
    def __init__(self):
        # in python3, super(Class, self).xxx = super().xxx
        super(MainWindow, self).__init__()
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)
        self.setup_control()

    def setup_control(self):
        # TODO
        self.ui.textEdit.setText('Happy World!')


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

說明

上面的範例程式，有調整過適合套用在往後要設計的各種 UI 程式裡面，
我們接下來只需要改動的地方都在「setup_control()」之中，

例如像上面範例中的

def setup_control(self):
    # TODO
    self.ui.textEdit.setText('Happy World!')

我們將我們設計的「UI程式」，封裝後儲存在「self.ui」中，
而 self.ui 裡面的 textEdit，就是我們這次修改內容的目標。

我們使用 .setText 修改成 ‘Happy World!’，就能得到以下的結果。

我們使用 Day2 製作出來的「UI.py」

程式碼是一樣的，為了不讓讀者還需要特別回去翻，
我們這邊在附上範例一次，請將他存成「UI.py」，
或自行去修改上面提到的「from UI import Ui_MainWindow」的「UI」檔名。

from PyQt5 import QtCore, QtGui, QtWidgets

class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(800, 600)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.textEdit = QtWidgets.QTextEdit(self.centralwidget)
        self.textEdit.setGeometry(QtCore.QRect(270, 290, 104, 71))
        self.textEdit.setObjectName("textEdit")
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 800, 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)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplica