PyQt5 – 未选中状态下被按下的单选按钮的背景图片

如何设置 PyQT5 单选按钮的未选中状态下的背景图片？

1.概述
Pyqt5 可以用 QSS 来实现单选按钮的样式互动。QSS 是一种 CSS 样式表语言的变体，可以设置 PyQt5 窗口上控件的外观。通过QSS，可以让单选按钮实现很多 CSS 中的特效。

2.设置方式
在PyQT5中，通过setStyleSheet()后定义QSS代码，可以设置控件的背景颜色、字体、边框等，其中也包含了控件的状态样式处理。

单选按钮(qRadioButton)有四种状态: 正常态、划过态、按下态、选中态；可以通过查找官方文档，得到其状态值。

可以通过以下代码实现单选按钮在未选中状态下的背景图片：

# 未选中状态下的背景图片
QRadioButton {
    background-image: url(:/radio_normal.png);
    border: none;
}

# 选中状态下的背景图片
QRadioButton:checked {
    background-image: url(:/radio_select.png);
    border: none;
}

# 鼠标移上去的状态下的背景图片
QRadioButton:hover {
    background-image: url(:/radio_hover.png)
}

# 没选中也没划过的状态下的背景图片
QRadioButton:unchecked:hover {
    background-image: url(:/radio_normal.png);
}

在上例中，选中状态下的背景图片是 radio_select.png，这个图片的路径是 PyQt5 工程根目录下。这里需要将图片引用链接到 PyQT5 窗口。

3.示例

下面是一个比较完整的例子：

import sys
from PyQt5.QtWidgets import QWidget, QApplication, QRadioButton

class Example(QWidget):

    def __init__(self):
        super().__init__()

        self.initUI()


    def initUI(self):
        b1 = QRadioButton('Button1',self)
        b1.move(15, 20)

        b2 = QRadioButton('Button2',self)
        b2.move(15, 50)

        b3 = QRadioButton('Button3',self)
        b3.move(15, 80)

        self.setGeometry(300, 300, 350, 250)
        self.setWindowTitle('QRadioButton')
        self.setStyleSheet("""
        QRadioButton {
            background-image: url(./unchecked_bg.png);
            border: none;
            width: 13px;
            height: 13px;
        }

        QRadioButton:checked {
            background-image: url(./checked_bg.png);
            border: none;
        }

        QRadioButton:hover {
            background-image: url(./unchecked_bg_hover.png);
        }

        QRadioButton:unchecked:hover {
            background-image: url(./unchecked_bg_hover.png);
        }
        """)
        self.show()


if __name__ == '__main__':

    app = QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())

在这个例子中，我们创建了三个单选按钮，这三个按钮使用了 QRadioButton 控件。

使用 QSS，我们定义了这个窗口中单选按钮的样式：

QRadioButton {
    background-image: url(./unchecked_bg.png);
    border: none;
    width: 13px;
    height: 13px;
}

QRadioButton:checked {
    background-image: url(./checked_bg.png);
    border: none;
}

QRadioButton:hover {
    background-image: url(./unchecked_bg_hover.png);
}

QRadioButton:unchecked:hover {
    background-image: url(./unchecked_bg_hover.png);
}

这里，并没有一个默认的背景色，我们使用了一个 13x13 的图片来作为控件的背景。

这个例子我们自定义了按钮的一些状态，其中：

• unchecked_bg.png 是未选中状态下的背景图片；
• checked_bg.png 是选中状态下的背景图片；
• unchecked_bg_hover.png 是未选中状态下鼠标悬停状态的背景图片。

这些图片可以自定义设计，实现自定义的单选按钮样式。

运行例子，单击不同的控件，单选按钮会切换背景，展现了不同的样式。可以试着更改及添加一些状态，来理解 QSS 样式表的处理机制。