Qt5 Tutorial QBrush and QGradient - 2020

In this tutorial, we will learn QGradient.

The QGradient class is used in combination with QBrush to specify gradient fills. Qt currently supports three types of gradient fills:

1. Linear gradients interpolate colors between start and end points.
2. Simple radial gradients interpolate colors between a focal point and end points on a circle surrounding it.
3. Extended radial gradients interpolate colors between a center and a focal circle.
4. Conical gradients interpolate colors around a center point.

Here is an example of gradients Qt Doc QGradient.

OK. Let's make own own example.

Qt->Qt Gui Application:

We will override QWidget::paintEvent(). That's because whenever there is a paint event, we can draw whatever we want. In other words, we let Qt know what to draw on our dialog box at the paint event.

Here is the modified dialog.h:

// dialog.h

#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>
#include <QPainter>
#include <QLinearGradient>
#include <QRadialGradient>
#include <QConicalGradient>

namespace Ui {
class Dialog;
}

class Dialog : public QDialog
{
    Q_OBJECT
    
public:
    explicit Dialog(QWidget *parent = 0);
    ~Dialog();
    
private:
    Ui::Dialog *ui;

protected:
    void paintEvent(QPaintEvent *e);
};

#endif // DIALOG_H

Here, we're going to reimplement paintEvent().

Here is the implementation file, dialog.cpp:

#include "dialog.h"
#include "ui_dialog.h"

Dialog::Dialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::Dialog)
{
    ui->setupUi(this);
}

Dialog::~Dialog()
{
    delete ui;
}

void Dialog:: paintEvent(QPaintEvent *e)
{
    QPainter painter(this);

    // Gradient used with QBrush

    QLinearGradient linearGrad(QPointF(100, 100), QPointF(200, 200));
    linearGrad.setColorAt(0, Qt::white);
    linearGrad.setColorAt(0.5, Qt::green);
    linearGrad.setColorAt(1, Qt::black);
    QRect rect_linear(50,50,200,200);
    painter.fillRect(rect_linear, linearGrad);

    QRadialGradient radialGrad(QPointF(400, 150), 100);
    radialGrad.setColorAt(0, Qt::white);
    radialGrad.setColorAt(0.5, Qt::green);
    radialGrad.setColorAt(1, Qt::black);
    QRect rect_radial(300,50,200,200);
    painter.fillRect(rect_radial, radialGrad);

    QConicalGradient conicalGrad(QPointF(650, 150), 90);
    conicalGrad.setColorAt(0, Qt::white);
    conicalGrad.setColorAt(0.5, Qt::green);
    conicalGrad.setColorAt(1, Qt::black);
    QRect rect_conical(550,50,200,200);
    painter.fillRect(rect_conical, conicalGrad);
}

If we run the code, we get: