📌  相关文章
📜  PyQt5 - 按下时未选中的单选按钮指示器的背景图像(1)

📅  最后修改于: 2023-12-03 15:18:47.056000             🧑  作者: Mango

PyQt5 - 按下时未选中的单选按钮指示器的背景图像

在PyQt5中,单选按钮的指示器是一个由样式表控制的突出显示的圆形指示器。当单选按钮被选中时,指示器通常会显示填充。但是,当单选按钮被按下但未选中时,指示器默认情况下会显示空心状态,这在某些情况下可能会产生混淆。为了解决这个问题,我们可以通过样式表添加一个背景图像来指示按下的状态。

以下是一个示例程序,该程序创建了两个单选按钮,一个带背景图像的按下状态指针,另一个则没有。代码中包括样式表来控制单选按钮的样式。我们还使用了QVBoxLayout和QHBoxLayout来布局组件。

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


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

        layout = QVBoxLayout()

        # Create the radio buttons
        radio_button1 = QRadioButton("Option 1")
        radio_button2 = QRadioButton("Option 2")

        # Set the default checked radio button
        radio_button1.setChecked(True)

        # Apply the style sheet
        radio_button1.setStyleSheet("""
            QRadioButton::indicator {
                width: 20px;
                height: 20px;
            }
            QRadioButton::indicator::unchecked:hover {
                border: 1px solid #1E90FF;
            }
            QRadioButton::indicator::checked {
                background-image: url(checked.png);
            }
            QRadioButton::indicator::unchecked {
                background-image: url(unchecked.png);
            }
            """)

        radio_button2.setStyleSheet("""
            QRadioButton::indicator {
                width: 20px;
                height: 20px;
            }
            QRadioButton::indicator::unchecked:hover {
                border: 1px solid #1E90FF;
            }
            QRadioButton::indicator::checked {
                background-color: #1E90FF;
            }
            """)

        # Add the radio buttons to the layout
        layout.addWidget(radio_button1)
        layout.addWidget(radio_button2)

        # Set the layout
        self.setLayout(layout)


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

在样式表中,我们定义了以下内容:

  • 一个20x20像素的指示器大小。
  • 一个unchecked:hover的伪状态,当鼠标悬停在未选择的按钮上时,显示蓝色边框。
  • 一个checked的伪状态,当按钮被选中时,显示一个名为“checked.png”的背景图像。
  • 一个unchecked的伪状态,当按钮未选中时,显示一个名为“unchecked.png”的背景图像。

通过将背景图像添加到unchecked状态,我们可以指示在按钮按下但未选中时的状态。在这个示例中,我们使用相同的背景颜色 (#1E90FF)来代替背景图像以演示操作。