Python教學

Python PyQt5 QPushButton 按鈕用法與範例

本篇 ShengYu 介紹 Python PyQt5 QPushButton 按鈕用法與範例，Python GUI 程式設計最基本的就是建立按鈕與顯示按鈕以及處理按鈕事件，接下來就來學習怎麼用 PyQt5 建立 QPushButton 吧！

以下的 Python PyQt5 QPushButton 用法與範例將分為這幾部分，

  • PyQt5 建立按鈕 QPushButton
  • PyQt5 觸發按鈕事件來修改按鈕文字
  • PyQt5 改變按鈕顏色
  • PyQt5 改變按鈕大小
  • PyQt5 多個按鈕綁定同一個按鈕事件
  • PyQt5 QPushButton 搭配 lambda 運算式寫法

PyQt5 建立按鈕 QPushButton

PyQt5 QPushButton 的用法如下，一開始先用 QPushButton 建立一個按鈕，給這個按鈕一個顯示的文字 button，再用一個變數 mybutton 來儲存回傳的 QPushButton，先用 move() 移到想要顯示的座標位置，這樣的手動排版比較土炮一點，之後的範例會介紹怎麼用 QGridLayout 來進行 UI 排版，

python-pyqt-qpushbutton.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#!/usr/bin/env python3
# -*- coding: utf-8 -*-
import sys
from PyQt5.QtWidgets import (QApplication, QWidget, QPushButton)

class MyWidget(QWidget):
    def __init__(self):
        super().__init__()
        self.initUI()

    def initUI(self):
        self.setWindowTitle('my window')
        self.setGeometry(50, 50, 200, 150)

        self.mybutton = QPushButton('button', self)
        self.mybutton.move(60, 50)

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

結果圖如下，

PyQt5 觸發按鈕事件來修改按鈕文字

這邊要示範 PyQt5 觸發 QPushButton 按鈕事件來修改按鈕文字，新增一個函式為 onButtonClick，並用 mybutton.clicked.connect() 設定 slot 為 onButtonClick，而事件發生時就會呼叫到 onButtonClick 以便處理按下該按鈕時要處理的邏輯，

python-pyqt-qpushbutton2.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
#!/usr/bin/env python3
# -*- coding: utf-8 -*-
import sys
from PyQt5.QtWidgets import (QApplication, QWidget, QPushButton)

class MyWidget(QWidget):
    def __init__(self):
        super().__init__()
        self.initUI()

    def initUI(self):
        self.setWindowTitle('my window')
        self.setGeometry(50, 50, 200, 150)

        self.mybutton = QPushButton('button', self)
        self.mybutton.move(60, 50)
        self.mybutton.clicked.connect(self.onButtonClick)

    def onButtonClick(self):
        self.mybutton.setText('hello world')

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

點擊 button 後的結果圖如下，

PyQt5 改變按鈕顏色

PyQt5 改變按鈕顏色的方法如下，改變按鈕的 StyleSheet 即可，這邊示範兩個按鈕，button 1 原本背景顏色是黃色，按下按鈕後背景顏色會改變成紅色，而 button 2 原本背景顏色是綠色，按下按鈕後背景顏色會改變成橘色，

python-pyqt-qpushbutton3.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
#!/usr/bin/env python3
# -*- coding: utf-8 -*-
import sys
from PyQt5.QtWidgets import (QApplication, QWidget, QGridLayout, QPushButton)

class MyWidget(QWidget):
    def __init__(self):
        super().__init__()
        self.initUI()

    def initUI(self):
        self.setWindowTitle('my window')
        self.setGeometry(50, 50, 200, 150)

        layout = QGridLayout()
        self.setLayout(layout)

        self.mybutton1 = QPushButton('button 1', self)
        self.mybutton1.clicked.connect(self.onButton1Click)
        self.mybutton1.setStyleSheet("background-color: yellow")
        layout.addWidget(self.mybutton1, 0, 0)

        self.mybutton2 = QPushButton('button 2', self)
        self.mybutton2.clicked.connect(self.onButton2Click)
        self.mybutton2.setStyleSheet("background-color: green")
        layout.addWidget(self.mybutton2, 1, 0)

    def onButton1Click(self):
        self.mybutton1.setStyleSheet("background-color: red")
        #self.mybutton1.setStyleSheet("background-color: #ff0000");
        #self.mybutton1.setStyleSheet("background-color: rgb(255,0,0)");
        self.mybutton1.setText('red button')

    def onButton2Click(self):
        self.mybutton2.setStyleSheet("background-color: orange")
        self.mybutton2.setText('orange button')

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

這邊就使用 QGridLayout 來進行 UI 排版就不使用 move 了，QGridLayout.addWidget() 的 3 種函式參數介紹如下，

1
2
3
QGridLayout.addWidget(QWidget)
QGridLayout.addWidget(QWidget, int row, int column, Qt.Alignment alignment=0)
QGridLayout.addWidget(QWidget, int row, int column, int rowSpan, int columnSpan, Qt.Alignment alignment=0)

把 mybutton1 放到 (0,0) 的位置，把 mybutton2 放到 (1,1) 的位置，

點擊 button 2 後的結果圖如下，

PyQt5 改變按鈕大小

這邊示範 PyQt5 改變按鈕大小的用法，修改按鈕的 Geometry 即可，setGeometry() 的第 3 個引數為按鈕的寬度，第 4 個引數為按鈕的高度，

python-pyqt-qpushbutton4.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
#!/usr/bin/env python3
# -*- coding: utf-8 -*-
import sys
from PyQt5.QtWidgets import (QApplication, QWidget, QPushButton)

