QRadioButton 单选按钮

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

快速导览：

• 加入 QRadioButton 单选按钮
• QRadioButton 位置设定
• QRadioButton 状态设定
• QRadioButton 样式设定
• QRadioButton 点击事件
• 改用 class 的写法

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

加入 QRadioButton 单选按钮

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

注意，放在同样元件里的 QRadioButton 视为同一个群组，会套用“单选”的规则，例如下方程序码的两个 QRadioButton 都放在 Form 里，所以只能择一选择。

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

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

rb_a = QtWidgets.QRadioButton(Form)    # 單選按鈕 A
rb_a.setGeometry(30, 30, 100, 20)
rb_a.setText('A')

rb_b = QtWidgets.QRadioButton(Form)    # 單選按鈕 B
rb_b.setGeometry(30, 60, 100, 20)
rb_b.setText('B')

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

如果有“多组”QRadioButton，则可以使用 QtWidgets.QButtonGroup(widget) 方法建立按钮群组，然后将归类为同一组的 QRadioButton 加入同一个 QButtonGroup，就能分别进行单选的动作。

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

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

rb_a = QtWidgets.QRadioButton(Form)    # 單選按鈕 A
rb_a.setGeometry(30, 30, 100, 20)
rb_a.setText('A')

rb_b = QtWidgets.QRadioButton(Form)    # 單選按鈕 B
rb_b.setGeometry(30, 60, 100, 20)
rb_b.setText('B')

group1 = QtWidgets.QButtonGroup(Form)  # 按鈕群組
group1.addButton(rb_a)                 # 加入單選按鈕 A
group1.addButton(rb_b)                 # 加入單選按鈕 B

rb_c = QtWidgets.QRadioButton(Form)    # 單選按鈕 C
rb_c.setGeometry(150, 30, 100, 20)
rb_c.setText('C')

rb_d = QtWidgets.QRadioButton(Form)    # 單選按鈕 D
rb_d.setGeometry(150, 60, 100, 20)
rb_d.setText('D')

group2 = QtWidgets.QButtonGroup(Form)  # 按鈕群組
group2.addButton(rb_c)                 # 加入單選按鈕 C
group2.addButton(rb_d)                 # 加入單選按鈕 D

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

QRadioButton 位置设定

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

|方法|参数|说明| |--|--| |move()|x, y|设定 QRadioButton 在摆放的父元件中的 xy 座标，x 往右为正，y 往下为正，尺寸根据内容自动延伸。| |setGeometry()|x, y, w, h|设定 QRadioButton 在摆放的父元件中的 xy 座标和长宽尺寸，x 往右为正，y 往下为正，如果超过长宽尺寸，默认会被裁切无法显示。|

下方的程序码执行后会放入四个 QRadioButton，两个使用 move() 定位，另外两个使用 setGeometry() 方法定位。

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

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

rb_a = QtWidgets.QRadioButton(Form)  # 單選按鈕 A
rb_a.move(30, 30)
rb_a.setText('A')

rb_b = QtWidgets.QRadioButton(Form)  # 單選按鈕 C
rb_b.move(30, 60)
rb_b.setText('B')

rb_c = QtWidgets.QRadioButton(Form)  # 單選按鈕 D
rb_c.setGeometry(150, 30, 100, 20)
rb_c.setText('C')

rb_d = QtWidgets.QRadioButton(Form)  # 單選按鈕 E
rb_d.setGeometry(150, 60, 100, 20)
rb_d.setText('D')

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

QRadioButton 状态设定

透过下列几种方法，可以设定 QRadioButton 的状态：

下面的程序码执行后，QRadioButton B 会停用，QRadioButton C 会预先勾选。

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

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

rb_a = QtWidgets.QRadioButton(Form)
rb_a.setGeometry(30, 30, 100, 20)
rb_a.setText('A')

rb_b = QtWidgets.QRadioButton(Form)
rb_b.setGeometry(30, 60, 100, 20)
rb_b.setText('B')
rb_b.setDisabled(True)

rb_c = QtWidgets.QRadioButton(Form)
rb_c.setGeometry(30, 90, 100, 20)
rb_c.setText('C')
rb_c.setChecked(True)

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

QRadioButton 样式设定

如果会使用网页 CSS 语法，就能透过 setStyleSheet() 设定 QRadioButton 样式，在设计样式上也较为弹性好用，下方的程序码执行后，会套用 CSS 样式语法，将 QRadioButton 设定为蓝色字，当鼠标移到按钮上，就会触发 hover 的样式而变成红色字。

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

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

