Qt编写自定义控件：用于大屏图表界面的图表容器窗口

上面图片里面这样的图表容器子窗口常用贴图实现：

    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();
}