class MyWidget(QWidget):
    def __init__(self):
        super().__init__()
        self.initUI()

    def initUI(self):
        self.setWindowTitle('my window')
        self.setGeometry(50, 50, 200, 150)

        self.mybutton1 = QPushButton('button 1', self)
        self.mybutton1.clicked.connect(self.onButton1Click)
        self.mybutton1.move(60, 10)

        self.mybutton2 = QPushButton('button 2', self)
        self.mybutton2.clicked.connect(self.onButton2Click)
        self.mybutton2.move(60, 50)

    def onButton1Click(self):
        self.mybutton1.setGeometry(60, 10, 100, 40)

    def onButton2Click(self):
        self.mybutton2.setGeometry(60, 50, 100, 60)

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

點擊 button 1 後的結果圖如下，

PyQt5 多個按鈕綁定同一個按鈕事件

這邊示範 PyQt5 多個按鈕綁定同一個按鈕事件，先建立完四個按鈕與綁定到 onButtonClick() 同一個函式處理事件，同時這四個按鈕分別用 setObjectName() 設定各自的物件名稱，之後就可以在 onButtonClick() 用 self.sender().objectName() 來判斷是哪一個按鈕，或者也可以用另外一種方式是用 self.sender() 直接跟該按鈕變數比對是否相同，範例如下，

python-pyqt-qpushbutton5.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
#!/usr/bin/env python3
# -*- coding: utf-8 -*-
import sys
from PyQt5.QtWidgets import (QApplication, QWidget, QVBoxLayout, QPushButton)

class MyWidget(QWidget):
    def __init__(self):
        super().__init__()
        self.initUI()

    def initUI(self):
        self.setWindowTitle('my window')
        self.setGeometry(50, 50, 200, 150)

        layout = QVBoxLayout()
        self.setLayout(layout)

        self.mybutton1 = QPushButton('button 1', self)
        self.mybutton1.setObjectName('btn_1')
        self.mybutton1.clicked.connect(self.onButtonClick)
        layout.addWidget(self.mybutton1)

        self.mybutton2 = QPushButton('button 2', self)
        self.mybutton2.setObjectName('btn_2')
        self.mybutton2.clicked.connect(self.onButtonClick)
        layout.addWidget(self.mybutton2)

        self.mybutton3 = QPushButton('button 3', self)
        self.mybutton3.setObjectName('btn_3')
        self.mybutton3.clicked.connect(self.onButtonClick)
        layout.addWidget(self.mybutton3)

        self.mybutton4 = QPushButton('button 4', self)
        self.mybutton4.setObjectName('btn_4')
        self.mybutton4.clicked.connect(self.onButtonClick)
        layout.addWidget(self.mybutton4)

    def onButtonClick(self):
        sender = self.sender()
        print('objectName = ' + sender.objectName())
        if sender == self.mybutton1:
            print('button 1 click')
        elif sender == self.mybutton2:
            print('button 2 click')
        elif sender == self.mybutton3:
            print('button 3 click')
        elif sender == self.mybutton4:
            print('button 4 click')
        else:
            print('? click')

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

結果圖如下，按下按鈕同時觀察訊息輸出以便了解程式邏輯，

分別按下 mybutton1 與 mybutton3 的訊息輸出如下，

1
2
3
4
objectName = btn_1
button 1 click
objectName = btn_3
button 3 click

PyQt5 QPushButton 搭配 lambda 運算式寫法

這邊介紹一下 PyQt5 QPushButton 搭配 lambda 運算式寫法，在某些時候事件處理函式裡僅僅只是一行程式碼時，就可以使用 lamdba 的寫法，這邊稍微簡單介紹一下，根據前述章節的觸發按鈕事件修改按鈕文字的例子來說，部份程式碼如下，

1
2
3
4
5
6
7
8
9
10
def initUI(self):
    self.setWindowTitle('my window')
    self.setGeometry(50, 50, 200, 150)

    self.mybutton = QPushButton('button', self)
    self.mybutton.move(60, 50)
    self.mybutton.clicked.connect(self.onButtonClick)

def onButtonClick(self):
    self.mybutton.setText('hello world')

如果我們改成 lambda 的寫法的話，就可以移除 onButtonClick 函式，改完後的完整範例如下，將 self.mybutton.setText('hello world') 操作寫在 self.mybutton.clicked.connect() 裡的 lambda 運算式裡，詳細的 Python lambda 用法可以參考這篇，

python-pyqt-qpushbutton6.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
#!/usr/bin/env python3
# -*- coding: utf-8 -*-
import sys
from PyQt5.QtWidgets import (QApplication, QWidget, QPushButton)


class MyWidget(QWidget):
    def __init__(self):
        super().__init__()
        self.initUI()

    def initUI(self):
        self.setWindowTitle('my window')
        self.setGeometry(50, 50, 200, 150)

        self.mybutton = QPushButton('button', self)
        self.mybutton.move(60, 50)
        # self.mybutton.clicked.connect(self.onButtonClick)
        self.mybutton.clicked.connect(
            lambda: self.mybutton.setText('hello world')
            )

    # def onButtonClick(self):
    #    self.mybutton.setText('hello world')

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

當按鈕事件處理函式裡只有短短一行程式碼時，就是個運用 lamdba 好時機的例子，改用 lamba 不一定比較好，還有程式的擴充性與維護性需要自行衡量。

以上就是 Python PyQt5 QPushButton 按鈕的介紹，
如果你覺得我的文章寫得不錯、對你有幫助的話記得 Facebook 按讚支持一下！
下一篇將會介紹 PyQt5 QLineEdit 文字輸入框用法與範例

其它相關文章推薦
Python 新手入門教學懶人包
Python PyQt5 新手入門教學