目录
背景渐变
方案一 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);