QPushButton 按钮

QPushButton 是 PyQt5 里的按钮元件，这篇教学会介绍如何在 PyQt5 视窗里加入 QPushButton 按钮，并进行一些基本的样式设定，以及设定点击按钮后的行为事件。

快速导览：

• 加入 QPushButton 按钮
• QPushButton 位置设定
• QPushButton 样式设定
• 停用 QPushButton
• QPushButton 点击事件
• 改用 class 的写法

• PyQt6 版本参考：PyQt6 教学 - QPushButton 按钮
• 因为 Google Colab 不支援 PyQt5，所以请使用本机环境 ( 参考：使用 Python 虚拟环境 ) 或使用 Anaconda Jupyter 进行实作 ( 参考：使用 Anaconda )。

加入 QPushButton 按钮

建立 PyQt5 视窗对象后，透过 QtWidgets.QPushButton(widget) 方法，就能在指定的元件中建立按钮，下方的程序码执行后，会加入一个 QPushButton 按钮 ，并使用 setText() 方法加入文字。

from PyQt5 import QtWidgets
import sys
app = QtWidgets.QApplication(sys.argv)

Form = QtWidgets.QWidget()
Form.setWindowTitle('oxxo.studio')
Form.resize(300, 200)

btn = QtWidgets.QPushButton(Form)   # 在 Form 中加入一個 QPushButton
btn.setText('我是按鈕')               # 按鈕文字

Form.show()
sys.exit(app.exec_())

QPushButton 位置设定

透过下列 QPushButton 方法，可以将 QPushButton 元件定位到指定的位置：

下方的程序码执行后会放入两个 QPushButton，一个使用 move() 定位在 (50,30) 位置，另外一个使用 setGeometry() 方法定位在 (50,60) 的位置并设定大小为 100x50。

from PyQt5 import QtWidgets
import sys
app = QtWidgets.QApplication(sys.argv)

Form = QtWidgets.QWidget()
Form.setWindowTitle('oxxo.studio')
Form.resize(300, 200)

btn1 = QtWidgets.QPushButton(Form)
btn1.setText('按鈕 1')
btn1.move(50,30)                 # 移動到 (50,30)

btn2 = QtWidgets.QPushButton(Form)
btn2.setText('按鈕 2')
btn2.setGeometry(50,60,100,50)   # 移動到 (50,60)，大小 100x50

Form.show()
sys.exit(app.exec_())

QPushButton 样式设定

如果会使用网页 CSS 语法，就能透过 setStyleSheet() 设定 QPushButton 样式，在设计样式上也较为弹性好用，下方的程序码执行后，会套用 CSS 样式语法，将 QPushButton 变成黄底红字黑色外框的样式 ( 不支援 CSS3 相关语法 )。

from PyQt5 import QtWidgets
import sys
app = QtWidgets.QApplication(sys.argv)

Form = QtWidgets.QWidget()
Form.setWindowTitle('oxxo.studio')
Form.resize(300, 200)

btn = QtWidgets.QPushButton(Form)
btn.setText('按鈕')
btn.setGeometry(50,50,100,50)
btn.setStyleSheet('''
    background:#ff0;
    color:#f00;
    font-size:20px;
    border:2px solid #000;
''')

Form.show()
sys.exit(app.exec_())

调整 setStyleSheet() 内容，也能做出类似网页按钮 hover 的样式效果，下方的程序码执行后，当鼠标移动到按钮上方，按钮就会变色。

from PyQt5 import QtWidgets
import sys
app = QtWidgets.QApplication(sys.argv)

Form = QtWidgets.QWidget()
Form.setWindowTitle('oxxo.studio')
Form.resize(300, 200)

btn = QtWidgets.QPushButton(Form)
btn.setText('按鈕')
btn.setGeometry(50,50,100,50)
btn.setStyleSheet('''
    QPushButton {
        font-size:20px;
        color: #f00;
        background: #ff0;
        border: 2px solid #000;
    }
    QPushButton:hover {
        color: #ff0;
        background: #f00;
    }
''')

Form.show()
sys.exit(app.exec_())

停用 QPushButton

使用 setDisabled() 方法可以“停用”或“启用”QPushButton，停用的 QPushButton 会以“半透明”的方式呈现。

from PyQt5 import QtWidgets
import sys
app = QtWidgets.QApplication(sys.argv)

Form = QtWidgets.QWidget()
Form.setWindowTitle('oxxo.studio')
Form.resize(300, 200)

