博客

PyQt5 – 当鼠标悬停在选中的单选按钮上时，为其设置背景图片

  • Post category:Python

使用PyQt5可以为单选按钮设置背景图片，当鼠标悬停在按钮上时，可以为其设置另一张背景图片，提高用户体验。下面是详细的使用攻略：

步骤1：引入相关模块和资源文件

首先，我们需要在文件中引入相关的模块和资源文件。在这里，我们需要引入“QtWidgets”模块，这可以通过从PyQt5中导入“QtWidgets”完成。如果要使用背景图片，还需要在文件夹中放置相关的图片资源，以供后续的引用。

from PyQt5 import QtWidgets, QtGui, QtCore

class MyWindow(QtWidgets.QWidget):
    def __init__(self):
        super().__init__()

步骤2：创建单选按钮

在第二步中，我们需要创建一个单选按钮。这可以通过使用QRadioButton类来完成，我们可以使用setText来定义按钮的显示文本。同时，我们还需要使用setObjectName方法为单选按钮设置对象名称，以供后续的引用。

self.button1 = QtWidgets.QRadioButton('Button 1', self)
self.button1.setObjectName("Button1")

步骤3：定义按钮样式和背景图片

在第三步中，我们需要为单选按钮设置样式和背景图片。我们需要使用setStyleSheet方法为按钮设置样式，在这里，我们可以调用常规CSS规则来定义按钮的样式。为按钮设置背景图片，我们需要创建一个QPixmap实例并将其设置为按钮的背景，以支持鼠标指针悬停在按钮上时的背景图片替换。

self.button1.setStyleSheet("QRadioButton { background-color: green; }")
self.button1.setIcon(QtGui.QIcon('image/button1.png'))
self.button1.setIconSize(QtCore.QSize(100, 50))
self.button1.setFlat(True)

步骤4：设置鼠标悬停效果

在第四步中，我们需要为单选按钮设置鼠标悬停效果。为了实现这一点，可以使用信号槽机制。我们需要连接按钮的MouseMove信号和自定义函数，该函数将在鼠标悬停在该按钮上时被调用。在该函数中，我们需要保证鼠标是否仍悬停在按钮上，如果是，则设置背景图片为替代图片。

def hoverButton(self, event):
    if self.button1.underMouse():
        self.button1.setStyleSheet("QRadioButton {background-image: url(image/button1_hover.png);}")
    else:
        self.button1.setStyleSheet("QRadioButton { background-color: green; }")

步骤5：完成程序

在第五步中，我们需要调用MyWindow类的构造函数完成程序。这将在PyQt5窗体中呈现单选按钮的样式和背景图片，并通过自定义函数hoverButton为鼠标悬停效果设置替代背景图片。

if __name__ == "__main__":
    app = QtWidgets.QApplication([])
    win = MyWindow()
    win.show()
    app.exec_()

至此，我们已经为PyQt5单选按钮设置了背景图片和鼠标悬停效果，提高了用户体验的同时，也丰富了PyQt5的开发代码。下面给出另一个实例。

示例1

from PyQt5 import QtWidgets, QtGui, QtCore

class MyWindow(QtWidgets.QWidget):
    def __init__(self):
        super().__init__()
        self.initUI()

    def initUI(self):
        layout = QtWidgets.QVBoxLayout(self)

        self.button1 = QtWidgets.QRadioButton('Button 1', self)
        self.button1.setObjectName("Button1")
        layout.addWidget(self.button1)

        self.button2 = QtWidgets.QRadioButton('Button 2', self)
        self.button2.setObjectName("Button2")
        layout.addWidget(self.button2)

        self.button1.setStyleSheet("QRadioButton { background-color: green; }")
        self.button1.setIcon(QtGui.QIcon('image/button1.png'))
        self.button1.setIconSize(QtCore.QSize(100, 50))
        self.button1.setFlat(True)

        self.button2.setStyleSheet("QRadioButton { background-color: blue; }")
        self.button2.setIcon(QtGui.QIcon('image/button2.png'))
        self.button2.setIconSize(QtCore.QSize(100, 50))
        self.button2.setFlat(True)

        self.button1.mouseMoveEvent = self.hoverButton
        self.button2.mouseMoveEvent = self.hoverButton

    def hoverButton(self, event):
        button = self.sender()
        if button.underMouse():
            button.setStyleSheet("QRadioButton {background-image: url(image/%s_hover.png);}" % button.objectName())
        else:
            if button.objectName() == 'Button1':
                button.setStyleSheet("QRadioButton { background-color: green; }")
            else:
                button.setStyleSheet("QRadioButton { background-color: blue; }")

if __name__ == "__main__":
    app = QtWidgets.QApplication([])
    win = MyWindow()
    win.show()
    app.exec_()

示例2

from PyQt5 import QtWidgets, QtGui, QtCore

class MyWindow(QtWidgets.QWidget):
    def __init__(self):
        super().__init__()
        self.initUI()

    def initUI(self):
        layout = QtWidgets.QVBoxLayout(self)

        self.button1 = QtWidgets.QRadioButton('Button 1', self)
        self.button1.setObjectName("Button1")
        layout.addWidget(self.button1)

        self.button2 = QtWidgets.QRadioButton('Button 2', self)
        self.button2.setObjectName("Button2")
        layout.addWidget(self.button2)

        self.button1.setStyleSheet("QRadioButton { background-color: green; }")
        self.button1.setIcon(QtGui.QIcon('image/button1.png'))
        self.button1.setIconSize(QtCore.QSize(100, 50))
        self.button1.setFlat(True)

        self.button2.setStyleSheet("QRadioButton { background-color: blue; }")
        self.button2.setIcon(QtGui.QIcon('image/button2.png'))
        self.button2.setIconSize(QtCore.QSize(100, 50))
        self.button2.setFlat(True)

        self.button1.mouseMoveEvent = self.hoverButton
        self.button2.mouseMoveEvent = self.hoverButton

    def hoverButton(self, event):
        button = self.sender()
        if button.underMouse():
            button.setStyleSheet("QRadioButton {background-image: url(image/%s_hover.png);}" % button.objectName())
        else:
            if button.objectName() == 'Button1':
                button.setStyleSheet("QRadioButton { background-color: green; }")
            else:
                button.setStyleSheet("QRadioButton { background-color: blue; }")

if __name__ == "__main__":
    app = QtWidgets.QApplication([])
    win = MyWindow()
    win.show()
    app.exec_()
Tags: