I. Introduction

The vertical timeline control is mainly used to describe major events in the development process of an enterprise, or the history of software version iterations, etc. It intuitively displays the development process through time nodes and event descriptions. Generally, this type of control is often seen on web pages or apps. Especially the company part of the company's official website focuses on some unicorn companies or companies that are booming to show how awesome they are and how rapidly they are developing.
The vertical timeline control mainly stores two data, one is the time node, and the other is the event description. For later scalability, a structure is used to store this data. For example, in the later stage, it may be added whether the event is a major event mark, yes If it is drawn, it will be highlighted when drawing, such as increasing the font size and bolding. The main difficulty of this control is to automatically calculate and arrange to draw the time and event description. The default mechanism of equal division is used to handle drawing, and some timeline controls are left Event description on the right side of the time. This can be changed or added in style based on the source code. In order to be able to display all events, the main body of this control is inherited from the scroll bar area control, and a scroll bar is automatically generated when the height is exceeded.

2. Functions implemented

1: Node margins can be set
2: Node height can be set
3: Information border margin can be set
4: The height of the information can be set
5: Base color/line color can be set
6: Title/information collection can be set
7: Automatically generate scroll bars
8: Support setting data in string form

3. Effect drawing

4. Header file code

#ifndef TIMEAXIS_H
#define TIMEAXIS_H

/**
 * 垂直时间轴控件 作者:雨田哥(QQ:3246214072) 整理:feiyangqingyun(QQ:517216493) 2019-10-07
 * 1:可设置节点边距
 * 2:可设置节点高度
 * 3:可设置信息边框边距
 * 4:可设置信息所占高度
 * 5:可设置基准颜色/线条颜色
 * 6:可设置标题/信息集合
 * 7:自动产生滚动条
 * 8:支持字符串形式设置数据
 */

#include <QScrollArea>
class TimeAxisWidget;

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

class QDESIGNER_WIDGET_EXPORT TimeAxis : public QScrollArea
#else
class TimeAxis : public QScrollArea
#endif

{
    Q_OBJECT
    Q_PROPERTY(int itemMargin READ getItemMargin WRITE setItemMargin)
    Q_PROPERTY(int itemHeight READ getItemHeight WRITE setItemHeight)
    Q_PROPERTY(int infoPadding READ getInfoPadding WRITE setInfoPadding)
    Q_PROPERTY(int infoHeight READ getInfoHeight WRITE setInfoHeight)

    Q_PROPERTY(QColor baseColor READ getBaseColor WRITE setBaseColor)
    Q_PROPERTY(QColor lineColor READ getLineColor WRITE setLineColor)

    Q_PROPERTY(QString title READ getTitle WRITE setTitle)
    Q_PROPERTY(QString infos READ getInfos WRITE setInfos)

public:
    explicit TimeAxis(QWidget *parent = 0);

private:
    int itemMargin;         //节点边距
    int itemHeight;         //节点高度
    int infoPadding;        //信息边距
    int infoHeight;         //信息高度

    QColor baseColor;       //基准颜色
    QColor lineColor;       //线条颜色

    QString title;          //标题
    QString infos;          //信息集合

    //时间轴主控件
    TimeAxisWidget *timeAxisWidget;

public:
    int getItemMargin()     const;
    int getItemHeight()     const;
    int getInfoPadding()    const;
    int getInfoHeight()     const;

    QColor getBaseColor()   const;
    QColor getLineColor()   const;

    QString getTitle()      const;
    QString getInfos()      const;

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

    TimeAxisWidget *getWidget();

public Q_SLOTS:
    //设置节点边距+节点高度
    void setItemMargin(int itemMargin);
    void setItemHeight(int itemHeight);

    //设置信息边距+信息高度
    void setInfoPadding(int infoPadding);
    void setInfoHeight(int infoHeight);

    //设置基准颜色+线条颜色
    void setBaseColor(const QColor &baseColor);
    void setLineColor(const QColor &lineColor);

    //设置标题+信息集合
    void setTitle(const QString &title);
    void setInfos(const QString &infos);
};

class TimeAxisWidget : public QWidget
{
    Q_OBJECT

public:
    //可以自行拓展其他信息
    struct TimeAxisInfo {
        QString time;   //时间
        QString info;   //信息
    };

