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

(沒有，今天不寫程式，但要講重要觀念XD)

PyQt 的程式邏輯

我特別作了一張圖，方便初學者理解

之前我學的時候都沒有找到類似的圖，我看了一堆網路文章還是摸不著頭緒…
只能說真的是前人種樹後人乘涼XDD

先了解 介面 (UI, frontend)，跟控制 (backend) 的不同

類似的觀念其實我們在 Day2 已經有提到過，
不過這次我們要來真正的講我們到底在做什麼。

如果有接觸一點網頁開發，相信對於「前端、後端」這兩個詞都不陌生，

不過這裡我簡單說明一下，前端就是呈現的介面，他就是一個視覺上呈現的東西，
還需要後端去告訴他運作的邏輯，才會是一個完整的網頁。

例如：我知道畫面的某個地方有按鈕(前端)，但按下按鈕會發生什麼事情，就是交由(後端)去處理。

所以我們可以畫出下面的這張圖，
通常來說，一個功能設計分得夠乾淨的程式，
再依照我的取名習慣，我會將他分為 UI.py 與 controller.py 兩個部分。

• UI.py
  • 代表的是介面，也可以寫成單獨執行，我們就只會看到使用者介面，而沒辦法進行任何的邏輯判斷操作 (Day 2 提到過的，關於要不要下「-x」這個 flag 影響到的事情。)
• controller.py
  • 代表的是邏輯，通常單獨執行也不知道你要控制的是啥，所以一定會搭配 UI 一起執行。

網路上有很多程式會把這兩個混在一起，組成一支很大的「.py」，
我們都可以用這個概念去理解，
而混在一起變成一隻並不代表不好，這只是一個「架構設計」的問題，
也許人家的程式很小，特別寫成兩份 「.py」 反而還嫌囉嗦呢!

Qt desinger 的功能

Qt desinger 的功能就是幫助我們設計出好看的 UI.py，
畢竟牽扯到「視覺設計」，如果這都還要靠寫 code 直接刻出來… (太硬了啦!)

而且 Qt desinger 也很適合設計師使用，由設計師設計出精美的畫面後，
再經由指令自動轉換成 UI.py，最後我們就可能有相對美麗的介面囉!

轉換的程式碼，我也一併整理過來

我們儲存的 Qt desinger 檔案，副檔名是 .ui
經由下面的轉換，可以自動轉換成 .py 的程式碼

pyuic5 -x test.ui -o UI.py

(通常已經有設計好 controller.py 的程式，我們不會特別下「-x」，不讓他可以單獨執行)

• -x: 輸出為可單獨執行的檔案 (有 main 的部分)，若無會只有單純封裝好的 UI class
• -o: 輸出 .py 檔案

概念圖示如下：

撰寫更巨大的系統程式

基於 UI.py, controller.py 兩個概念，我們可以就開始無限的擴大我們的程式了!
像我們可以在 UI.py 新增按鍵或文字，並同時在 controller.py 撰寫如何控制這些東西，
甚至是「按鍵與文字」如何互動，都可以撰寫在 controller.py 裡面，
讓我們可以經由後端的邏輯，完全控制介面的變化。

因此，有了這個觀念，相信接下來各路程式好手們，
我們就可以逐漸開發屬於自己的超大型視窗程式了。

圖示：

小結

今天我們知道非常重要的程式開發邏輯，
往後我們會不斷地提到，現在是在設計「UI」，還是在設計「邏輯」，
兩者雖然在開發時會併行，但絕不能混淆，
混淆的話之後學習一定會變得一團亂，就跟我之前初學 Qt 一樣…

網路太多文章都會把「設計UI」、「設計邏輯」混在一起講，
這並不是說他們有錯，因為本來「設計一個新的 UI」，很自然接下來就會「設計對應此 UI 的邏輯」，

但以我們要「學習」的角度來看這個「結果」，
「設計UI」、「設計邏輯」混在一起看就是一團亂，
所以我之前才會學得超級痛苦 Q__Q，

這個概念往後務必在心中養成拆乾淨的習慣，才會清楚現在的自己是在幹嘛。

