PyQt5 - 按下时选中的 RadioButton 指示器的背景图像

在 PyQt5 中，我们可以自定义 RadioButton 的样式，包括选中时的指示器图像。本文将演示如何使用 CSS 样式表来更改 RadioButton 按钮的指示器图像。

1. 创建 RadioButton

首先，我们需要在 PyQt5 中创建一个 RadioButton。可以使用 QRadioButton 类来创建一个 RadioButton，示例代码如下：

from PyQt5.QtWidgets import QApplication, QMainWindow, QRadioButton

app = QApplication([])
window = QMainWindow()

radio_button = QRadioButton('RadioButton Label', window)
radio_button.move(50, 50)

window.show()
app.exec_()

在上面的代码中，我们创建了一个名为 radio_button 的 RadioButton，并将其附加到名为 window 的主窗口上。

2. 使用 CSS 样式表更改 RadioButton 样式

要更改 RadioButton 的样式，我们需要使用 CSS 样式表。在 PyQt5 中，我们可以使用 setStyleSheet 方法来应用 CSS 样式表。示例代码如下：

radio_button.setStyleSheet('''
    QRadioButton {{
        background-color: white;
        border: 2px solid gray;
        border-radius: 10px;
        color: gray;
        font-size: 20px;
        padding: 10px 20px;
    }}
    
    QRadioButton::indicator {{
        border-radius: 10px;
    }}
    
    QRadioButton::indicator:unchecked {{
        background-color: white;
        border: 2px solid gray;
    }}
    
    QRadioButton::indicator:checked {{
        background-image: url(checked.png);
    }}
''')

在上面的代码中，我们首先为 QRadioButton 设置了一些样式，比如背景颜色、边框、圆角半径、字体大小和内边距等。

然后，我们使用 QRadioButton::indicator 来选择 RadioButton 的指示器，并为其设置了圆角半径。

接下来，我们使用 QRadioButton::indicator:unchecked 来选择未选中的 RadioButton，并为其设置了背景颜色和边框。

最后，我们使用 QRadioButton::indicator:checked 来选择选中的 RadioButton，并为其设置了背景图像。在这里，我们使用了名为 checked.png 的本地图像文件，你需要将其替换为自己的图像文件。

注意，在使用样式表设置指示器图像时，我们应该使用 background-image 属性，而不是 background-color 属性。

3. 运行代码

保存上面的代码片段到一个名为 main.py 的文件中，并确保放置了名为 checked.png 的本地图像文件。然后，运行代码，并单击 RadioButton 按钮来测试指示器图像。

你应该可以看到当你点击 RadioButton 按钮时，指示器图像会发生变化。

完整代码

from PyQt5.QtWidgets import QApplication, QMainWindow, QRadioButton

app = QApplication([])
window = QMainWindow()

radio_button = QRadioButton('RadioButton Label', window)
radio_button.move(50, 50)

radio_button.setStyleSheet('''
    QRadioButton {{
        background-color: white;
        border: 2px solid gray;
        border-radius: 10px;
        color: gray;
        font-size: 20px;
        padding: 10px 20px;
    }}
    
    QRadioButton::indicator {{
        border-radius: 10px;
    }}
    
    QRadioButton::indicator:unchecked {{
        background-color: white;
        border: 2px solid gray;
    }}
    
    QRadioButton::indicator:checked {{
        background-image: url(checked.png);
    }}
''')

window.show()
app.exec_()

总结

在本文中，我们介绍了如何使用 CSS 样式表在 PyQt5 中更改 RadioButton 的样式，包括选中时的指示器图像。这些样式将使你能够自定义 RadioButton 的外观，以更好地适应你的应用程序的设计。