    explicit TimeAxisWidget(QWidget *parent = 0);

protected:
    void paintEvent(QPaintEvent *);
    void drawTitle(QPainter *painter);
    void drawLine(QPainter *painter);
    void drawInfo(QPainter *painter);
    void drawInfoRight(QPainter *painter, const QRectF &infoRect, int infoHeight);
    void drawInfoLeft(QPainter *painter, const QRectF &infoRect, int infoHeight);

private:
    int itemMargin;         //节点边距
    int itemHeight;         //节点高度
    int infoPadding;        //信息边距
    int infoHeight;         //信息高度

    QColor baseColor;       //基准颜色
    QColor lineColor;       //线条颜色

    QString title;          //标题
    QString infos;          //信息集合

    //信息集合结构体
    QList<TimeAxisInfo> itemInfos;

public:
    int getItemMargin()     const;
    int getItemHeight()     const;
    int getInfoPadding()    const;
    int getInfoHeight()     const;

    QColor getBaseColor()   const;
    QColor getLineColor()   const;

    QString getTitle()      const;
    QString getInfos()      const;

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

public Q_SLOTS:
    //设置节点边距+节点高度
    void setItemMargin(int itemMargin);
    void setItemHeight(int itemHeight);

    //设置信息边距+信息高度
    void setInfoPadding(int infoPadding);
    void setInfoHeight(int infoHeight);

    //设置基准颜色+线条颜色
    void setBaseColor(const QColor &baseColor);
    void setLineColor(const QColor &lineColor);

    //设置标题+信息集合
    void setTitle(const QString &title);
    void setInfos(const QString &infos);

    //设置信息集合,结构体方式
    void setItemInfos(const QList<TimeAxisInfo> &itemInfos);
};

#endif // TIMEAXIS_H

As a benefit for this article, you can receive a Qt development learning package and technical videos for free, including (C++ language basics, introduction to Qt programming, QT signal and slot mechanism, QT interface development-image drawing, QT network, QT database programming, QT project practice , QT embedded development, Quick module, etc.) ↓↓↓↓↓↓See below↓↓Click at the bottom of the article to receive the fee↓↓

5. Core code

void TimeAxisWidget::drawTitle(QPainter *painter)
{
    painter->save();

    QFont font;
    font.setBold(true);
    font.setPointSize(16);
    painter->setFont(font);

    painter->setPen(baseColor);
    painter->drawText(itemMargin, itemMargin, width() - 2 * itemMargin, 40, Qt::AlignCenter, title);

    painter->restore();
}

void TimeAxisWidget::drawLine(QPainter *painter)
{
    painter->save();
    painter->setPen(QPen(lineColor, 6));
    int startY = itemMargin + 50;
    int endY = startY + itemInfos.size() * itemHeight;
    painter->drawLine(width() / 2.0, startY, width() / 2.0, endY);
    painter->restore();

    //设置下固定高度
    this->setFixedHeight(endY + itemMargin);
}

void TimeAxisWidget::drawInfo(QPainter *painter)
{
    painter->save();
    painter->setPen(Qt::NoPen);

    QFont font;
    font.setPointSize(12);
    painter->setFont(font);

    int startY = itemMargin + 50;
    int centerX = this->width() / 2.0;
    int spacer = itemMargin + 10;

    //追个绘制时间轴信息集合,偶数行左侧绘制时间右侧绘制信息
    for (int i = 0; i < itemInfos.size(); i++) {
        painter->setBrush(Qt::white);
        painter->setPen(QPen(baseColor, 2));

        if (i % 2 == 0) {
            //绘制时间
            QRectF textRect(0, startY, centerX - spacer, itemHeight);
            painter->drawText(textRect, Qt::AlignRight | Qt::AlignVCenter, itemInfos.at(i).time);
            //绘制信息边框
            QRectF infoRect(centerX + spacer, textRect.center().y() - infoHeight / 2.0, centerX - spacer - itemMargin - infoHeight / 2.0, infoHeight);
            drawInfoRight(painter, infoRect, infoHeight);
            //绘制信息背景
            painter->setBrush(baseColor);
            drawInfoRight(painter, infoRect.adjusted(infoPadding, infoPadding, 0, -infoPadding), infoHeight - infoPadding * 2);
            //绘制信息文字
            painter->setPen(Qt::white);
            painter->drawText(infoRect.adjusted(infoPadding, infoPadding, 0, -infoPadding), Qt::AlignCenter, itemInfos.at(i).info);
        } else {
            //绘制时间
            QRectF textRect(centerX + spacer, startY, centerX - spacer, itemHeight);
            painter->drawText(centerX + spacer, startY, centerX - spacer, itemHeight, Qt::AlignLeft | Qt::AlignVCenter, itemInfos.at(i).time);
            //绘制信息边框
            QRectF infoRect(itemMargin + infoHeight / 2.0, textRect.center().y() - infoHeight / 2.0, centerX - spacer - itemMargin - infoHeight / 2.0, infoHeight);
            drawInfoLeft(painter, infoRect, infoHeight);
            //绘制信息背景
            painter->setBrush(baseColor);
            drawInfoLeft(painter, infoRect.adjusted(0, infoPadding, -infoPadding, -infoPadding), infoHeight - infoPadding * 2);
            //绘制信息文字
            painter->setPen(Qt::white);
            painter->drawText(infoRect.adjusted(0, infoPadding, -infoPadding, -infoPadding), Qt::AlignCenter, itemInfos.at(i).info);
        }

        //绘制垂直线对应的圆
        painter->setPen(Qt::NoPen);
        painter->setBrush(baseColor);
        painter->drawEllipse(centerX - 8, startY + itemHeight / 2.0 - 8, 16, 16);
        painter->setBrush(Qt::white);
        painter->drawEllipse(centerX - 4, startY + itemHeight / 2.0 - 4, 8, 8);

        //Y轴往下移一个高度
        startY += itemHeight;
    }

    painter->restore();
}

