我們接下來的討論,會基於讀者已經先讀過我 day5 文章 的架構下去進行程式設計
如果還不清楚我程式設計的邏輯 (UI.py、controller.py、start.py 分別在幹麻)
建議先閱讀 day5 文章後再來閱讀此文。
https://www.wongwonggoods.com/python/pyqt5-5/
https://github.com/howarder3/ironman2021_PyQt5_photoshop/tree/main/day06_output_text
一樣先打開我們的 Qt designer,
這篇我們要介紹的是 Qlabel,
作為我們第一個「output」用的功能。
我們在 Display Widgets 中找到 Label,
拖曳至視窗自己喜歡的地方,就完成今天的設計囉!
一樣的編譯指令,我們加上 -x (也可不加),
我們就可以先檢視看看轉換後的視窗是不是跟我們想像的一樣。
pyuic5 -x day6.ui -o UI.py
一樣,這程式只有介面 (視覺上的呈現),沒有任何互動功能
python UI.py
看起來就是符合我們的想像了,這樣就沒問題了。
接下來,我們必須先研究一下我們剛剛的程式,
把我們剛剛程式中的「物件名稱」找出來。
名稱也可以自己在設計 Qt desginer 時設定,這邊作為快速示範就先不細講這一個部份。
如果讀者使用的是預設的名稱,應該會在剛轉換完成的 UI.py 中 找到以下這段,
我們發現我們剛剛的 label 名稱為 label,
當然,程式寫久的都知道這絕對不是一個好名稱。
我們晚點再來討論這個問題。
還記得我們在 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!'),
意思是:
就是這行的意思囉!
有沒有發現,「.label」這個名稱,很容易讓人誤會以為是內建的某個功能?
實際上他是我們自己新增的物件...
真的等等該換個名字給他,以免寫越多越混搞不清楚誰是誰。
如果照我們 day5 的程式架構,現在我們可以執行
python start.py
就能看到結果了!
哎呀!我們發現我們顯示的文字被切掉了一部份,
看來我們還需要回去調整一下視窗大小。
這邊我們再回來看我們的 Qt designer,
我們開始來修改剛剛我們想改的「物件名稱、視窗大小...」之類的東東。
養成好的命名習慣,等到程式物件越來越多的時候,
才會因為每個物件名稱都叫作 Label 搞不清楚誰是誰
稍微改了一下上述內容,以下是我的修改結果,讀者可以再自己嘗試。
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!')
★ 本文也同步發於我的個人網站(會有內容目錄與顯示各個小節,閱讀起來更流暢):【PyQt5】Day 6 – 我們的第一個 output 手段 – Qlabel