Qt writing custom control 72 prompt progress bar

Keywords: Mobile Qt Qt5 Linux SDK

I. Preface

In many installation packages, in the installation process, we can often see a beautiful progress bar at the bottom, which is suspended to display the corresponding progress, and then the bottom progress is displayed in a variety of color gradients. The progress bar provided by Qt or the progress bar style of the operating system is not dazzling. This time, it is simply a custom drawing implementation. As for whether to inherit the QWidget class or qprogre The ssbar class doesn't matter. If it inherits from the QWidget class, you need to set the maximum value and the minimum value range. If it inherits from the QProgressBar class, you can directly use your own functions. The background color of the progress bar and the prompt message is exactly the same as the following progress color.

II. Functions realized

  • 1: minimum value / maximum value / range value / current value can be set
  • 2: can set whether the percentage display
  • 3: the margin can be set to prevent the prompt information from running outside.
  • 4: the progress color can be set, which can be a gradient brush.
  • 5: background color / text color / prompt background can be set
  • 6: fillet angle can be set
  • 7: if the progress brush is set, the background will be prompted to use the brush.

III. renderings

IV. header file code


 * Prompt progress bar control Author: feiyangqingyun (QQ: 517216493) October 5, 2019
 * 1:Minimum / maximum / range / current value can be set
 * 2:Percentage display can be set
 * 3:The margin can be set to prevent the prompt information from running out.
 * 4:The color of the progress can be set. It can be a gradient brush.
 * 5:Background color / text color / prompt background can be set
 * 6:Fillet angle can be set
 * 7:If the progress brush is set, the background will be prompted to use the brush as well.

#include <QWidget>

#ifdef quc
#include <QtDesigner/QDesignerExportWidget>
#include <QtUiPlugin/QDesignerExportWidget>

class QDESIGNER_WIDGET_EXPORT ProgressTip : public QWidget
class ProgressTip : public QWidget

    Q_PROPERTY(double minValue READ getMinValue WRITE setMinValue)
    Q_PROPERTY(double maxValue READ getMaxValue WRITE setMaxValue)
    Q_PROPERTY(double value READ getValue WRITE setValue)

    Q_PROPERTY(bool percent READ getPercent WRITE setPercent)
    Q_PROPERTY(int padding READ getPadding WRITE setPadding)
    Q_PROPERTY(int radius READ getRadius WRITE setRadius)

    Q_PROPERTY(QBrush valueBrush READ getValueBrush WRITE setValueBrush)
    Q_PROPERTY(QColor valueColor READ getValueColor WRITE setValueColor)
    Q_PROPERTY(QColor bgColor READ getBgColor WRITE setBgColor)
    Q_PROPERTY(QColor tipColor READ getTipColor WRITE setTipColor)
    Q_PROPERTY(QColor textColor READ getTextColor WRITE setTextColor)

    explicit ProgressTip(QWidget *parent = 0);

    void paintEvent(QPaintEvent *);    
    void drawBg(QPainter *painter);
    void drawTip(QPainter *painter);
    void drawValue(QPainter *painter);

    double minValue;            //minimum value
    double maxValue;            //Maximum value
    double value;               //target value

    bool percent;               //Percentage display
    int padding;                //Margin
    int radius;                 //Fillet angle

    QBrush valueBrush;          //Progress brush
    QColor valueColor;          //Schedule color
    QColor bgColor;             //background color
    QColor tipColor;            //Prompt background color
    QColor textColor;           //Text color

    double getMinValue()        const;
    double getMaxValue()        const;
    double getValue()           const;

    bool getPercent()           const;
    int getPadding()            const;
    int getRadius()             const;

    QBrush getValueBrush()      const;
    QColor getValueColor()      const;
    QColor getBgColor()         const;
    QColor getTipColor()        const;
    QColor getTextColor()       const;

    QSize sizeHint()            const;
    QSize minimumSizeHint()     const;

public Q_SLOTS:
    //Set range value
    void setRange(double minValue, double maxValue);
    void setRange(int minValue, int maxValue);

    //Set max min
    void setMinValue(double minValue);
    void setMaxValue(double maxValue);

    //Set target value
    void setValue(double value);
    void setValue(int value);

    //Set percentage display
    void setPercent(bool percent);
    //Setting margins
    void setPadding(int padding);
    //Set fillet angle
    void setRadius(int radius);

    //Set progress brush + progress color + background color + prompt background + text color
    void setValueBrush(const QBrush &valueBrush);
    void setValueColor(const QColor &valueColor);
    void setBgColor(const QColor &bgColor);
    void setTipColor(const QColor &tipColor);
    void setTextColor(const QColor &textColor);

    void valueChanged(double value);


V. core code

void ProgressTip::paintEvent(QPaintEvent *)
    //Draw preparation, enable anti aliasing, translate axis center, and scale equally
    QPainter painter(this);
    painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);

    //Drawing background
    //Draw the upper part of the prompt
    //Drawing progress