6. Control introduction

More than 160 exquisite controls, covering various dashboards, progress bars, progress balls, compasses, curves, rulers, thermometers, navigation bars, navigation bars, flatui, highlight buttons, sliding selectors, lunar calendar, etc. Far exceeds the number of controls integrated by qwt.
Each class can be independently formed into a separate control, with zero coupling. Each control has a header file and an implementation file, and does not rely on other files. It is convenient for a single control to be integrated into the project in the form of source code, with less code. The control classes of qwt are interlocking and highly coupled. If you want to use one of the controls, you must include all the code.
All written in pure Qt, drawn by QWidget+QPainter, supports any Qt version from Qt4.6 to Qt5.13, supports compilers such as mingw, msvc, gcc, etc., and supports any operating system such as windows+linux+mac+embedded linux, etc., without garbled code , can be directly integrated into Qt Creator and used like the built-in controls. Most effects only need to set a few properties, which is extremely convenient.
Each control has a corresponding separate DEMO containing the source code of the control for easy reference and use. It also provides an integrated DEMO used by all controls.
The source code of each control has detailed Chinese comments and is written in accordance with unified design specifications, making it easy to learn how to write custom controls.
The default color matching of each control and the color matching corresponding to the demo are very exquisite.
More than 130 visible controls and 6 invisible controls.
Some controls provide multiple style choices and multiple indicator style choices.
All controls adapt to form stretch changes.
Integrated custom control attribute designer, supports drag and drop design, WYSIWYG, supports import and export of xml format.
Comes with activex control demo, all controls can be run directly in the IE browser.
Integrate fontawesome graphic fonts + hundreds of graphic fonts collected by Alibaba iconfont, and enjoy the fun brought by graphic fonts.
All controls finally generate a dynamic library file (dll or so, etc.), which can be directly integrated into qtcreator for drag and drop design.
There is already a qml version, and a pyqt version will be considered later if there is great demand from users.
The custom control plug-in is open to dynamic library use (free forever), without any backdoors or restrictions, so please feel free to use it.
Currently, 32 versions of dll have been provided, among which the version qt_5_7_0_mingw530_32 will always be guaranteed to be the latest and complete.
Controls are added and improved from time to time, and the SDK is updated from time to time. Suggestions are welcome, thank you!
For introductory Qt books, we recommend Huo Yafei's "Quick Start with Qt Creator" and "Introduction to Qt5 Programming". For advanced Qt books, we recommend the official "C++ GUI Qt4 Programming".
I highly recommend the series of self-cultivation and planning books for programmers, "The Big Talk Programmer", "Programmer's Growth Course", and "The Worry-Relieving Programmer", which will benefit you a lot and will last a lifetime!
SDK address: https://gitee.com/feiyangqingyun/QUCSDK https://github.com/feiyangqingyun/qucsdk

Original link: https://www.cnblogs.com/feiyangqingyun/p/11639987.html