qt Qss 边框渐变

目录

背景渐变

方案一 Qss

方案二 paintEvent函数

方案三 QGraphicsDropShadowEffect投影效果

---

背景渐变

QT里面背景是可以渐变，其中qlineargradient里面参数意思

spread：渐变方式（具体可以查看qt帮助文档搜索PadSpread）

坐标x1、y1、x2、y2：分别代表渐变方向，可以认为是向量方式

stop：可以理解每段从某个颜色到结束渐变

background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1, stop:0 rgba(0, 0, 0, 255), stop:0.5 rgba(255, 255, 255, 255));

详细 可以参考官方文档或者博客。这里主要给出渐变线的方案

方案一 Qss

用渐变背景方式渐变线

QPushButton* button = new QPushButton("Button", this);
button->setStyleSheet("border: 1px solid qlineargradient(x1: 0, y1: 0, x2: 1, y2: 1, stop: 0 #FF0000, stop: 1 #00FF00); border-radius: 5px;");

可以看出效果并不好，（如果四周都有倒角不建议这样处理，个别情况不太好处理）

针对各个边设置

QPushButton* button = new QPushButton("Button", this);
button->->setStyleSheet("background:#1E1E1E;border-style:transparent;\
			border-top: 1px solid qlineargradient(x1: 0, y1: 0, x2: 1, y2: 1, stop: 0 #007FFA, stop: 0.3 #007FFA,stop: 0.6 #007FFA,stop: 0.9 #007FFA,stop: 1 #007FFA);\
			border-left: 1px solid qlineargradient(x1: 0, y1: 0, x2: 1, y2: 1, stop: 0 #007FFA, stop: 0.7 #1E1E1E);\
			border-right: 1px solid qlineargradient(x1: 0, y1: 0, x2: 1, y2: 1, stop: 0 #007FFA, stop: 0.7 #1E1E1E);border-top-left-radius:5px;border-top-right-radius:5px;");

 

效果像这个样式，但是如果下面加角度好像效果并不太好

方案二 paintEvent函数

使用QPainter绘制：你可以通过重写按钮的paintEvent函数，使用QPainter来绘制按钮的边框。在绘制过程中，你可以使用QLinearGradient来创建渐变效果，并使用QPen来设置边框的样式。 

void MyButton::paintEvent(QPaintEvent* event)
{
    QPushButton::paintEvent(event);

    QPainter painter(this);
    QLinearGradient gradient(rect().topLeft(), rect().bottomRight());
    gradient.setColorAt(0, QColor("#FF0000"));
    gradient.setColorAt(1, QColor("#00FF00"));

    QPen pen(gradient, 2);
    painter.setPen(pen);
    painter.setBrush(Qt::NoBrush);
    painter.drawRect(rect().adjusted(1, 1, -1, -1));
}

方案三 QGraphicsDropShadowEffect投影效果

使用QGraphicsEffect：你可以使用Qt的图形效果框架来实现按钮的渐变边框效果。首先，你可以创建一个QGraphicsEffect对象，并将其设置为按钮的图形效果。然后，你可以使用QLinearGradient来创建渐变效果，并将其设置为QGraphicsEffect的属性。

QGraphicsDropShadowEffect* effect = new QGraphicsDropShadowEffect(this);
QLinearGradient gradient(rect().topLeft(), rect().bottomRight());
gradient.setColorAt(0, QColor("#FF0000"));
gradient.setColorAt(1, QColor("#00FF00"));
effect->setColor(gradient);
button->setGraphicsEffect(effect);

类似方案：

/*
Neon Style Sheet for QT Applications (QpushButton)
Author: Jaime A. Quiroga P.
Company: GTRONICK
Last updated: 24/10/2020, 15:42.
Available at: https://github.com/GTRONICK/QSS/blob/master/NeonButtons.qss
*/
QPushButton{
	border-style: solid;
	border-color: #050a0e;
	border-width: 1px;
	border-radius: 5px;
	color: #d3dae3;
	padding: 2px;
	background-color: #100E19;
}
QPushButton::default{
	border-style: solid;
	border-color: #050a0e;
	border-width: 1px;
	border-radius: 5px;
	color: #FFFFFF;
	padding: 2px;
	background-color: #151a1e;
}
QPushButton:hover{
	border-style: solid;
	border-top-color: qlineargradient(spread:pad, x1:0, y1:1, x2:1, y2:1, stop:0 #C0DB50, stop:0.4 #C0DB50, stop:0.5 #100E19, stop:1 #100E19);
    border-bottom-color: qlineargradient(spread:pad, x1:0, y1:1, x2:1, y2:1, stop:0 #100E19, stop:0.5 #100E19, stop:0.6 #C0DB50, stop:1 #C0DB50);
    border-left-color: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #C0DB50, stop:0.3 #C0DB50, stop:0.7 #100E19, stop:1 #100E19);
    border-right-color: qlineargradient(spread:pad, x1:0, y1:1, x2:0, y2:0, stop:0 #C0DB50, stop:0.3 #C0DB50, stop:0.7 #100E19, stop:1 #100E19);
	border-width: 2px;
    border-radius: 1px;
	color: #d3dae3;
	padding: 2px;
}
QPushButton:pressed{
	border-style: solid;
	border-top-color: qlineargradient(spread:pad, x1:0, y1:1, x2:1, y2:1, stop:0 #d33af1, stop:0.4 #d33af1, stop:0.5 #100E19, stop:1 #100E19);
    border-bottom-color: qlineargradient(spread:pad, x1:0, y1:1, x2:1, y2:1, stop:0 #100E19, stop:0.5 #100E19, stop:0.6 #d33af1, stop:1 #d33af1);
    border-left-color: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #d33af1, stop:0.3 #d33af1, stop:0.7 #100E19, stop:1 #100E19);
    border-right-color: qlineargradient(spread:pad, x1:0, y1:1, x2:0, y2:0, stop:0 #d33af1, stop:0.3 #d33af1, stop:0.7 #100E19, stop:1 #100E19);
	border-width: 2px;
    border-radius: 1px;
	color: #d3dae3;
	padding: 2px;
}