上面图片里面这样的图表容器子窗口常用贴图实现:
QPixmap pixmip;
pixmip.load(":/images/bg.png");
w->setAutoFillBackground(true);
palette.setBrush(QPalette::Window,QBrush(p.scaled(w->size(),Qt::IgnoreAspectRatio,Qt::SmoothTransformation)));
w->setPalette(palette);
现在用绘制的方式实现。
#ifndef WIDGET_H
#define WIDGET_H
#include <QWidget>
class Widget : public QWidget
{
Q_OBJECT
public:
Widget(QWidget *parent = nullptr);
~Widget()override;
protected:
void paintEvent(QPaintEvent *event) override;
private:
int lightLineLength{30};//拐角的线的长度
int shadowLength{40};//阴影长度
void drawBackground(const QRect & rect,QPainter * painter);
};
#endif // WIDGET_H
#include "widget.h"
#include <QPainter>
#include <QPaintEvent>
Widget::Widget(QWidget *parent)
: QWidget(parent)
{
this->setWindowFlags(Qt::FramelessWindowHint);
this->setAttribute(Qt::WA_TranslucentBackground, true);
}
Widget::~Widget()
{
}
void Widget::drawBackground(const QRect & rect,QPainter * painter)
{
QLinearGradient linearGradient(rect.topLeft(),QPoint(shadowLength,0));
linearGradient.setColorAt(0.4,QColor(255,255,255,20));
linearGradient.setColorAt(0.8,QColor(255,255,255,0));
painter->fillRect(QRect(rect.topLeft(),QSize(shadowLength,rect.height())),linearGradient);
linearGradient.setStart(rect.topRight());
linearGradient.setFinalStop(QPoint(rect.width() - shadowLength,0));
painter->fillRect(QRect(QPoint(rect.width() - shadowLength,0),QSize(shadowLength,rect.height())),linearGradient);
linearGradient.setStart(rect.topLeft());
linearGradient.setFinalStop(QPoint(0,shadowLength));
painter->fillRect(QRect(rect.topLeft(),QSize(rect.width(),shadowLength)),linearGradient);
linearGradient.setStart(QPoint(0,rect.height()));
linearGradient.setFinalStop(QPoint(0,rect.height() - shadowLength));
painter->fillRect(QRect(QPoint(0,rect.height() - shadowLength),QSize(rect.width(),shadowLength)),linearGradient);
painter->save();
QPen pen;
pen.setColor(QColor("#164381"));
pen.setWidth(3);
painter->setPen(pen);
painter->drawRect(rect.adjusted(0,0,-1,-1));
painter->restore();
painter->save();
pen.setColor(QColor("#49d9fe"));
pen.setWidth(5);
painter->setPen(pen);
QVector<QLine> vector;
vector << QLine(rect.topLeft(),QPoint(0,lightLineLength));
vector << QLine(rect.topLeft(),QPoint(lightLineLength,0));
vector << QLine(rect.topRight(),QPoint(rect.topRight().x() - lightLineLength,0));
vector << QLine(rect.topRight(),QPoint(rect.topRight().x(),lightLineLength));
vector << QLine(rect.bottomLeft(),QPoint(0,rect.bottomLeft().y() - lightLineLength));
vector << QLine(rect.bottomLeft(),QPoint(lightLineLength,rect.bottomLeft().y()));
vector << QLine(rect.bottomRight(),QPoint(rect.bottomRight().x() - lightLineLength,rect.bottomRight().y()));
vector << QLine(rect.bottomRight(),QPoint(rect.bottomRight().x(),rect.bottomRight().y() - lightLineLength));
painter->drawLines(vector);
painter->restore();
}
void Widget::paintEvent(QPaintEvent * event)
{
QPainter painter(this);
auto rect = event->rect();
drawBackground(rect,&painter);
QWidget::paintEvent(event);
}
效果:
四周的白色阴影不太明显,可以把阴影改成粉红色看效果:
linearGradient.setColorAt(0.4,QColor(255,0,255,20));
linearGradient.setColorAt(0.8,QColor(255,0,255,0));
使用示例:
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
QWidget w;
w.setAutoFillBackground(true);
QPalette palette;
QPixmap pixmap = QPixmap(":/home_bg.png");
palette.setBrush(QPalette::Window,QBrush(pixmap));
w.setPalette(palette);
QGridLayout * gl = new QGridLayout;
gl->addWidget(new Widget,0,0);
gl->addWidget(new Widget,0,1);
gl->addWidget(new Widget,1,0);
gl->addWidget(new Widget,1,1);
w.setLayout(gl);
w.show();
return a.exec();
}