博客

PyQt5 – 当鼠标悬停时为RadioButton指示器设置皮肤

  • Post category:Python

下面是 Python 的 “PyQt5 – 当鼠标悬停时为RadioButton指示器设置皮肤” 的完整使用攻略：

1. 简介

PyQt5 是一款 Python 编程语言的 GUI 工具包，它可以通过 Python 代码构建各种类型的图形用户界面，支持 Windows、Linux 和 macOS 等多平台。RadioButton 是 PyQt5 中的一种控件，用于从一组单选框中选择一项。本攻略将展示如何为 RadioButton 指示器添加鼠标悬停时的皮肤效果。

2. 实现

下面是一个示例程序，展示了如何为 RadioButton 指示器添加鼠标悬停效果，当鼠标悬停在 RadioButton 上方时，它的指示器会变成指定的颜色。

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QRadioButton
from PyQt5.QtGui import QCursor, QColor
from PyQt5.QtCore import Qt

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

        self.initUI()

    def initUI(self):
        vbox = QVBoxLayout(self)

        # 添加三个 RadioButton
        self.radioButton1 = QRadioButton("RadioButton1", self)
        self.radioButton2 = QRadioButton("RadioButton2", self)
        self.radioButton3 = QRadioButton("RadioButton3", self)

        # 添加到 QVBoxLayout 布局中
        vbox.addWidget(self.radioButton1)
        vbox.addWidget(self.radioButton2)
        vbox.addWidget(self.radioButton3)

        # 设置指示器背景颜色
        self.radioButton1.setStyleSheet("QRadioButton::indicator { width: 20px; height: 20px; background-color: white; }")
        self.radioButton2.setStyleSheet("QRadioButton::indicator { width: 20px; height: 20px; background-color: white; }")
        self.radioButton3.setStyleSheet("QRadioButton::indicator { width: 20px; height: 20px; background-color: white; }")

        # 为每个 RadioButton 对象的鼠标事件添加事件处理程序
        self.radioButton1.enterEvent = lambda event: self.setHoverStyleSheet(self.radioButton1, 'red')
        self.radioButton1.leaveEvent = lambda event: self.setHoverStyleSheet(self.radioButton1, 'white')
        self.radioButton2.enterEvent = lambda event: self.setHoverStyleSheet(self.radioButton2, 'green')
        self.radioButton2.leaveEvent = lambda event: self.setHoverStyleSheet(self.radioButton2, 'white')
        self.radioButton3.enterEvent = lambda event: self.setHoverStyleSheet(self.radioButton3, 'blue')
        self.radioButton3.leaveEvent = lambda event: self.setHoverStyleSheet(self.radioButton3, 'white')

        self.show()

    ## 设置指示器鼠标悬停效果
    def setHoverStyleSheet(self, radio, colorStr):
        radio.setStyleSheet(
            f"QRadioButton::indicator {{ width: 20px; height: 20px; \
            background-color: {'transparent' if QCursor().pos().x() < radio.mapToGlobal(radio.rect().center()).x() else colorStr}; }}"
        )

if __name__ == '__main__':
    app = QApplication(sys.argv)
    ex = RadioButtonHover()
    sys.exit(app.exec_())

上面的代码创建了一个包含三个 RadioButton 的窗口。它使用了 QVBoxLayout 布局，便于垂直排列所有的 RadioButton。每个 RadioButton 都有一个指示器，当鼠标悬停时，它的指示器会变色。

我们在每个 RadioButton 对象的鼠标事件上添加了一个事件处理程序。这里，我们使用了 PyQt5 中的 enterEvent() 和 leaveEvent() 函数来检测鼠标何时进入和离开 RadioButton 控件。当鼠标进入 RadioButton 控件时，我们将调用 setHoverStyleSheet() 函数，并将 RadioButton 和指定的颜色作为参数传递。当鼠标离开 RadioButton 控件时，我们将调用 setHoverStyleSheet() 函数，并将 RadioButton 和白色传递作为参数。

setHoverStyleSheet() 函数用于设置指示器的鼠标悬停时的样式。它使用 CSS 样式表来设置 RadioButton 控件的外观。这个函数先检查鼠标的位置，如果鼠标在 RadioButton 控件的左侧，则指示器不应更改颜色。如果鼠标在右侧，则应该更改颜色。

3. 示例

下面是两个使用样式表为RadioButton按钮添加鼠标悬停效果的具体示例：

示例 1：将指示器设置为 QQ 风格的蓝色方块

radioButton.setStyleSheet(
    "QRadioButton::indicator { border: 2px solid gray; border-radius: 6px; background-color: qradialgradient(cx:0.5, cy:0.5, radius:0.5,fx:0.5, fy:0.5, stop:0 #a3d2eb, stop:1 #669acc); } "
)

radioButton.enterEvent = lambda event: self.setHoverStyleSheet(radioButton, 'QPushButton { background-color: #cfeeff; }', 
'QFrame { border: 2px solid #a3d2eb; border-radius: 4px; }',
'QRadioButton::indicator { border: 2px solid #a3d2eb; border-radius: 6px; background-color: qradialgradient(cx:0.5, cy:0.5, radius:0.5,fx:0.5, fy:0.5, stop:0 #a3d2eb, stop:1 #669acc); } ')

radioButton.leaveEvent = lambda event: self.setHoverStyleSheet(radioButton, '', '', "QRadioButton::indicator { border: 2px solid gray; border-radius: 6px; background-color: qradialgradient(cx:0.5, cy:0.5, radius:0.5,fx:0.5, fy:0.5, stop:0 #a3d2eb, stop:1 #669acc); }")

在这个示例中，我们将指示器设置为 QQ 风格的蓝色方块。当鼠标进入控件时，指示器的背景色和边框颜色都会变成浅蓝色，而控件的背景色和边框颜色则不变。当鼠标离开控件时，指示器的颜色将恢复到原始颜色。

示例 2：将指示器设置为 Apple 风格的黑色和白色圆形

radioButton.setStyleSheet(
    "QRadioButton::indicator { border: 2px solid gray; width: 18px; height: 18px; border-radius: 9px; } "
)

radioButton.enterEvent = lambda event: self.setHoverStyleSheet(radioButton, 'QPushButton { background-color: #f2f2f2; }', 
'QFrame { border: 2px solid black; border-radius: 4px; }', 
'QRadioButton::indicator { border: 2px solid #1b1b1b; width: 18px; height: 18px; border-radius: 9px; background-color: #f2f2f2; } ')

radioButton.leaveEvent = lambda event: self.setHoverStyleSheet(radioButton, '', '', "QRadioButton::indicator { border: 2px solid gray; width: 18px; height: 18px; border-radius: 9px; }")

在这个示例中，我们将指示器设置为 Apple 风格的黑色和白色圆形。当鼠标进入控件时，指示器的背景色和边框颜色都会变成黑色和白色，而控件的背景色和边框颜色则不变。当鼠标离开控件时，指示器的颜色将恢复到原始颜色。

这两个示例使用了不同的样式表来设置鼠标悬停效果。但是，它们都使用了相同的基本实现方法，并且都调用了 setHoverStyleSheet() 函数来设置 RadioButton 控件的样式。

Tags: