博客

PyQt5 – 被按下的单选按钮的背景图片

  • Post category:Python

PyQt5是Python编程语言的GUI框架，提供了制作图形界面的工具，其中单选按钮（QRadioButton）是常用的界面控件之一。在PyQt5中，我们可以通过设置被选中的单选按钮的背景图片（background-image）来使其外观更加美观。

下面是使用PyQt5设置被按下的单选按钮的背景图片的完整使用攻略：

步骤1 导入必要的库

在Python代码中首先需要导入PyQt5的相关模块。

from PyQt5.QtWidgets import QApplication, QRadioButton, QVBoxLayout, QWidget
from PyQt5.QtCore import Qt

步骤2 创建GUI组件

在Python代码中创建单选按钮并设置其外观，可以使用setStyleSheet()方法来设置单选按钮的样式，这里我们要设置单选按钮被按下（checked）时的样式，可以使用background-image属性和url()函数来设置背景图片。

class RadioButtonDemo(QWidget):
    def __init__(self):
        super().__init__()
        layout = QVBoxLayout()
        self.button1 = QRadioButton("Button1")
        self.button1.setObjectName("Button1")
        self.button2 = QRadioButton("Button2")
        self.button2.setObjectName("Button2")
        layout.addWidget(self.button1)
        layout.addWidget(self.button2)
        self.setLayout(layout)
        self.setStyleSheet("""
            QRadioButton#Button1:checked {
                background-image: url('button1_checked.jpg');
            }
            QRadioButton#Button2:checked {
                background-image: url('button2_checked.jpg');
            }
        """)

其中，QRadioButton#Button1:checked代表被选中的id为Button1的单选按钮，使用了button1_checked.jpg作为背景图片。同理，QRadioButton#Button2:checked代表被选中的id为Button2的单选按钮，使用了button2_checked.jpg作为背景图片。

步骤3 显示GUI

最后，展示GUI界面。

if __name__ == "__main__":
    app = QApplication([])
    window = RadioButtonDemo()
    window.show()
    app.exec_()

现在，运行代码，当单选按钮被按下时，其背景图片会显示出来。

这里提供一下示例代码：

from PyQt5.QtWidgets import QApplication, QRadioButton, QVBoxLayout, QWidget
from PyQt5.QtCore import Qt


class RadioButtonDemo(QWidget):

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

        layout = QVBoxLayout()

        self.button1 = QRadioButton("Button1")
        self.button1.setObjectName("Button1")
        self.button2 = QRadioButton("Button2")
        self.button2.setObjectName("Button2")

        layout.addWidget(self.button1)
        layout.addWidget(self.button2)

        self.setLayout(layout)

        self.setStyleSheet("""
            QRadioButton#Button1:checked {
                background-image: url('button1_checked.jpg');
            }
            QRadioButton#Button2:checked {
                background-image: url('button2_checked.jpg');
            }
        """)


if __name__ == "__main__":
    app = QApplication([])
    window = RadioButtonDemo()
    window.show()
    app.exec_()

以上是第一种方式，在此基础上我们可以再提供一种方式，实现了将QButton样式集中定义，方便统一管理。

from PyQt5.QtWidgets import QApplication, QRadioButton, QVBoxLayout, QWidget
from PyQt5.QtCore import Qt


class RadioButtonDemo(QWidget):

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

        layout = QVBoxLayout()

        self.button1 = QRadioButton("Button1")
        self.button1.setObjectName("Button1")
        self.button2 = QRadioButton("Button2")
        self.button2.setObjectName("Button2")

        layout.addWidget(self.button1)
        layout.addWidget(self.button2)

        self.setLayout(layout)

        self.setStyleSheet("""
            QRadioButton {
                background-color: transparent;
                padding: 0px;
                margin: 0px;
            }

            QRadioButton::indicator {
                width: 30px;
                height: 30px;
            }

            QRadioButton::indicator:checked {
                background-image: url('button_checked.png');
            }

            QRadioButton::indicator:unchecked {
                background-image: url('button_unchecked.png');
            }
        """)


if __name__ == "__main__":
    app = QApplication([])
    window = RadioButtonDemo()
    window.show()
    app.exec_()

同样使用’stylesheet’设置，但是将QButton样式集中定义，方便了我们的使用。

Tags: