Last Updated on 2021-04-08 by Clay
今天,我想要將我嘗試 PyQt5 裡頭 Label、LineEdit、PushButton 的經驗記錄下來。順帶一題,目前維止都還是倚靠 Qt Designer 來拉出界面。
也許總有一天必須自己撰寫界面原始碼(畢竟 Qt Designer 裡頭的元件其實並不完整,當然也或許只是我沒找到),希望能持續堅持學習到那天!
一如既往,如果你想參閱官方指南,也許你可以參考: https://www.riverbankcomputing.com/static/Docs/PyQt5/index.html?highlight=qicon
QLabel
Label 可說是我們最常使用的元件之一,上次的心得筆記也是使用這個元件來印出『Hello World!』。
這次我們更進一步,使用程式碼設定大小、位置、文字 ...... 等等的屬性。
from PyQt5 import QtWidgets, QtGui, QtCore from UI.Label import Ui_MainWindow import sys class MainWindow(QtWidgets.QMainWindow): def __init__(self): super(MainWindow, self).__init__() self.ui = Ui_MainWindow() self.ui.setupUi(self) self.ui.label.setFont(QtGui.QFont('Arial', 50)) self.ui.label.setGeometry(QtCore.QRect(10, 10, 600, 200)) self.ui.label.setText('Hello World!') if __name__ == '__main__': app = QtWidgets.QApplication([]) window = MainWindow() window.show() sys.exit(app.exec_())
Output:
self.ui.label.setFont(QtGui.QFont('Arial', 50))
這行程式是用於設定字體、大小:
self.ui.label.setGeometry(QtCore.QRect(10, 10, 600, 200))
這行程式的意思是: QRect(x, y, 水平長度, 縱向長度)
記得,(x, y) 座標原點是位於左上角哦!
self.ui.label.setText('Hello World!')
這行程式就很明顯了:這是設定我們要印出的文字:
QLineEdit
這裡介紹一下,LineEdit 是一種『可供使用者輸入文字的欄位』。最常見的想必就是網站上輸入帳號密碼的那種欄位吧,我們顯示出來看看。
沒錯!就是中間顯示著『Welcome!』的那個欄位,那就是 LineEdit 這種元件的模樣。
基本上,我們可以調用程式針對其屬性做出各式各樣的調整,比如說遮蔽顯示文字(可用於輸入密碼)、限制使用者可輸入的文字上限、輸入事先設定的預設文字、提整文字顏色 ...... 等等,其實我們都可以隨心所欲地做到。
大家不妨試試看還有哪些功能可以使用,想必一定會有收穫的。
接下來介紹今天的最後一項元件,也會順便完成一個簡單的範例程式。
QPushButton
PushButton 其實就是我們最常見的『按鈕』。如同剛才的圖例所示:
顯示著 Display 的那個按鈕就是我們的 PushButton,在這裡紀錄一下我如何完成這個界面。
沒錯!就是直接使用 Designer 來拉出這三個元件!
由左而右分別是: Label, LineEdit, PushButton 這三種元件。
我們看看生成的檔案(已被 PyUIC 轉檔):
# -*- coding: utf-8 -*- # Form implementation generated from reading ui file 'LineEdit.ui' # # Created by: PyQt5 UI code generator 5.11.3 # # WARNING! All changes made in this file will be lost! from PyQt5 import QtCore, QtGui, QtWidgets class Ui_MainWindow(object): def setupUi(self, MainWindow): MainWindow.setObjectName("MainWindow") MainWindow.resize(800, 600) self.centralwidget = QtWidgets.QWidget(MainWindow) self.centralwidget.setObjectName("centralwidget") self.lineEdit = QtWidgets.QLineEdit(self.centralwidget) self.lineEdit.setGeometry(QtCore.QRect(150, 100, 191, 51)) self.lineEdit.setObjectName("lineEdit") self.label = QtWidgets.QLabel(self.centralwidget) self.label.setGeometry(QtCore.QRect(0, 100, 131, 51)) self.label.setObjectName("label") self.pushButton = QtWidgets.QPushButton(self.centralwidget) self.pushButton.setGeometry(QtCore.QRect(390, 100, 131, 51)) self.pushButton.setObjectName("pushButton") MainWindow.setCentralWidget(self.centralwidget) self.menubar = QtWidgets.QMenuBar(MainWindow) self.menubar.setGeometry(QtCore.QRect(0, 0, 800, 25)) self.menubar.setObjectName("menubar") MainWindow.setMenuBar(self.menubar) self.statusbar = QtWidgets.QStatusBar(MainWindow) self.statusbar.setObjectName("statusbar") MainWindow.setStatusBar(self.statusbar) self.retranslateUi(MainWindow) QtCore.QMetaObject.connectSlotsByName(MainWindow) def retranslateUi(self, MainWindow): _translate = QtCore.QCoreApplication.translate MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow")) self.label.setText(_translate("MainWindow", "TextLabel")) self.pushButton.setText(_translate("MainWindow", "PushButton"))
若是我們仔細看產生的檔案,會發現 Label, LineEdit, PushButton 已經被定義了。
至此,簡單的界面已經被完成了,剩下的就是我們撰寫程式邏輯的部份:
# -*- coding: utf-8 -*- from PyQt5 import QtWidgets, QtGui, QtCore from LineEdit import Ui_MainWindow import sys class MainWindow(QtWidgets.QMainWindow): def __init__(self): super(MainWindow, self).__init__() self.ui = Ui_MainWindow() self.ui.setupUi(self) self.ui.label.setFont(QtGui.QFont('Arial', 10)) self.ui.label.setText('Nothing') self.ui.lineEdit.setText('Welcome!') self.ui.pushButton.setText('Display') self.ui.pushButton.clicked.connect(self.buttonClicked) def buttonClicked(self): text = self.ui.lineEdit.text() self.ui.label.setText(text) self.ui.lineEdit.clear() if __name__ == '__main__': app = QtWidgets.QApplication([]) window = MainWindow() window.show() sys.exit(app.exec_())
我們可以看到,我事先將 Label, LineEdit, PushButton 都設定好了顯示的文字。
然後最重要的是,我寫了一個按鈕按下去的事件,使用 clicked.connect('你想要觸發的函式')
可以完成這個指令。
在 buttonClicked()
這個函式裡頭,我將 LineEdit 裡我們輸入的文字儲存起來,並讓 Label 印出它。
緊接著,我再刪除了 LineEdit 的顯示文字。
效果大致上如下:
如何?是不是按照我們設定的流程走呢?
那麼,今天的心得筆記就紀錄到這裡。
Read More
- [PyQt5] 基本教學(1) 安裝 PyQt5,印出 Hello World!
- [PyQt5] 基本教學(2) QLabel, QLineEdit, QPushButtom
- [PyQt5] 基本教學(3) QMainWindow, QIcon, QPixmap, QPalette
- [PyQt5] 基本教學(4) 菜單、工具欄
- [PyQt5] 基本教學(5) 進度條、滑動條、旋轉鈕
- [PyQt5] 基本教學(6) 下拉選單、BoxLayout
- [PyQt5] 基本教學(7) hide, show, 自動適應窗口大小
- [PyQt5] 基本教學(8) QTimer, QlcdNumber
- [PyQt5] 基本教學(9) QCaledar,使用 Python 輕鬆創造日曆元件
- [PyQt5] 基本教學(10) 使用鍵盤輸入指令、判斷滑鼠點擊位置
- [PyQt5] 基本教學(11) 使用 QColorDialog 調色盤來進行顏色的設定
感谢你的教学!
另外我想知道自建py文件后撰写逻辑程序的部分应该从哪里系统地学习呢,我在初步的时候会clone你的代码照猫画虎hhh。我想自己写逻辑的part应该在哪里学习呢?
谢谢
很高興能夠替你提供幫助。
關於邏輯部分的程式,我想每個專案、每個開發者想要的功能都不盡相同,很難說有什麼比較完整的教學。
這方面或許可以參考官方文件、或是網路上前輩們所提供的專案原始碼。