[PyQt5] 基本教學(2) QLabel, QLineEdit, QPushButton

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_())

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.setFont(QtGui.QFont('Arial', 50))

這行程式是用於設定字體、大小:

self.ui.label.setGeometry(QtCore.QRect(10, 10, 600, 200))

self.ui.label.setGeometry(QtCore.QRect(10, 10, 600, 200))

這行程式的意思是： QRect(x, y, 水平長度, 縱向長度)

記得，(x, y) 座標原點是位於左上角哦！

self.ui.label.setText('Hello World!')

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"))

# -*- 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_())

# -*- 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 的顯示文字。

效果大致上如下：

如何？是不是按照我們設定的流程走呢？

那麼，今天的心得筆記就紀錄到這裡。

2 thoughts on “[PyQt5] 基本教學(2) QLabel, QLineEdit, QPushButton”

WilliamXiao 2021-03-14 at 05:22


感谢你的教学！
另外我想知道自建py文件后撰写逻辑程序的部分应该从哪里系统地学习呢，我在初步的时候会clone你的代码照猫画虎hhh。我想自己写逻辑的part应该在哪里学习呢？
谢谢
1. ccs96307
  
  ccs96307 2021-03-14 at 05:38
  
  
  很高興能夠替你提供幫助。
  關於邏輯部分的程式，我想每個專案、每個開發者想要的功能都不盡相同，很難說有什麼比較完整的教學。
  這方面或許可以參考官方文件、或是網路上前輩們所提供的專案原始碼。

[PyQt5] 基本教學(2) QLabel, QLineEdit, QPushButton

QLabel

QLineEdit

QPushButton

Read More

2 thoughts on “[PyQt5] 基本教學(2) QLabel, QLineEdit, QPushButton”

Leave a Reply取消回覆

[PyQt5] 基本教學(2) QLabel, QLineEdit, QPushButton

QLabel

QLineEdit

QPushButton

Read More

分享此文：

2 thoughts on “[PyQt5] 基本教學(2) QLabel, QLineEdit, QPushButton”

Leave a Reply取消回覆