rb_a = QtWidgets.QRadioButton(Form)
rb_a.setGeometry(30, 30, 100, 20)
rb_a.setText('A')
# 設定按鈕 A 的樣式
rb_a.setStyleSheet('''
    QRadioButton {
        color: #00f;
    }
    QRadioButton:hover {
        color:#f00;
    }
''')

rb_b = QtWidgets.QRadioButton(Form)
rb_b.setGeometry(30, 60, 100, 20)
rb_b.setText('B')
# 設定按鈕 B 的樣式
rb_b.setStyleSheet('''
    QRadioButton {
        color: #00f;
    }
    QRadioButton:hover {
        color:#f00;
    }
''')

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

如果使用 setDisabled(True) 将 QRadioButton 设定为“停用”，也可透过 disabled 的样式表进行样式的设定，下方的程序码执行后，单选按钮 B 会变成浅灰色

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

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

rb_a = QtWidgets.QRadioButton(Form)
rb_a.setGeometry(30, 30, 100, 20)
rb_a.setText('A')
rb_a.setStyleSheet('''
    QRadioButton {
        color: #00f;
    }
    QRadioButton:hover {
        color:#f00;
    }
''')

rb_b = QtWidgets.QRadioButton(Form)
rb_b.setGeometry(30, 60, 100, 20)
rb_b.setText('B')
rb_b.setStyleSheet('''
    QRadioButton {
        color: #00f;
    }
    QRadioButton:hover {
        color:#f00;
    }
    QRadioButton:disabled {
        color:#ccc;
    }
''')
rb_b.setDisabled(True)   # 停用按鈕 B

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

QRadioButton 点击事件

如果要侦测勾选了哪个 QRadioButton，有两种常用的方法，第一种是透过 QButtonGroup() 将 QRadioButton 包装成同一个群组，使用 addButton() 添加按钮时，可设定第二个按钮的 ID 参数，设定后使用 buttonClicked.connect(fn) 方法，就能侦测是否勾选按钮，并能够过函数，执行 checkedId() 取得勾选按钮的 ID，下方的程序码执行后，会在勾选不同按钮时，透过 QLabel 显示对应的勾选按钮的 ID。

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

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

rb_a = QtWidgets.QRadioButton(Form)
rb_a.setGeometry(30, 60, 100, 20)
rb_a.setText('A')

rb_b = QtWidgets.QRadioButton(Form)
rb_b.setGeometry(150, 60, 100, 20)
rb_b.setText('B')

def show():
    label.setText(str(group.checkedId()))   # 設定 label 文字為按鈕群組中勾選按鈕的 ID

group = QtWidgets.QButtonGroup(Form)
group.addButton(rb_a, 1)               # 添加 QRadioButton A，ID 設定為 1
group.addButton(rb_b, 2)               # 添加 QRadioButton B，ID 設定為 2
group.buttonClicked.connect(show)      # 綁定點擊事件

label = QtWidgets.QLabel(Form)
label.setGeometry(30, 30, 100, 20)

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

第二种方法则是使用 toggled() 的方法，将函数与各个按钮绑定，接着就能透过 text() 取得按钮文字，透过 isChecked() 取得按钮勾选状态。

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

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

def show(rb):
    label.setText(rb.text() + ':' + str(rb.isChecked()))  # 取得按鈕狀態

rb_a = QtWidgets.QRadioButton(Form)
rb_a.setGeometry(30, 60, 100, 20)
rb_a.setText('A')
rb_a.toggled.connect(lambda: show(rb_a))  # 綁定函式

rb_b = QtWidgets.QRadioButton(Form)
rb_b.setGeometry(150, 60, 100, 20)
rb_b.setText('B')
rb_b.toggled.connect(lambda: show(rb_b))  # 綁定函式

group = QtWidgets.QButtonGroup(Form)
group.addButton(rb_a)
group.addButton(rb_b)

label = QtWidgets.QLabel(Form)
label.setGeometry(30, 30, 100, 20)

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):
        rb_a = QtWidgets.QRadioButton(self)
        rb_a.setGeometry(30, 60, 100, 20)
        rb_a.setText('A')
        rb_a.toggled.connect(lambda: self.showMsg(rb_a))  # 綁定函式

        rb_b = QtWidgets.QRadioButton(self)
        rb_b.setGeometry(150, 60, 100, 20)
        rb_b.setText('B')
        rb_b.toggled.connect(lambda: self.showMsg(rb_b))  # 綁定函式

        group = QtWidgets.QButtonGroup(self)
        group.addButton(rb_a)
        group.addButton(rb_b)

        self.label = QtWidgets.QLabel(self)
        self.label.setGeometry(30, 30, 100, 20)

    def showMsg(self, rb):
        self.label.setText(rb.text() + ':' + str(rb.isChecked()))  # 取得按鈕狀態

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

意见反馈