Shulou(Shulou.com)06/02 Report--

Today, I will talk to you about how to realize the progress bar of Qt tips. Many people may not know much about it. In order to make you understand better, the editor has summarized the following contents for you. I hope you can get something according to this article.

I. Preface

In many installation packages, during the installation process, we can often see a beautiful progress bar at the bottom, which is suspended to show the corresponding progress, and then the bottom progress shows a variety of color gradients. The progress bar included in Qt or the progress bar style of the operating system is not cool enough, so this time we just have a custom drawing implementation directly. It doesn't matter whether we inherit the QWidget class or the QProgressBar class, if it is inherited from the QWidget class. You need to set the maximum and minimum range values yourself, and if you inherit from QProgressBar, you can directly use your own function to achieve it. In this progress bar, the background color of the prompt message is exactly the same as the following progress color.

Second, the functions realized

1: minimum / maximum / range / current value can be set

2: whether the percentage is displayed can be set.

3: the margin can be set to prevent the prompt from running out of the gap.

4: can set the progress of the color, can be a gradient brush

5: background color / text color / prompt background can be set.

6: fillet angle can be set

7: if a progress brush is set, it will prompt the background to use the same brush.

Third, effect picture

IV. Header file code

# ifndef PROGRESSTIP_H#define PROGRESSTIP_H/** * prompt progress bar control author: feiyangqingyun (QQ:517216493) 2019-10-05 * 1: minimum value / maximum value / range value / current value * 2: configurable percentage display * 3: margin can be set to prevent prompt messages from flowing out of the gap * 4: colors that can be set for progress Can be gradient brush * 5: background color / text color / prompt background can be set * 6: fillet angle can be set * 7: if a progress brush is set, the background is also prompted to use this brush * / # include # ifdef quc#if (QT_VERSION

< QT_VERSION_CHECK(5,7,0))#include #else#include #endifclass QDESIGNER_WIDGET_EXPORT ProgressTip : public QWidget#elseclass ProgressTip : public QWidget#endif{ Q_OBJECT 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)public: explicit ProgressTip(QWidget *parent = 0);protected: void paintEvent(QPaintEvent *); void drawBg(QPainter *painter); void drawTip(QPainter *painter); void drawValue(QPainter *painter);private: double minValue; //最小值 double maxValue; //最大值 double value; //目标值 bool percent; //百分比显示 int padding; //边距 int radius; //圆角角度 QBrush valueBrush; //进度画刷 QColor valueColor; //进度颜色 QColor bgColor; //背景颜色 QColor tipColor; //提示背景颜色 QColor textColor; //文字颜色public: 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: //设置范围值 void setRange(double minValue, double maxValue); void setRange(int minValue, int maxValue); //设置最大最小值 void setMinValue(double minValue); void setMaxValue(double maxValue); //设置目标值 void setValue(double value); void setValue(int value); //设置百分比显示 void setPercent(bool percent); //设置边距 void setPadding(int padding); //设置圆角角度 void setRadius(int radius); //设置进度画刷+进度颜色+背景颜色+提示背景+文字颜色 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);Q_SIGNALS: void valueChanged(double value);};#endif // PROGRESSPLAY_H五、核心代码 void ProgressTip::paintEvent(QPaintEvent *){ //绘制准备工作,启用反锯齿,平移坐标轴中心,等比例缩放 QPainter painter(this); painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing); //绘制背景 drawBg(&painter); //绘制上部分提示信息 drawTip(&painter); //绘制进度 drawValue(&painter);}void ProgressTip::drawBg(QPainter *painter){ painter->

Save (); painter- > setPen (Qt::NoPen); painter- > setBrush (bgColor); QRect rect (padding, (height () / 3) * 2, width ()-padding * 2, height () / 3); painter- > drawRoundedRect (rect, radius, radius); painter- > restore (); void ProgressTip::drawTip (QPainter * painter) {painter- > save (); painter- > setPen (Qt::NoPen); 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 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)); painter- > drawPolygon (pts); / / draw text QString strValue; if (percent) {double temp = value / (maxValue-minValue) * 100 StrValue = QString ("% 1") .arg (temp, 0, 'fags, 0);} else {strValue = QString ("% 1"). Arg ((double) value, 0,' fags, 0);} painter- > setPen (textColor); painter- > drawText (rect, Qt::AlignCenter, strValue); painter- > restore ();} void ProgressTip::drawValue (QPainter * painter) {painter- > save () Painter- > setPen (Qt::NoPen); / / if the brush is defined, the brush can 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); painter- > restore ();} VI.

More than 160exquisite controls, covering a variety of dashboards, progress bars, progress balls, compasses, graphs, rulers, thermometers, navigation bars, navigation bars, flatui, highlight buttons, slide selector, lunar calendar and so on. Far exceeds the number of controls integrated by qwt.

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, to facilitate a single control in the form of source code integrated into the project, less code. Qwt's control classes are interlinked and highly coupled, and if you want to use one of them, you must include all the code.

All pure Qt preparation, QWidget+QPainter drawing, support Qt4.6 to Qt5.13 any Qt version, support mingw, msvc, gcc and other compilers, support any operating system such as windows+linux+mac+ embedded linux, etc., no garbled, can be directly integrated into the Qt Creator, and the same as the use of built-in controls, most of the effects as long as you set a few properties, very 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, which are written in accordance with the unified design specification, which is convenient to learn the writing of custom controls.

The default color matching of each control and the color matching corresponding to demo are very beautiful.

More than 130 visible controls and 6 invisible controls.

Some controls provide a variety of style choices, a variety of indicator style choices.

All controls adapt to form stretching changes.

Integrated custom control property designer, support dragging design, WYSIWYG, support import and export xml format.

With its own 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 to enjoy the fun of graphic fonts.

All the controls finally generate a dynamic library file (dll or so, etc.), which can be directly integrated into qtcreator to drag and drop the design.

At present, there is a qml version, and a pyqt version will be considered later, if there is a great demand from users.

Custom control plug-in open dynamic library use (permanent free), without any back doors and restrictions, please rest assured to use.

At present, 32 versions of dll are available, of which the version of qt_5_7_0_mingw530_32 will always be up to date and complete.

After reading the above, do you have any further understanding of how to write a prompt progress bar for Qt? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.