Qt vertical axis write custom 64-

I. Introduction

Vertical axis control, mainly used to describe the development process of large corporate event, or software version iteration history, intuitive process to show the development of the events described by the time node and, in general in a web page or app often see such controls, in particular, the company's official gateway to the part of the company, we are looking at the unicorn company or the company is in a booming, to show yourself more Niubi, how rapid development.
Data stored in the main vertical axis comprises two controls, is a time node, an event is described, in order to expand later-on used to store this data structure, such may also increase the post-event is of major event marker is when it is drawn bold highlight such size increase, the main difficulty is that the controls are arranged to draw and automatically calculates the time and event description, use of the default mechanism to handle rendering aliquot, and the left part of the timeline control time on the right side of the events described, this can change or add their own style based on the source code, in order to be able to show all events, this control is inherited from the main area of the scroll bar control, automatically generated exceed the height of the scroll bar.

Second, the realization of functions

1: the node can set margins
2: the node can set the height
3: You can set margins border information
4: You can set the height share information
5: can be set to a reference color / Color Line
6: The title may be provided / information
7: Auto-generated scroll bars
8: Support setting data string

Third, renderings

Fourth, the 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

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

Sixth, the controls described

More than 160 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.
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.
Write all pure Qt, QWidget + QPainter to draw, to support any Qt version Qt4.6 Qt5.13, 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.
DEMO separate source containing the control corresponding to each control has a convenient reference. It also provides integrated use of all controls a DEMO.
Source code for each control has detailed Chinese annotation, are prepared in accordance with unified design specifications, easy to learn to write custom controls.
Each control default color and demo corresponding color is very beautiful.
More than 130 visible control, six invisible control.
Portion control provides a variety of styles style selection, multiple choice style indicator.
All controls changes adaptive stretched form.
Integrated design custom attribute that supports drag design, WYSIWYG support the import and export in xml format.
Activex control that comes with demo, all controls can be run directly in the browser ie.
Fontawesome integrated graphics font + Alibaba iconfont collection of hundreds of graphic fonts, font fun graphic brings.
All controls and finally generate a dynamic library files (dll or so, etc.) can be integrated directly into qtcreator designed for use in drag.
Already qml version, the latter will consider a pyqt version, if the user is in great demand then.
Custom plug-in open dynamic library (permanent free), and the back door without any restrictions, ease of use.
Now offers 32 versions of the dll, which qt_5_7_0_mingw530_32 this version will always ensure that the latest complete.
From time to time to increase control and improve controls, regularly updated SDK, to welcome all suggestions, thank you!
Qt introductory books recommended Huo Yafei of "Qt Creator Quick Start" "Qt5 programming entry", Qt official Advanced book recommendations "C ++ GUI Qt4 programming."
Highly recommended programmer self-discipline and planning book series "lying programmer" "Programmer's growth course", "grief programmer", benefited from a lifetime!
SDK Address: https://gitee.com/feiyangqingyun/QUCSDK https://github.com/feiyangqingyun/qucsdk