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

(沒有，今天不寫程式，但要講重要觀念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，

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

★ 本文也同步發於我的個人網站(會有內容目錄與顯示各個小節，閱讀起來更流暢)：【PyQt5】Day 4 – 重要的 Qt 程式邏輯觀念，務必先有此觀念後面才會懂自己在幹嘛