內容目錄

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

前言

我們接下來的討論，會基於讀者已經先讀過我 day5 文章的架構下去進行程式設計
如果還不清楚我程式設計的邏輯 (UI.py、controller.py、start.py 分別在幹麻)
建議先閱讀 day5 文章後再來閱讀此文。

【PyQt5】Day 5 – 開始來設計我們的 controller.py，改以「程式角度」來說明如何建立 PyQt 的系統

此篇文章的範例程式碼 github

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

UI 設計部份 (UI.py)

Qt designer 部份

一樣先打開我們的 Qt designer，
這篇我們要介紹的是 Qlabel，
作為我們第一個「output」用的功能。

我們在 Display Widgets 中找到 Label，
拖曳至視窗自己喜歡的地方，就完成今天的設計囉！

轉換成 UI.py

一樣的編譯指令，我們加上 -x (也可不加)，
我們就可以先檢視看看轉換後的視窗是不是跟我們想像的一樣。

轉換 day6.ui -> UI.py

pyuic5 -x day6.ui -o UI.py

執行看看 UI.py 畫面是否如同我們想像

一樣，這程式只有介面 (視覺上的呈現)，沒有任何互動功能

看看我們製作出來的介面

python UI.py

看起來就是符合我們的想像了，這樣就沒問題了。

controller 設計部份 (controller.py)

接下來，我們必須先研究一下我們剛剛的程式，
把我們剛剛程式中的「物件名稱」找出來。

名稱也可以自己在設計 Qt desginer 時設定，這邊作為快速示範就先不細講這一個部份。

從 UI.py 中找出物件名稱

如果讀者使用的是預設的名稱，應該會在剛轉換完成的 UI.py 中找到以下這段，

我們發現我們剛剛的 label 名稱為 label，
當然，程式寫久的都知道這絕對不是一個好名稱。
我們晚點再來討論這個問題。

取得名稱後，去修改 controller.py

還記得我們在 day5 中的模板嗎？這邊我們直接複製過來使用並修改。

from PyQt5 import QtWidgets, QtGui, QtCore

from UI import Ui_MainWindow

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

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

我們在 setup_control() 中新增了這行，self.ui.label.setText(‘Happy World!’)，

意思是：

「self.ui」(我們的 ui 介面)，
「.label」裡面就是我們剛剛說的 label 這個物件名稱，
「.setText」設定文字的方式，相關用法需要去查文件。