Qt編寫自定義控制元件39-導航標籤
阿新 • • 發佈:2019-07-25
一、前言
在很多選單導航介面中,當單擊了二級選單或者三級選單以後,頂部會顯示帶箭頭或者其他標識的導航標籤,可以單擊該標籤快速切換到對應的介面,也作為指示當前處於哪一級選單下的介面,主要在WEB中大肆流行,在CS架構的專案中也逐漸應用開來,發現現在越來越多的CS開發的程式,都學習和模仿並應用BS架構的程式中好的方面,尤其是UI方面,取長補短,挺好,專業UI設計師的美感比絕大多數程式設計師的美感要好很多,他們設計出來的效果都是非常棒的,我個人喜歡去UI中國參看學習各種各樣的UI設計,看到好的會下載下來,直接搞個拾色器檢視顏色,看下人家的顏色配色搭配的多好。
二、實現的功能
- 1:可設定前景色和背景色
- 2:可設定箭頭位置方向 左右上下
- 3:可設定箭頭大小
- 4:可設定顯示倒三角
- 5:可設定倒三角長度/位置/顏色
三、效果圖
四、標頭檔案程式碼
#ifndef NAVLABEL_H #define NAVLABEL_H /** * 導航標籤控制元件 作者:feiyangqingyun(QQ:517216493) 2016-11-28 * 1:可設定前景色和背景色 * 2:可設定箭頭位置方向 左右上下 * 3:可設定箭頭大小 * 4:可設定顯示倒三角 * 5:可設定倒三角長度/位置/顏色 */ #include <QLabel> #ifdef quc #if (QT_VERSION < QT_VERSION_CHECK(5,7,0)) #include <QtDesigner/QDesignerExportWidget> #else #include <QtUiPlugin/QDesignerExportWidget> #endif class QDESIGNER_WIDGET_EXPORT NavLabel : public QLabel #else class NavLabel : public QLabel #endif { Q_OBJECT Q_ENUMS(ArrowPosition) Q_ENUMS(TrianglePosition) Q_PROPERTY(int borderRadius READ getBorderRadius WRITE setBorderRadius) Q_PROPERTY(QColor background READ getBackground WRITE setBackground) Q_PROPERTY(QColor foreground READ getForeground WRITE setForeground) Q_PROPERTY(bool showArrow READ getShowArrow WRITE setShowArrow) Q_PROPERTY(int arrowSize READ getArrowSize WRITE setArrowSize) Q_PROPERTY(ArrowPosition arrowPosition READ getArrowPosition WRITE setArrowPosition) Q_PROPERTY(bool showTriangle READ getShowTriangle WRITE setShowTriangle) Q_PROPERTY(int triangleLen READ getTriangleLen WRITE setTriangleLen) Q_PROPERTY(TrianglePosition trianglePosition READ getTrianglePosition WRITE setTrianglePosition) Q_PROPERTY(QColor triangleColor READ getTriangleColor WRITE setTriangleColor) public: enum ArrowPosition { ArrowPosition_Left = 0, //向左箭頭 ArrowPosition_Right = 1, //向右箭頭 ArrowPosition_Top = 2, //向上箭頭 ArrowPosition_Bottom = 3 //向下箭頭 }; enum TrianglePosition { TrianglePosition_Left = 0, //左側 TrianglePosition_Right = 1, //右側 TrianglePosition_Top = 2, //頂部 TrianglePosition_Bottom = 3 //底部 }; explicit NavLabel(QWidget *parent = 0); protected: void mousePressEvent(QMouseEvent *); void paintEvent(QPaintEvent *); void drawBg(QPainter *painter); void drawText(QPainter *painter); void drawTriangle(QPainter *painter); private: int borderRadius; //邊框圓角角度 QColor background; //背景色 QColor foreground; //前景色 bool showArrow; //顯示箭頭 int arrowSize; //箭頭大小 ArrowPosition arrowPosition; //箭頭位置 bool showTriangle; //顯示倒三角 int triangleLen; //倒三角邊長 TrianglePosition trianglePosition; //倒三角位置 QColor triangleColor; //倒三角顏色 QRect bgRect; //繪製區域 public: int getBorderRadius() const; QColor getBackground() const; QColor getForeground() const; bool getShowArrow() const; int getArrowSize() const; ArrowPosition getArrowPosition() const; bool getShowTriangle() const; int getTriangleLen() const; TrianglePosition getTrianglePosition()const; QColor getTriangleColor() const; QSize sizeHint() const; QSize minimumSizeHint() const; public Q_SLOTS: //設定邊框圓角角度 void setBorderRadius(int borderRadius); //設定前景色 void setBackground(const QColor &background); //設定前景色 void setForeground(const QColor &foreground); //設定顯示箭頭 void setShowArrow(bool showArrow); //設定箭頭大小 void setArrowSize(int arrowSize); //設定箭頭位置 void setArrowPosition(const ArrowPosition &arrowPosition); //設定顯示倒三角 void setShowTriangle(bool showTriangle); //設定倒三角邊長 void setTriangleLen(int triangleLen); //設定倒三角位置 void setTrianglePosition(const TrianglePosition &trianglePosition); //設定倒三角顏色 void setTriangleColor(const QColor &triangleColor); Q_SIGNALS: void clicked(); }; #endif // NAVLABEL_H
五、核心程式碼
void NavLabel::paintEvent(QPaintEvent *) { //繪製準備工作,啟用反鋸齒 QPainter painter(this); painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing); //繪製背景 drawBg(&painter); //繪製文字 drawText(&painter); //繪製倒三角 drawTriangle(&painter); } void NavLabel::drawBg(QPainter *painter) { int width = this->width(); int height = this->height(); int endX = width - arrowSize; int endY = height - arrowSize; painter->save(); painter->setPen(Qt::NoPen); painter->setBrush(background); QPolygon pts; if (arrowPosition == ArrowPosition_Right) { bgRect = QRect(0, 0, endX, height); pts.setPoints(3, endX, height / 2 - arrowSize, endX, height / 2 + arrowSize, width, height / 2); } else if (arrowPosition == ArrowPosition_Left) { bgRect = QRect(arrowSize, 0, width - arrowSize, height); pts.setPoints(3, arrowSize, height / 2 - arrowSize, arrowSize, height / 2 + arrowSize, 0, height / 2); } else if (arrowPosition == ArrowPosition_Bottom) { bgRect = QRect(0, 0, width, endY); pts.setPoints(3, width / 2 - arrowSize, endY, width / 2 + arrowSize, endY, width / 2, height); } else if (arrowPosition == ArrowPosition_Top) { bgRect = QRect(0, arrowSize, width, height - arrowSize); pts.setPoints(3, width / 2 - arrowSize, arrowSize, width / 2 + arrowSize, arrowSize, width / 2, 0); } //繪製圓角矩形和三角箭頭 if (!showArrow) { bgRect = this->rect(); painter->drawRoundedRect(bgRect, borderRadius, borderRadius); } else { painter->drawRoundedRect(bgRect, borderRadius, borderRadius); painter->drawPolygon(pts); } painter->restore(); } void NavLabel::drawText(QPainter *painter) { painter->save(); painter->setPen(foreground); painter->setBrush(Qt::NoBrush); painter->drawText(bgRect, Qt::AlignCenter, this->text()); painter->restore(); } void NavLabel::drawTriangle(QPainter *painter) { if (!showTriangle) { return; } painter->save(); painter->setPen(Qt::NoPen); painter->setBrush(triangleColor); //繪製在右側中間,根據設定的倒三角的邊長設定三個點位置 int width = this->width(); int height = this->height(); int midWidth = width / 2; int midHeight = height / 2; QPolygon pts; if (trianglePosition == TrianglePosition_Left) { pts.setPoints(3, triangleLen, midHeight, 0, midHeight - triangleLen, 0, midHeight + triangleLen); } else if (trianglePosition == TrianglePosition_Right) { pts.setPoints(3, width - triangleLen, midHeight, width, midHeight - triangleLen, width, midHeight + triangleLen); } else if (trianglePosition == TrianglePosition_Top) { pts.setPoints(3, midWidth, triangleLen, midWidth - triangleLen, 0, midWidth + triangleLen, 0); } else if (trianglePosition == TrianglePosition_Bottom) { pts.setPoints(3, midWidth, height - triangleLen, midWidth - triangleLen, height, midWidth + triangleLen, height); } painter->drawPolygon(pts); 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、學習方法、寫作技巧、熱門技術、職場發展等內容,乾貨多多,