Qt to write custom progress bar 40 navigation

I. Introduction

Navigation progress bar control, in fact, control the payment schedule treasure, Jingdong, Taobao order page, suggesting that the current first few steps, total steps, then the current progress of the special color display, each time with the progress of text and other information, this control deliberately three styles are integrated into the style, Jingdong order process style / Taobao order process style / Alipay order flow pattern, can dynamically switch styles, adaptive control any resolution, you can freely adjust its size to accommodate changes in the resolution, a total step steps are automatically calculated and the current ratio of occupied area, directly character information and the like corresponding to the interface setting step, the interface is very friendly.

Second, the realization of functions

• 1: you can set the foreground / background / foreground current value / current value of the background color
• 2: You can set the maximum number of steps and the current first steps
• 3: navigation tag may be provided a text message queue
• 4: You can set three styles Jingdong order flow style / process orders Taobao style / style Alipay order process
• 5: Adaptive Text Size

Third, renderings

Fourth, the header file code

#ifndef NAVPROGRESS_H
#define NAVPROGRESS_H

/**
 * 导航进度条控件 作者:feiyangqingyun(QQ:517216493) 2016-11-29
 * 1:可设置前景色/背景色/当前值前景色/当前值背景色
 * 2:可设置最大步数及当前第几步
 * 3:可设置导航标签队列文字信息
 * 4:可设置三种风格样式 京东订单流程样式/淘宝订单流程样式/支付宝订单流程样式
 * 5:文字自适应大小
 */

#include <QWidget>

#ifdef quc
#if (QT_VERSION < QT_VERSION_CHECK(5,7,0))
#include <QtDesigner/QDesignerExportWidget>
#else
#include <QtUiPlugin/QDesignerExportWidget>
#endif

class QDESIGNER_WIDGET_EXPORT NavProgress : public QWidget
#else
class NavProgress : public QWidget
#endif

{
    Q_OBJECT
    Q_ENUMS(NavStyle)

    Q_PROPERTY(int maxStep READ getMaxStep WRITE setMaxStep)
    Q_PROPERTY(int currentStep READ getCurrentStep WRITE setCurrentStep)
    Q_PROPERTY(NavStyle navStyle READ getNavStyle WRITE setNavStyle)

    Q_PROPERTY(QColor background READ getBackground WRITE setBackground)
    Q_PROPERTY(QColor foreground READ getForeground WRITE setForeground)
    Q_PROPERTY(QColor currentBackground READ getCurrentBackground WRITE setCurrentBackground)
    Q_PROPERTY(QColor currentForeground READ getCurrentForeground WRITE setCurrentForeground)

public:
    enum NavStyle {
        NavStyle_JD = 0,    //京东订单流程样式
        NavStyle_TB = 1,    //淘宝订单流程样式
        NavStyle_ZFB = 2    //支付宝订单流程样式
    };

    explicit NavProgress(QWidget *parent = 0);

protected:
    void paintEvent(QPaintEvent *);
    void drawBg_JD(QPainter *painter);
    void drawText_JD(QPainter *painter);
    void drawCurrentBg_JD(QPainter *painter);
    void drawCurrentText_JD(QPainter *painter);
    void drawBg_TB(QPainter *painter);
    void drawText_TB(QPainter *painter);
    void drawCurrentBg_TB(QPainter *painter);
    void drawBg_ZFB(QPainter *painter);
    void drawText_ZFB(QPainter *painter);
    void drawCurrentBg_ZFB(QPainter *painter);

private:
    QStringList topInfo;            //导航顶部标签数据
    QStringList bottomInfo;         //导航底部标签数据

    int maxStep;                    //最大步数
    int currentStep;                //当前第几步
    NavStyle navStyle;              //导航样式

    QColor background;              //背景色
    QColor foreground;              //前景色
    QColor currentBackground;       //当前背景色
    QColor currentForeground;       //当前前景色

    QFont iconFont;                 //图形字体

public:
    QStringList getTopInfo()        const;
    QStringList getBottomInfo()     const;

    int getMaxStep()                const;
    int getCurrentStep()            const;
    NavStyle getNavStyle()          const;

    QColor getBackground()          const;
    QColor getForeground()          const;
    QColor getCurrentBackground()   const;
    QColor getCurrentForeground()   const;

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

public Q_SLOTS:
    //设置导航顶部标签数据
    void setTopInfo(const QStringList &topInfo);
    //设置导航底部标签数据
    void setBottomInfo(const QStringList &bottomInfo);

    //设置最大步数
    void setMaxStep(int maxStep);
    //设置当前第几步
    void setCurrentStep(int currentStep);
    //设置导航样式
    void setNavStyle(const NavStyle &navStyle);

    //设置前景色
    void setBackground(const QColor &background);
    //设置前景色
    void setForeground(const QColor &foreground);
    //设置当前前景色
    void setCurrentBackground(const QColor &currentBackground);
    //设置当前前景色
    void setCurrentForeground(const QColor &currentForeground);
};

#endif // NAVPROGRESS_H

Fifth, the core code

