【Python】PyQT5 Sin,Cos Matplotlib 動畫應用程式 -4 PyQT5 與MVCUI分離

Hello~ Internet!
終於來到這個系列的第四篇了，經過上一篇的介紹大家理解怎麼使用特殊的 QSS 製作不一樣的介面與美化效果了吧！還沒看得可以點這裡看上一篇介紹喔！
這一篇我們來讓程式更有架構吧！

這篇比較短將介紹到常用的設計模式:

• MVC
• PyQt5 與 MVC 相遇

MVC

MVC 是一種很常見的設計模式，將軟體架構分割為 3 大區塊：

• Controller 控制器 — 負責轉發事件等等。
• View 介面 — 處理介面設計。
• Model 模型 — 處理演算法~處理資料庫管理等等可實現的功能。

詳細的介紹會在之後的 13 篇設計模式系列講解到~
不過這次我們主要只要把介面與我們的 MainWindow 這個 class 分割出來，這樣以後我們怎麼改介面都不需要動到我們事件處理的邏輯了！

PyQt5 與 MVC 相遇

首先先給大家看看檔案的架構:

接下來我們就把 MainWindow class 改變一下

薑！薑！薑！薑！~

from ui import Ui_MainWindow
class MainWindow(QMainWindow, Ui_MainWindow):
    def __init__(self, parent=None):
        super().__init__(parent=parent)
        self.setupUi(self)
        self.connectSlot()
        
    def connectSlot(self):
        self.button.clicked.connect(self.btnOnClicked)

    def btnOnClicked(self):
        print("Button 被按下了!")

多繼承了一個 class — Ui_MainWindow

而這個 class 放入的是我們從 class 中移出的那些設定，像是這樣
並且放到另一個檔案 ui.py 中

from PyQt5 import QtCore, QtGui, QtWidgets

class Ui_MainWindow:
    def setupUi(self, MainWindow):
        
        MainWindow.resize(1200, 800)
        MainWindow.setObjectName("MainWindow")
        MainWindow.setStyleSheet("""#centralwidget {
            background-color: qlineargradient(spread:pad, x1:0, y1:1, x2:1, y2:0, stop:0 rgba(87, 255, 140, 255), stop:1 rgba(117, 210, 255, 255));
            }"""
        )
        
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        
        self.button = QtWidgets.QPushButton(self.centralwidget)
        self.button.setText("Hello")
        self.button.setStyleSheet(
            """
                /*background-color: qlineargradient(spread:pad, x1:0, y1:1, x2:1, y2:0, stop:0 rgba(255, 0, 0, 255), stop:1 rgba(0, 0, 255, 255));*/
                background-color: white;
                border-radius: 15px;
                border-radius:
                    30px;
                border-style:
                    solid;
                border-width:
                    10px;
                border-color: green;
                font: 63 20pt "Adobe 繁黑體 Std B";
            """
        )
        
        MainWindow.setCentralWidget(self.centralwidget)

不知道大家有沒有發現，Ui_MainWindow 的 setupUi 中做的所有事情都單單只有跟 UI 有關的操作，而 MainWindow 中留下的都只有事件處理相關的邏輯與程式碼。如此一來我們怎麼改變 UI 也不需要動到不需要更改的程式碼了~

這一篇大概就到這邊結束了，主要是想要為之後的章節做連接也一起介紹一下 MVC 這種設計模式~

當然~
一樣的完整程式碼我都放在 gtihub 上給大家直接下載喔~
在這裡 github ep4

---

結尾:

不知道大家覺得這樣的系列文好不好 在下面留言告訴我喔
或是有什麼其他的想法都可以告訴我喔~
(不敢公開留言的話可以用 聯絡我 寄信跟我說喔~

那就先這樣啦！
我們下一篇見囉！

ㄅㄅ