btn = QtWidgets.QPushButton(Form)
btn.setText('按鈕')
btn.setGeometry(50,50,100,50)
btn.setDisabled(True)

Form.show()
sys.exit(app.exec_())

如果是使用 setStyleSheet() 方法设定样式，可以从 QPushButton:disabled 的位置设定停用按钮样式。

from PyQt5 import QtWidgets
import sys
app = QtWidgets.QApplication(sys.argv)

Form = QtWidgets.QWidget()
Form.setWindowTitle('oxxo.studio')
Form.resize(300, 200)

btn = QtWidgets.QPushButton(Form)
btn.setText('按鈕')
btn.setGeometry(50,50,100,50)
btn.setStyleSheet('''
    QPushButton {
        font-size:20px;
        color: #f00;
        background: #ff0;
        border: 2px solid #000;
    }
    QPushButton:disabled {
        color:#fff;
        background:#ccc;
        border: 2px solid #aaa;
    }
''')
btn.setDisabled(True)

Form.show()
sys.exit(app.exec_())

QPushButton 点击事件

使用 clicked.connect(fn) 方法可以设定 QPushButton 的点击事件，该方法表示“点击按钮时，会执行 fn 函数”，下方的程序码执行后，点击按钮会执行 show 函数，show 函数会不断地将变数 a 增加 1，再透过 QLabel 显示数字。

from PyQt5 import QtWidgets
import sys
app = QtWidgets.QApplication(sys.argv)

Form = QtWidgets.QWidget()
Form.setWindowTitle('oxxo.studio')
Form.resize(300, 200)

a = 0
def show():
    global a
    a = a + 1
    label.setText(str(a))       # 更新 QLabel 內容

label = QtWidgets.QLabel(Form)
label.setText('0')
label.setStyleSheet('font-size:20px;')
label.setGeometry(50,30,100,30)

btn = QtWidgets.QPushButton(Form)
btn.setText('增加數字')
btn.setGeometry(50,60,100,30)
btn.clicked.connect(show)       # 點擊時執行 show 函式

Form.show()
sys.exit(app.exec_())

如果要执行的函数带有“参数”，则可以使用 lambda 匿名函数处理，下方的程序码执行后，点击 A 按钮就会出现 A 文字，点击 B 按钮就会出现 B 文字。

from PyQt5 import QtWidgets, QtGui, QtCore
import sys
app = QtWidgets.QApplication(sys.argv)

Form = QtWidgets.QWidget()
Form.setWindowTitle('oxxo.studio')
Form.resize(300, 200)

def show(e):
    label.setText(e)

label = QtWidgets.QLabel(Form)
label.setText('A')
label.setStyleSheet('font-size:20px;')
label.setGeometry(50,30,100,30)

btn1 = QtWidgets.QPushButton(Form)
btn1.setText('A')
btn1.setGeometry(50,60,50,30)
btn1.clicked.connect(lambda:show('A'))  # 使用 lambda 函式

btn2 = QtWidgets.QPushButton(Form)
btn2.setText('B')
btn2.setGeometry(110,60,50,30)
btn2.clicked.connect(lambda:show('B'))  # 使用 lambda 函式

Form.show()
sys.exit(app.exec_())

改用 class 的写法

上方的程序码，亦可改用 class 的写法表示。

from PyQt5 import QtWidgets
import sys

class MyWidget(QtWidgets.QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle('oxxo.studio')
        self.resize(300, 200)
        self.ui()

    def ui(self):
        self.label = QtWidgets.QLabel(self)
        self.label.setText('A')
        self.label.setStyleSheet('font-size:20px;')
        self.label.setGeometry(50,30,100,30)

        self.btn2 = QtWidgets.QPushButton(self)
        self.btn2.setText('B')
        self.btn2.setGeometry(110,60,50,30)
        self.btn2.clicked.connect(lambda:self.showMsg('B'))  # 使用 lambda 函式

        self.btn1 = QtWidgets.QPushButton(self)
        self.btn1.setText('A')
        self.btn1.setGeometry(50,60,50,30)
        self.btn1.clicked.connect(lambda:self.showMsg('A'))  # 使用 lambda 函式

    def showMsg(self, e):
        self.label.setText(e)

if __name__ == '__main__':
    app = QtWidgets.QApplication(sys.argv)
    Form = MyWidget()
    Form.show()
    sys.exit(app.exec_())

意见反馈