⭐Python PyQt5 相關文章整理⭐：
⭐基礎知識與架構篇⭐：
1.	【PyQt5】Day 1 – 安裝 PyQt，建立自己的第一支 PyQt5 程式
2.	【PyQt5】Day 2 – 利用 Qt designer 建立第一支有自己介面的 PyQt5 程式
3.	【PyQt5】Day 4 – 重要的 Qt 程式邏輯觀念，務必先有此觀念後面才會懂自己在幹嘛
4.	【PyQt5】Day 5 – 開始來設計我們的 controller.py，改以「程式角度」來說明如何建立 PyQt 的系統
⭐基本元件應用篇⭐：
1.	【PyQt5】Day 6 – 我們的第一個 output 手段 – Qlabel
2.	【PyQt5】Day 7 – 我們的第一個 input 手段 – QPushButton
3.	【PyQt5】Day 8 – 我們的第二個 input 手段 – QLineEdit
4.	【PyQt5】Day 9 – 以 QLineEdit, QTextEdit, QPlainTextEdit 作為文字的輸入
6.	【PyQt5】Day 14 - 使用 QSlider 製作可拖曳的滑條
8.	【PyQt5】Day 19 - 使用 QProgressBar，製作進度條的功能
⭐介面系統控制篇⭐：
5.	【PyQt5】Day 10 – 以 QFileDialog 讀取系統的檔案、資料夾
7.	【PyQt5】Day 18 / Project 使用 QTimer，自製碼表(計時器) PyQt5 stopwatch DIY
1.	【PyQt5】Day 20 - PyQt 最重要的 QThread 概念 / 為什麼 windows, mac, ubuntu (linux) 程式會「沒有回應」?
2.	【PyQt5】Day 21 – 透過 PyQt 實現滑鼠監聽總整理，完全掌握滑鼠控制 (listen mouse)
3.	【PyQt5】Day 22 – PyQt 視窗的個性化/屬性控制 setWindowFlags，禁止放大縮小、永遠顯示於最上層/最下層
4.	【PyQt5】Day 23 – 使用系統內建的調色盤 QColorDialog，來替我們選擇顏色 QColor (Color Picker)
5.	【PyQt5】Day 24 / Project 偵測滑鼠目前指示顏色的小工具 (滴管工具), 利用 QCursor 偵測滑鼠, QApplication 取得截圖
⭐影像處理篇⭐：
1.	【PyQt5】Day 11 – 以 Qlabel 在 PyQt 中顯示圖片 (基於 QImage 使用 OpenCV)
2.	【PyQt5】Day 12 – 建立一個可以縮放圖片大小的顯示器 (基於 QImage 使用 OpenCV)
3.	【PyQt5】Day 13 – 使用 QVBoxLayout, QscrollArea 製作出捲軸，以高解析度檢視圖片 (基於 QImage 使用 OpenCV)
4.	【PyQt5】Day 15 / Project 與檔案功能整合，製作出可讀取圖片並可縮放的 UI 介面 (使用 PyQt + OpenCV)
5.	【PyQt5】Day 16 - 在 PyQt5 中取得圖片座標 (滑鼠位置) mousePressEvent，觀察圖片在 Qt 中產生的方式，對原圖進行座標換算處理
6.	【PyQt5】Day 17 / Project 製作標註 roi 工具, 開始導入 OpenCV 作為繪圖引擎, 在圖上畫點並顯示座標
⭐project 篇⭐：
1.	【PyQt5】Day 25 / Project 自己做一個影片播放器 DIY video player (結合 PyQt + OpenCV)
2.	【PyQt5】Day 26 / Project 替我們影片播放器增加一個顯示進度的滑條 video player add slider (與昨日 bottleneck 處理細節)
3.	【PyQt5】Day 27 / Project 製作影片 ROI 標註工具 (PyQt 結合 OpenCV 在圖上畫點畫線)
4.	【PyQt5】Day 28 / final project – 1 來搞一個自己的 photoshop 吧！UI 篇 + 純程式架構篇 (結合 PyQt + OpenCV)
5.	【PyQt5】Day 29 / final project – 2 來搞一個自己的 photoshop 吧！後段程式細節篇 (結合 PyQt + OpenCV)
6.	【PyQt5】Day 30 / final project – 3 來搞一個自己的 photoshop 吧！把每個方法封裝起來製作出還原功能吧！ (結合 PyQt + OpenCV)
⭐打包程式篇⭐：
1.	【PyQt5】Day 3 – 用 pyinstaller 將 python 程式打包，把每天的成果分享給你的親朋好友
⭐【喜歡我的文章嗎? 歡迎幫我按讚~ 讓基金會請創作者喝一杯咖啡! 】 如果喜歡我的文章，請幫我在下方【按五下Like】 (Google, Facebook 免註冊)，會由 「LikeCoin」 贊助作者鼓勵繼續創作，讀者們「只需幫忙按讚，完全不用出錢」哦!