Qt Write Custom Control 48-Panel Form Control

Keywords: Mobile Qt Qt5 Linux SDK

1. Preface

Many times you need a control that can replace the container control, automatically accommodate multiple widget s, adjust the width and height, and then provide scrollbar function, which necessarily requires the QScrollArea control, can set the spacing between subpanels, and so on. It is also used in many systems, such as temperature and humidity device panels, with hundreds of temperature and humidity panels.Degree device, which requires a container placement, automatically generates scrollbars, which can set the fixed width and height of the panel or stretch adaptively, is actually set with a table layout + spring. QListWidget provides similar functionality in later studies of Qt built-in controls, so some later scenarios use QListWidget directly.

2. Functions realized

  • 1: Caption bar text/height/font/alignment/color can be set
  • 2:Settable border width/border rounded angle/border color
  • 3:Alarm color switch interval/Alarm darkening color/Alarm normal color can be set
  • 4: Text and border colors can be set when enabled and disabled

3. Effect Charts

4. Header File Code


 * Author of panel area control: feiyangqingyun(QQ:517216493) 2017-10-21
 * 1:Caption bar text/height/font/alignment/color can be set
 * 2:Settable border width/border rounded angle/border color
 * 3:Can set alarm color switch interval/alarm darkening color/alarm normal color
 * 4:Text and border colors can be set when enabled and disabled

#include <QWidget>

class QTimer;

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

class QDESIGNER_WIDGET_EXPORT PanelItem : public QWidget
class PanelItem : public QWidget


    Q_PROPERTY(int titleHeight READ getTitleHeight WRITE setTitleHeight)
    Q_PROPERTY(QString titleText READ getTitleText WRITE setTitleText)
    Q_PROPERTY(QFont titleFont READ getTitleFont WRITE setTitleFont)
    Q_PROPERTY(Alignment titleAlignment READ getTitleAlignment WRITE setTitleAlignment)
    Q_PROPERTY(QColor titleColor READ getTitleColor WRITE setTitleColor)
    Q_PROPERTY(QColor titleDisableColor READ getTitleDisableColor WRITE setTitleDisableColor)

    Q_PROPERTY(int borderWidth READ getBorderWidth WRITE setBorderWidth)
    Q_PROPERTY(int borderRadius READ getBorderRadius WRITE setBorderRadius)
    Q_PROPERTY(QColor borderColor READ getBorderColor WRITE setBorderColor)
    Q_PROPERTY(QColor borderDisableColor READ getBorderDisableColor WRITE setBorderDisableColor)

    Q_PROPERTY(int alarmInterval READ getAlarmInterval WRITE setAlarmInterval)
    Q_PROPERTY(QColor alarmTextColor READ getAlarmTextColor WRITE setAlarmTextColor)
    Q_PROPERTY(QColor alarmDarkColor READ getAlarmDarkColor WRITE setAlarmDarkColor)
    Q_PROPERTY(QColor alarmNormalColor READ getAlarmNormalColor WRITE setAlarmNormalColor)

    Q_PROPERTY(bool isAlarm READ getIsAlarm WRITE setAlarm)
    Q_PROPERTY(bool isEnable READ getIsEnable WRITE setEnable)

    enum Alignment {
        Alignment_Left = 0,     //Left Alignment
        Alignment_Center = 1,   //Center Alignment
        Alignment_Right = 2     //Right alignment

    explicit PanelItem(QWidget *parent = 0);

    void paintEvent(QPaintEvent *);
    void drawBorder(QPainter *painter);
    void drawTitle(QPainter *painter);

    int titleHeight;                //Title Height
    QString titleText;              //Title Text
    QFont titleFont;                //Title Font
    Alignment titleAlignment;       //Title alignment
    QColor titleColor;              //Title color
    QColor titleDisableColor;       //Disabled Text Color

    int borderWidth;                //Border Width
    int borderRadius;               //Border rounded angle
    QColor borderColor;             //Border color
    QColor borderDisableColor;      //Disabled border color

    int alarmInterval;              //Alarm switch interval
    QColor alarmTextColor;          //Alarm text color
    QColor alarmDarkColor;          //Alarm darker color
    QColor alarmNormalColor;        //Alarm normal color

    bool isAlarm;                   //Whether to Alarm
    bool isEnable;                  //Is it enabled

    bool isDark;                    //Is it deeper
    QColor tempColor;               //Temporary color
    QTimer *timer;                  //Alarm switch timer

    int getTitleHeight()            const;
    QString getTitleText()          const;
    QFont getTitleFont()            const;
    Alignment getTitleAlignment()   const;
    QColor getTitleColor()          const;
    QColor getTitleDisableColor()   const;

    int getBorderWidth()            const;
    int getBorderRadius()           const;
    QColor getBorderColor()         const;
    QColor getBorderDisableColor()  const;

    int getAlarmInterval()          const;
    QColor getAlarmTextColor()      const;
    QColor getAlarmDarkColor()      const;
    QColor getAlarmNormalColor()    const;

    bool getIsAlarm()               const;
    bool getIsEnable()              const;

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

private slots:
    void checkAlarm();

public Q_SLOTS:
    //Set alarm status
    void setAlarm(bool alarm);
    //Set Enabled State
    void setEnable(bool enable);

    //Set Title Bar Height
    void setTitleHeight(int titleHeight);
    //Set caption text
    void setTitleText(const QString &titleText);
    //Set title font
    void setTitleFont(const QFont &titleFont);
    //Set title text alignment
    void setTitleAlignment(const Alignment &titleAlignment);
    //Set title text color
    void setTitleColor(const QColor &titleColor);
    //Set caption text color when disabled
    void setTitleDisableColor(const QColor &titleDisableColor);

    void setBorderWidth(int borderWidth);
    //Set border rounded angle
    void setBorderRadius(int borderRadius);
    void setBorderColor(const QColor &borderColor);
    //Set disabled border color
    void setBorderDisableColor(const QColor &borderDisableColor);

    //Set alarm switch interval
    void setAlarmInterval(int alarmInterval);
    //Set alarm text color
    void setAlarmTextColor(const QColor &alarmTextColor);
    //Set alarm darkening color
    void setAlarmDarkColor(const QColor &alarmDarkColor);
    //Set alarm normal color
    void setAlarmNormalColor(const QColor &alarmNormalColor);


#endif // PANELFRAME_H

5. Core Code

void PanelItem::paintEvent(QPaintEvent *)
    //Drawing preparation, anti-aliasing enabled
    QPainter painter(this);
    painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);

    //bound box
    //Draw title

