➣ Reading Time: 9 minutes

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

前言

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

此篇文章的範例程式碼 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」設定文字的方式,相關用法需要去查文件。
  • 然後設定文字為我們要的 ‘Happy World!’。

就是這行的意思囉!

有沒有發現,「.label」這個名稱,很容易讓人誤會以為是內建的某個功能?
實際上他是我們自己新增的物件…
真的等等該換個名字給他,以免寫越多越混搞不清楚誰是誰。

執行結果

如果照我們 day5 的程式架構,現在我們可以執行

python start.py

就能看到結果了!

哎呀!我們發現我們顯示的文字被切掉了一部份,
看來我們還需要回去調整一下視窗大小。

修改顯示視窗、文字大小、物件名稱…

這邊我們再回來看我們的 Qt designer,
我們開始來修改剛剛我們想改的「物件名稱、視窗大小…」之類的東東。

  • 我們可以直接拖曳視窗,改變視窗的大小 (右邊可以看現在視窗的解析度)
  • 右上角,我們可以看到現在所有視窗內的物件,
    我們找到 class QLabel 的這個物件,並且修改 Object 中顯示的名稱

養成好的命名習慣,等到程式物件越來越多的時候,
才會因為每個物件名稱都叫作 Label 搞不清楚誰是誰

  • 而下方我們同樣也可以修改文字的字體,與字體對應的大小
    (字體的部份需要注意可能會有跨作業系統不支援字體的問題,
    例如 windows 與 mac 不共通的字體)

稍微改了一下上述內容,以下是我的修改結果,讀者可以再自己嘗試。

一樣,轉換成 UI.py,並修改 controller.py 對應的物件名稱,完成最終結果

  • controller.py
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.show_output.setText('Happy World!')
  • 注意:我們同步修改了位於 setup_control() 中的物件名稱
    將 label 改為 show_output,使我們的物件名稱更清楚。

最終結果

⭐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 作為文字的輸入
5.【PyQt5】Day 10 – 以 QFileDialog 讀取系統的檔案、資料夾
⭐影像處理篇⭐:
1.【PyQt5】Day 11 – 以 Qlabel 在 PyQt 中顯示圖片 (基於 QImage 使用 OpenCV)
2.【PyQt5】Day 12 – 建立一個可以縮放圖片大小的顯示器 (基於 QImage 使用 OpenCV)
3.【PyQt5】Day 13 – 使用 QVBoxLayout, QscrollArea 製作出捲軸,以高解析度檢視圖片 (基於 QImage 使用 OpenCV)
⭐打包程式篇⭐:
1.【PyQt5】Day 3 – 用 pyinstaller 將 python 程式打包,把每天的成果分享給你的親朋好友
⭐【喜歡我的文章嗎? 歡迎幫我按讚~ 讓基金會請創作者喝一杯咖啡!
如果喜歡我的文章,請幫我在下方【按五下Like】 (Google, Facebook 免註冊),會由 「LikeCoin」 贊助作者鼓勵繼續創作,讀者們「只需幫忙按讚,完全不用出錢」哦!

likecoin-steps