void ProgressTip::drawBg(QPainter *painter)

    QRect rect(padding, (height() / 3) * 2, width() - padding * 2, height() / 3);
    painter->drawRoundedRect(rect, radius, radius);


void ProgressTip::drawTip(QPainter *painter)
    painter->setBrush(valueBrush == Qt::NoBrush ? tipColor : valueBrush);

    //Calculate the percentage corresponding to the current value
    double step = value / (maxValue - minValue);
    int progress = (width() - padding * 2) * step;

    //Draw the upper part of the prompt information background
    QRect rect(progress, 0, padding * 2, (double)height() / 2.1);
    painter->drawRoundedRect(rect, 2, 2);

    //Draw inverted triangle
    int centerX = rect.center().x();
    int initY = rect.height();
    int offset = 5;
    QPolygon pts;
    pts.append(QPoint(centerX - offset, initY));
    pts.append(QPoint(centerX + offset, initY));
    pts.append(QPoint(centerX, initY + offset));

    //Draw text
    QString strValue;
    if (percent) {
        double temp = value / (maxValue - minValue) * 100;
        strValue = QString("%1%").arg(temp, 0, 'f', 0);
    } else {
        strValue = QString("%1").arg((double)value, 0, 'f', 0);

    painter->drawText(rect, Qt::AlignCenter, strValue);


void ProgressTip::drawValue(QPainter *painter)

    //If the brush is defined, the brush will be used to form a gradient effect.
    painter->setBrush(valueBrush == Qt::NoBrush ? valueColor : valueBrush);

    //Calculate the percentage corresponding to the current value
    double step = value / (maxValue - minValue);
    int progress = (width() - padding * 2) * step;

    QRect rect(padding, (height() / 3) * 2, progress, height() / 3);
    painter->drawRoundedRect(rect, radius, radius);


Vi. control introduction

  1. More than 160 exquisite controls, covering a variety of dashboards, progress bars, progress balls, compass, curves, ruler, thermometer, navigation bar, navigation bar, flatui, highlight button, slide selector, lunar calendar, etc. Far more controls than qwt integrates.
  2. Each class can be independent into a separate control, zero coupling, each control a header file and an implementation file, does not rely on other files, convenient for a single control in the form of source code integration into the project, less code. qwt's control classes are closely linked and highly coupled. If you want to use one of them, you must include all the code.
  3. All pure Qt writing, QWidget+QPainter drawing, support any Qt version from Qt4.6 to Qt5.13, support mingw, msvc, gcc and other compilers, support any operating system, such as windows+linux+mac + embedded linux, etc., without random code, can be directly integrated into Qt creator, and use the same as the control, most of the effects only need to set a few attributes, which is extremely convenient.
  4. Each control has a corresponding separate DEMO containing the source code of the control, which is convenient for reference. An integrated DEMO for all controls is also provided.
  5. The source code of each control has a detailed Chinese annotation, which is written in accordance with the unified design specification, so it is convenient to learn how to write a custom control.
  6. Each control's default color and the color corresponding to the demo are very elegant.
  7. More than 130 visible controls and 6 invisible controls.
  8. Some controls provide a variety of style choices, a variety of indicator style choices.
  9. All controls adapt to form stretch changes.
  10. Integrated custom control property designer, support drag design, WYSIWYG, import and export xml format.
  11. With activex control demo, all controls can run directly in ie browser.
  12. Integrate fontawesome graphic fonts + hundreds of graphic fonts collected by Alibaba iconfont to enjoy the fun of graphic fonts.
  13. Finally, all the controls generate a dynamic library file (dll or so, etc.), which can be directly integrated into qtcreator for drag design.
  14. At present, qml version is available, and pyqt version will be considered later, if the user demand is large.
  15. The custom control plug-in is open to dynamic library (free forever), without any back door and restrictions. Please feel free to use it.
  16. At present, 32 versions of dll have been provided, of which QT ﹣ 5 ﹣ 7 ﹣ 0 ﹣ mingw530 ﹣ 32 will always be the latest and complete version.
  17. Add controls and improve controls irregularly, update SDK irregularly, welcome to make suggestions, thank you!
  18. The QT introduction books recommend Huo Yafei's "Qt Creator quick start", "Qt5 Programming Introduction", and the QT advanced books recommend the official "C++ GUI Qt4 programming".
  19. It is highly recommended that the self-cultivation and Planning Series "talkative programmer", "programmer's growth course" and "worry free programmer" benefit a lot and benefit a lifetime!
  20. SDK address: https://gitee.com/feiyangqingyun/QUCSDK https://github.com/feiyangqingyun/qucsdk

Posted by chacha102 on Wed, 16 Oct 2019 18:56:43 -0700