void PanelItem::drawBorder(QPainter *painter)
    if (borderWidth <= 0) {


    QPen pen;

    QRect rect(borderWidth / 2, borderWidth / 2, width() - borderWidth, height() - borderWidth);
    painter->drawRoundedRect(rect, borderRadius, borderRadius);


void PanelItem::drawTitle(QPainter *painter)


    int offset = borderWidth - borderWidth / 3;
    QRect rect(offset, offset, width() - offset * 2, titleHeight);

    //Draw caption text
    if (isEnable) {
        painter->setPen(isAlarm ? alarmTextColor : titleColor);
    } else {


    //Text area to recalculate
    offset = borderWidth * 3;
    QRect textRect(offset, 0, width() - offset * 2, titleHeight);

    Qt::Alignment align;
    if (titleAlignment == Alignment_Left) {
        align = Qt::AlignLeft | Qt::AlignVCenter;
    } else if (titleAlignment == Alignment_Center) {
        align = Qt::AlignHCenter | Qt::AlignVCenter;
    } else if (titleAlignment == Alignment_Right) {
        align = Qt::AlignRight | Qt::AlignVCenter;

    painter->drawText(textRect, align, titleText);


6. Introduction to Controls

  1. Over 150 beautiful controls, including dashboards, progress bars, progress balls, compasses, curves, rulers, thermometers, navigation bars, navigation bars, flatui, highlight buttons, slide selectors, lunar calendar, etc.Far more than qwt integrated controls.
  2. Each class can be separated into a single control, with zero coupling, a header file and an implementation file for each control, independent of other files, so that a single control can be integrated into the project as a source code with less code.qwt's control classes are linked and highly coupled. To use one of these controls, you must include all the code.
  3. All pure Qt writing, QWidget+QPainter drawing, support any Qt version from Qt4.6 to Qt5.12, support compilers such as mingw, msvc, gcc, support any operating system such as windows+linux+mac+embedded linux, no scrambling, can be directly integrated into Qt Creator, like its own controls, most of the effects as long as setA few attributes are very convenient.
  4. Each control has a corresponding separate DEMO containing its source code for easy reference.It also provides an integrated DEMO used by all controls.
  5. Each control's source code has detailed Chinese comments, which are written in accordance with the uniform design specifications to facilitate learning how to write custom controls.
  6. The default and demo colors for each control are beautiful.
  7. More than 130 visible controls and 6 invisible controls.
  8. Some controls offer a variety of style choices and indicator style choices.
  9. All controls adapt to form stretch changes.
  10. Integrates custom control property designer, supports drag design, what you see is what you get, and supports import and export xml formats.
  11. With its own activex control demo, all controls can run directly in the ie browser.
  12. Integrate fontawesome graphics fonts + several hundred graphics fonts from Alibaba iconfont collection to enjoy graphics fonts.
  13. All controls end up with a dynamic library file (dll or so, etc.) that can be integrated directly into the qtcreator and dragged for design use.
  14. There is already a qml version, and the pyqt version will be considered later if there is a large user demand.
  15. Custom Control Plugins open dynamic library for use (permanently free) without any backdoors or restrictions, please use with confidence.
  16. There are currently 26 versions of dll available, including qt5.12.3 msvc2017 32+64 mingw 32+64.
  17. Add controls and improve controls at irregular intervals, update SDK at irregular intervals, welcome to make suggestions, thank you!
  18. Qt introductory books recommend Hoyafei's Quick Start Qt Creator, Getting Started with Qt5 Programming, and Qt advanced books recommend the official C++ GUI Qt4 Programming.
  19. It is highly recommended that programmers self-cultivate and plan series "Talking Programmers", "Programmers'Growth Class" and "Relieving Programmers", which benefits a lot and benefits for a lifetime!
  20. SDK Download Link: https://pan.baidu.com/s/1A5Gd77kExm8Co5ckT51vvQ Extraction code: 877p
  21. The download link includes various versions of dynamic library files, header files for all controls, demo, custom controls + property designer.
  22. widget version (QQ:517216493) qml version (QQ:373955953) three-camel (QQ:278969898).
  23. Taoge's Knowledge Column Qt Road to Advancement https://zhuanlan.zhihu.com/TaoQt
  24. Welcome to the WeChat Public Number, C++/Python, learning methods, writing skills, popular technologies, career development and so on. There are lots of dry goods and benefits!

Posted by Mercenary on Sun, 11 Aug 2019 13:53:20 -0700