Qt 的径向渐变的类QRadialGradient 学习笔记

news2025/1/10 23:59:24

QRadialGradient 是 PySide（即 Qt 的 Python 绑定）中用于创建径向渐变的类。径向渐变是一种从中心点向外扩展的渐变效果，与线性渐变不同，线性渐变是沿着一条直线变化的。基本概念 QRadialGradient 可以用来为图形项、形状或背景填充颜色渐变效果。它以一个中心点为起点，颜色会从中心点向外逐渐变化，直到渐变的边界。

`代码常用方法`

构造函数 QRadialGradient(center: QPointF, radius: float)：构造一个径向渐变对象，center 是渐变中心点的位置，radius 是渐变的半径。设置中心点 setCenter(center: QPointF)：设置渐变中心点。设置半径 setRadius(radius: float)：设置渐变的半径。设置渐变停止点 setColorAt(position: float, color: QColor)：设置渐变停止点的位置和颜色。position 是渐变停止点在渐变范围内的位置（通常在 0 到 1 之间），color 是对应的颜色。获取渐变的颜色 colorAt(position: float)：获取指定位置的颜色。

from PySide6.QtGui import QPainter, QRadialGradient, QColor
from PySide6.QtWidgets import QWidget, QApplication, QLabel
from PySide6.QtCore import QPointF


class GradientWidget(QWidget):
    def __init__(self):
        super().__init__()
        self.label = QLabel()
        self.label.setGeometry(0, 0, 200, 200)

    def paintEvent(self, event):
        painter = QPainter(self)

        # 创建径向渐变
        gradient = QRadialGradient(QPointF(100, 100), 100)
        gradient.setColorAt(0.0, QColor('white'))
        gradient.setColorAt(0.5, QColor('green'))
        gradient.setColorAt(1.0, QColor('red'))

        # 使用渐变填充背景
        painter.setBrush(gradient)
        painter.drawRect(self.label.rect())


if __name__ == "__main__":
    app = QApplication([])
    widget = GradientWidget()
    widget.resize(200, 200)
    widget.show()
    app.exec()

样式表用法：

qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, stop:0 red, stop:1 white)

cx 和 cy 是渐变中心点的位置，相对于组件的宽度和高度（取值范围是 0 到 1）。
radius 是渐变的半径（也是相对于组件的宽度和高度，取值范围是 0 到 1）。
fx 和 fy 是渐变焦点的坐标，通常表示渐变的起始位置。fx:0.5 和 fy:0.5 表示焦点也在控件的中心。默认情况下，焦点和中心是相同的，但你可以通过改变 fx 和 fy 的值来调整渐变的形状。
stop 指定渐变中的颜色停靠点。stop: 0 表示渐变开始的位置，stop: 1 表示渐变结束的位置。后面跟的是颜色值。

demo：

QLabel，长宽均为200，在样式表中输入：

border-radius: 100px;
border: 2px solid rgb(100, 100, 100);
background-color: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.3, fy:0.3, stop:0 red, stop:1 blue);

试做两个指示灯：

QLabel{border-radius: 20px;

border: 1px solid rgb(100, 100, 100);

background-color: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.3, fy:0.3, stop:0 rgb(255, 200, 200), stop:0.2 rgb(255,50,50), stop:1 rgb(200, 30, 30));

}

以及：

QLabel{border-radius: 20px;

border: 1px solid rgb(100, 100, 100);

background-color: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.3, fy:0.3, stop:0 rgb(200, 255, 200), stop:0.2 rgb(50,255,50), stop:1 rgb(30,210,30));}