Qt編寫自定義控制元件32-等待進度條控制元件
阿新 • • 發佈:2019-07-21
一、前言
在各種各樣的執行任務介面,有時候需要比較多的時間,需要給出一個直觀的等待進度條表示當前正在執行的進度,而不至於懵逼在那裡,使用者不會覺得程式死了還是幹嘛了。 等待進度條有好幾種辦法,比如直接叫美工做好gif圖,用QLabel配合QMovie來載入gif圖片,這種方法最簡單最省事,或者做好多張進度條的圖片,採用定時貼圖來實現,這些辦法省事歸省事,就是還不夠靈活,寫死了,比如有時候需要更換顏色或者換一種展示形式,又需要美工重新做圖了,折磨的要死。當時在寫這個等待進度條的時候,就有考慮到整合多種樣式進去供使用者選擇,比如圓弧狀風格、旋轉圓風格、三角圓弧、線條風格、圓環風格等,一個控制元件就相當於五六個控制元件,這個才牛逼一些,而且程式碼還很完整和精彩。
二、實現的功能
- 1:支援多種等待樣式風格 圓弧狀風格 旋轉圓風格 三角圓弧 線條風格 圓環風格
- 2:可設定範圍值和當前值
- 3:可設定前景色背景色
- 4:可設定順時針逆時針旋轉
- 5:支援任意大小縮放
- 6:支援設定旋轉速度間隔
三、效果圖
四、標頭檔案程式碼
#ifndef PROGRESSWAIT_H #define PROGRESSWAIT_H /** * 等待進度條控制元件 作者:feiyangqingyun(QQ:517216493) 2016-10-28 * 1:支援多種等待樣式風格 圓弧狀風格 旋轉圓風格 三角圓弧 線條風格 圓環風格 * 2:可設定範圍值和當前值 * 3:可設定前景色背景色 * 4:可設定順時針逆時針旋轉 * 5:支援任意大小縮放 * 6:支援設定旋轉速度間隔 */ #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 ProgressWait : public QWidget #else class ProgressWait : public QWidget #endif { Q_OBJECT Q_ENUMS(BarStyle) Q_PROPERTY(bool clockWise READ getClockWise WRITE setClockWise) Q_PROPERTY(bool showPercent READ getShowPercent WRITE setShowPercent) Q_PROPERTY(int currentValue READ getCurrentValue WRITE setCurrentValue) Q_PROPERTY(int maxValue READ getMaxValue WRITE setMaxValue) Q_PROPERTY(int interval READ getInterval WRITE setInterval) Q_PROPERTY(BarStyle barStyle READ getBarStyle WRITE setBarStyle) Q_PROPERTY(QColor background READ getBackground WRITE setBackground) Q_PROPERTY(QColor foreground READ getForeground WRITE setForeground) Q_PROPERTY(QColor textColor READ getTextColor WRITE setTextColor) public: enum BarStyle { BarStyle_Arc = 0, //圓弧狀風格 BarStyle_RoundCircle = 1, //旋轉圓風格 BarStyle_Pie = 2, //三角圓弧風格 BarStyle_Line = 3, //線條風格 BarStyle_Ring = 4, //圓環風格 BarStyle_SingleCircle = 5, //一個圓閃爍 BarStyle_DoubleCircle = 6 //兩個圓閃爍 }; ProgressWait(QWidget *parent = 0); ~ProgressWait(); protected: void resizeEvent(QResizeEvent *); void paintEvent(QPaintEvent *); void drawArc(QPainter *painter); void drawRoundCircle(QPainter *painter); void drawPie(QPainter *painter); void drawLine(QPainter *painter); void drawRing(QPainter *painter); void drawSingleCircle(QPainter *painter); void drawDoubleCircle(QPainter *painter); void drawValue(QPainter *painter); private: bool clockWise; //順時針逆時針 bool showPercent; //顯示當前百分比 int currentValue; //當前值 int maxValue; //最大值 int interval; //旋轉間隔 int minRadius; //最小半徑 int maxRadius; //最大半徑 int offsetRadius; //半徑偏移量 int leftRadius; //左邊圓半徑 int rightRadius; //右邊圓半徑 bool leftIncrease; //左邊遞增 bool rightIncrease; //右邊遞增 BarStyle barStyle; //樣式 QColor background; //背景色 QColor foreground; //前景色 QColor textColor; //文字顏色 QTimer *timer; //定時器繪製 private: double degreesToRadians(double value); private slots: void updateValue(); public: bool getClockWise() const; bool getShowPercent() const; int getCurrentValue() const; int getMaxValue() const; int getInterval() const; BarStyle getBarStyle() const; QColor getBackground() const; QColor getForeground() const; QColor getTextColor() const; QSize sizeHint() const; QSize minimumSizeHint() const; public Q_SLOTS: //設定順時針逆時針旋轉 void setClockWise(bool clockWise); //設定是否顯示百分比 void setShowPercent(bool showPercent); //設定當前值 void setCurrentValue(int currentValue); //設定最大值 void setMaxValue(int maxValue); //設定旋轉速度間隔 void setInterval(int interval); //設定樣式 void setBarStyle(const BarStyle &barStyle); //設定前景色 void setBackground(const QColor &background); //設定前景色 void setForeground(const QColor &foreground); //設定文字顏色 void setTextColor(const QColor &textColor); }; #endif // PROGRESSWAIT_H
五、核心程式碼
void ProgressWait::paintEvent(QPaintEvent *) { int width = this->width(); int height = this->height(); int side = qMin(width, height); //繪製準備工作,啟用反鋸齒,平移座標軸中心,等比例縮放 QPainter painter(this); painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing); painter.translate(width / 2, height / 2); painter.scale(side / 200.0, side / 200.0); if (barStyle == BarStyle_Arc) { drawArc(&painter); } else if (barStyle == BarStyle_RoundCircle) { drawRoundCircle(&painter); } else if (barStyle == BarStyle_Pie) { drawPie(&painter); } else if (barStyle == BarStyle_Line) { drawLine(&painter); } else if (barStyle == BarStyle_Ring) { drawRing(&painter); } else if (barStyle == BarStyle_SingleCircle) { drawSingleCircle(&painter); } else if (barStyle == BarStyle_DoubleCircle) { drawDoubleCircle(&painter); } drawValue(&painter); } void ProgressWait::drawArc(QPainter *painter) { painter->save(); painter->setPen(Qt::NoPen); //計算中心點座標 int centerX = 0; int centerY = 0; int radius = 99; int radiusBig = radius / 2; int radiusSmall = radius / 6; double currentangle = currentValue * (360 / (maxValue + 1)); if (clockWise) { currentangle = -currentangle; } //繪製八卦大圓1 painter->setBrush(foreground); QPainterPath pathBig1(QPointF(centerX + radius * qCos(degreesToRadians(currentangle)), centerY - radius * qSin(degreesToRadians(currentangle)))); pathBig1.arcTo(centerX - radius, centerY - radius, radius * 2, radius * 2, currentangle, 180); pathBig1.arcTo(centerX + radiusBig * qCos(degreesToRadians(currentangle + 180)) - radiusBig, centerY - radiusBig * qSin(degreesToRadians(currentangle + 180)) - radiusBig, radiusBig * 2, radiusBig * 2, currentangle + 180, 180); pathBig1.arcTo(centerX + radiusBig * qCos(degreesToRadians(currentangle)) - radiusBig, centerY - radiusBig * qSin(degreesToRadians(currentangle)) - radiusBig, radiusBig * 2, radiusBig * 2, currentangle + 180, -180 ); painter->drawPath(pathBig1); //繪製八卦大圓2 painter->setBrush(background); QPainterPath pathBig2(QPointF(centerX + radius * qCos(degreesToRadians(currentangle)), centerY - radius * qSin(degreesToRadians(currentangle)))); pathBig2.arcTo(centerX - radius, centerY - radius, radius * 2, radius * 2, currentangle, -180); pathBig2.arcTo(centerX + radiusBig * qCos(degreesToRadians(currentangle + 180)) - radiusBig, centerY - radiusBig * qSin(degreesToRadians(currentangle + 180)) - radiusBig, radiusBig * 2, radiusBig * 2, currentangle + 180, 180); pathBig2.arcTo(centerX + radiusBig * qCos(degreesToRadians(currentangle)) - radiusBig, centerY - radiusBig * qSin(degreesToRadians(currentangle)) - radiusBig, radiusBig * 2, radiusBig * 2, currentangle + 180, -180 ); painter->drawPath(pathBig2); //繪製八卦小圓1 painter->setBrush(foreground); QPainterPath pathSmall1; pathSmall1.addEllipse(centerX + radiusBig * qCos(degreesToRadians(currentangle)) - radiusSmall, centerY - radiusBig * qSin(degreesToRadians(currentangle)) - radiusSmall, radiusSmall * 2, radiusSmall * 2); painter->drawPath(pathSmall1); //繪製八卦小圓2 painter->setBrush(background); QPainterPath pathSmall2; pathSmall2.addEllipse(centerX + radiusBig * qCos(degreesToRadians(180 + currentangle)) - radiusSmall, centerY - radiusBig * qSin(degreesToRadians(180 + currentangle)) - radiusSmall, radiusSmall * 2, radiusSmall * 2); painter->drawPath(pathSmall2); painter->restore(); } void ProgressWait::drawRoundCircle(QPainter *painter) { painter->save(); painter->setPen(Qt::NoPen); int radius = 99; int minRadius = radius / 6; double angleStep = 360.0 / maxValue; double alpha = (double)1 / maxValue; if (!clockWise) { angleStep = -angleStep; } //計算中心點座標 int centerX = 0; int centerY = 0; double centerRadius = radius / 1.2; for (int i = 0; i < maxValue; i++) { double angle = (currentValue + i) * angleStep; double initX = centerRadius * qCos(degreesToRadians(angle)) + centerX; double initY = centerRadius * qSin(degreesToRadians(angle)) + centerY; int value = i * alpha * 255; value = value < 30 ? 30 : value; foreground.setAlpha(value); painter->setBrush(foreground); painter->drawEllipse(initX - minRadius, initY - minRadius, minRadius * 2, minRadius * 2); } painter->restore(); }
六、控制元件介紹
- 超過149個精美控制元件,涵蓋了各種儀表盤、進度條、進度球、指南針、曲線圖、標尺、溫度計、導航條、導航欄,flatui、高亮按鈕、滑動選擇器、農曆等。遠超qwt整合的控制元件數量。
- 每個類都可以獨立成一個單獨的控制元件,零耦合,每個控制元件一個頭檔案和一個實現檔案,不依賴其他檔案,方便單個控制元件以原始碼形式整合到專案中,較少程式碼量。qwt的控制元件類環環相扣,高度耦合,想要使用其中一個控制元件,必須包含所有的程式碼。
- 全部純Qt編寫,QWidget+QPainter繪製,支援Qt4.6到Qt5.12的任何Qt版本,支援mingw、msvc、gcc等編譯器,支援任意作業系統比如windows+linux+mac+嵌入式linux等,不亂碼,可直接整合到Qt Creator中,和自帶的控制元件一樣使用,大部分效果只要設定幾個屬性即可,極為方便。
- 每個控制元件都有一個對應的單獨的包含該控制元件原始碼的DEMO,方便參考使用。同時還提供一個所有控制元件使用的整合的DEMO。
- 每個控制元件的原始碼都有詳細中文註釋,都按照統一設計規範編寫,方便學習自定義控制元件的編寫。
- 每個控制元件預設配色和demo對應的配色都非常精美。
- 超過130個可見控制元件,6個不可見控制元件。
- 部分控制元件提供多種樣式風格選擇,多種指示器樣式選擇。
- 所有控制元件自適應窗體拉伸變化。
- 整合自定義控制元件屬性設計器,支援拖曳設計,所見即所得,支援匯入匯出xml格式。
- 自帶activex控制元件demo,所有控制元件可以直接執行在ie瀏覽器中。
- 整合fontawesome圖形字型+阿里巴巴iconfont收藏的幾百個圖形字型,享受圖形字型帶來的樂趣。
- 所有控制元件最後生成一個dll動態庫檔案,可以直接整合到qtcreator中拖曳設計使用。
- 目前已經有qml版本,後期會考慮出pyqt版本,如果使用者需求量很大的話。
七、SDK下載
- SDK下載連結:https://pan.baidu.com/s/1A5Gd77kExm8Co5ckT51vvQ 提取碼:877p
- 下載連結中包含了各個版本的動態庫檔案,所有控制元件的標頭檔案,使用demo,自定義控制元件+屬性設計器。
- 自定義控制元件外掛開放動態庫dll使用(永久免費),無任何後門和限制,請放心使用。
- 目前已提供26個版本的dll,其中包括了qt5.12.3 msvc2017 32+64 mingw 32+64 的。
- 不定期增加控制元件和完善控制元件,不定期更新SDK,歡迎各位提出建議,謝謝!
- widget版本(QQ:517216493)qml版本(QQ:373955953)三峰駝(QQ:278969898)。
- 濤哥的知乎專欄 Qt進階之路 https://zhuanlan.zhihu.com/TaoQt
- 歡迎關注微信公眾號【高效程式設計師】,C++/Python、學習方法、寫作技巧、熱門技術、職場發展等內容,乾貨多多,