void NavProgress::paintEvent(QPaintEvent *)
{
    //绘制准备工作,启用反锯齿
    QPainter painter(this);
    painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);

    //根据不一样的样式绘制
    if (navStyle == NavStyle_JD) {
        //绘制背景
        drawBg_JD(&painter);
        //绘制文字
        drawText_JD(&painter);
        //绘制当前背景
        drawCurrentBg_JD(&painter);
        //绘制当前文字
        drawCurrentText_JD(&painter);
    } else if (navStyle == NavStyle_TB) {
        //绘制背景
        drawBg_TB(&painter);
        //绘制文字
        drawText_TB(&painter);
        //绘制当前背景
        drawCurrentBg_TB(&painter);
    } else if (navStyle == NavStyle_ZFB) {
        //绘制背景
        drawBg_ZFB(&painter);
        //绘制文字
        drawText_ZFB(&painter);
        //绘制当前背景
        drawCurrentBg_ZFB(&painter);
    }
}

void NavProgress::drawBg_JD(QPainter *painter)
{
    painter->save();

    //圆半径为高度一定比例,计算宽度,将宽度等分
    int width = this->width() / maxStep;
    int height = this->height() / 2;
    int radius = height / 2;
    int initX = 0;
    int initY = height / 2 + radius / 5;

    //逐个绘制连接线条
    initX = width / 2;

    QPen pen;
    pen.setWidthF((double)radius / 4);
    pen.setCapStyle(Qt::RoundCap);
    pen.setColor(background);
    painter->setPen(pen);
    painter->setBrush(Qt::NoBrush);

    for (int i = 0; i < maxStep - 1; i++) {
        painter->drawLine(QPoint(initX, initY), QPoint(initX + width, initY));
        initX += width;
    }

    //逐个绘制圆
    initX = width / 2;
    painter->setPen(Qt::NoPen);
    painter->setBrush(background);

    for (int i = 0; i < maxStep; i++) {
        painter->drawEllipse(QPoint(initX, initY), radius, radius);
        initX += width;
    }

    //逐个绘制圆中的数字
    initX = width / 2;
    QFont font;
    font.setPixelSize(radius);
    painter->setFont(font);
    painter->setPen(foreground);
    painter->setBrush(Qt::NoBrush);

    for (int i = 0; i < maxStep; i++) {
        QRect textRect(initX - radius, initY - radius, radius * 2, radius * 2);
        painter->drawText(textRect, Qt::AlignCenter, QString::number(i + 1));
        initX += width;
    }

    painter->restore();
}

void NavProgress::drawText_JD(QPainter *painter)
{
    int width = this->width() / maxStep;
    int height = this->height() / 2;
    int initX = 0;
    int initY = height;

    painter->save();
    QFont font;
    font.setPixelSize(height / 3);
    painter->setFont(font);
    painter->setPen(background);
    painter->setBrush(Qt::NoBrush);

    for (int i = 0; i < maxStep; i++) {
        QRect textRect(initX, initY, width, height);
        painter->drawText(textRect, Qt::AlignCenter, topInfo.at(i));
        initX += width;
    }

    painter->restore();
}

Sixth, the controls described

1. More than 149 exquisite control, covers a variety of dashboards, progress bar, the progress of the ball, compass, graphs, scales, thermometers, navigation bar, navigation bar, flatui, highlight the button, slide the selector, the lunar calendar and so on. Qwt far more than the number of controls integration.
2. Each class can be independently as a separate control, zero coupling each control file and a header file to achieve a code amount, independent of other files to facilitate individual control integrated into the project source code form, less. qwt interlocking control class, highly coupled, want to use one of the controls, must contain all the code.
3. Write all pure Qt, QWidget + QPainter to draw, to support any Qt version Qt4.6 Qt5.12, support for mingw, msvc, gcc compiler, etc., support any operating system such as windows + linux + mac + embedded linux, which does not garbled can be directly integrated into Qt Creator, a built-in controls and use the same, most of the effects can be as long as several properties are set, very convenient.
4. DEMO separate source containing the control corresponding to each control has a convenient reference. It also provides integrated use of all controls a DEMO.
5. Source code for each control has detailed Chinese annotation, are prepared in accordance with unified design specifications, easy to learn to write custom controls.
6. Each control default color and demo corresponding color is very beautiful.
7. More than 130 visible control, six invisible control.
8. Portion control provides a variety of styles style selection, multiple choice style indicator.
9. All controls changes adaptive stretched form.
10. Integrated design custom attribute that supports drag design, WYSIWYG support the import and export in xml format.
11. Activex control that comes with demo, all controls can be run directly in the browser ie.
12. Fontawesome integrated graphics font + Alibaba iconfont collection of hundreds of graphic fonts, font fun graphic brings.
13. All controls and finally generate a dll dynamic library files, can be integrated directly into qtcreator designed for use in drag.
14. Already qml version, the latter will consider a pyqt version, if the user is in great demand then.

Seven, SDK download

• SDK download link: https://pan.baidu.com/s/1A5Gd77kExm8Co5ckT51vvQ extraction code: 877p
• Download link is included in the various versions of the dynamic library files, header files of all the controls, the use of demo, custom controls + properties designer.
• Open plug-in custom dynamic library dll use (permanent free), and the back door without any restrictions, ease of use.
• 26 now available version dll, which includes qt5.12.3 msvc2017 32 + 64 mingw 32 + 64 in.
• From time to time to increase control and improve controls, regularly updated SDK, to welcome all suggestions, thank you!
• widget versions (QQ: 517216493) qml versions (QQ: 373955953) sambong camel (QQ: 278969898).
• Qt's advanced column know almost Taoge road https://zhuanlan.zhihu.com/TaoQt
• Welcome concern public micro-channel number] [efficient programmers, content C ++ / Python, learning, writing skills, popular technology, career development, a lot of dry goods, benefits a lot!