導航按鈕控件,主要用於各類漂亮精美的導航條,咱們常常在web中看到導航條都很是精美,都是html+css+js實現的,還自帶動畫過分效果,Qt提供的qss其實也是無敵的,支持基本上全部的CSS2屬性,配合QPainter這個無敵大法工具,沒有什麼不能繪製的。這個控件總結了大部分的導航條樣式,好比左側+右側+頂部+底部,線條指示器,倒三角指示器等。還能夠在導航條前面加上圖標等,就顯得更加有特點。有了此控件,不再用擔憂沒有精美的導航了。css
#ifndef NAVBUTTON_H #define NAVBUTTON_H /** * 導航按鈕控件 做者:feiyangqingyun(QQ:517216493) 2017-12-19 * 1:可設置文字的左側+右側+頂部+底部間隔 * 2:可設置文字對齊方式 * 3:可設置顯示倒三角/倒三角邊長/倒三角位置/倒三角顏色 * 4:可設置顯示圖標/圖標間隔/圖標尺寸/正常狀態圖標/懸停狀態圖標/選中狀態圖標 * 5:可設置顯示邊框線條/線條寬度/線條間隔/線條位置/線條顏色 * 6:可設置正常背景顏色/懸停背景顏色/選中背景顏色 * 7:可設置正常文字顏色/懸停文字顏色/選中文字顏色 * 8:可設置背景顏色爲畫刷顏色 */ #include <QPushButton> #ifdef quc #if (QT_VERSION < QT_VERSION_CHECK(5,7,0)) #include <QtDesigner/QDesignerExportWidget> #else #include <QtUiPlugin/QDesignerExportWidget> #endif class QDESIGNER_WIDGET_EXPORT NavButton : public QPushButton #else class NavButton : public QPushButton #endif { Q_OBJECT Q_ENUMS(TextAlign) Q_ENUMS(TrianglePosition) Q_ENUMS(LinePosition) Q_ENUMS(IconPosition) Q_PROPERTY(int paddingLeft READ getPaddingLeft WRITE setPaddingLeft) Q_PROPERTY(int paddingRight READ getPaddingRight WRITE setPaddingRight) Q_PROPERTY(int paddingTop READ getPaddingTop WRITE setPaddingTop) Q_PROPERTY(int paddingBottom READ getPaddingBottom WRITE setPaddingBottom) Q_PROPERTY(TextAlign textAlign READ getTextAlign WRITE setTextAlign) 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) Q_PROPERTY(bool showIcon READ getShowIcon WRITE setShowIcon) Q_PROPERTY(int iconSpace READ getIconSpace WRITE setIconSpace) Q_PROPERTY(QSize iconSize READ getIconSize WRITE setIconSize) Q_PROPERTY(QPixmap iconNormal READ getIconNormal WRITE setIconNormal) Q_PROPERTY(QPixmap iconHover READ getIconHover WRITE setIconHover) Q_PROPERTY(QPixmap iconCheck READ getIconCheck WRITE setIconCheck) Q_PROPERTY(bool showLine READ getShowLine WRITE setShowLine) Q_PROPERTY(int lineSpace READ getLineSpace WRITE setLineSpace) Q_PROPERTY(int lineWidth READ getLineWidth WRITE setLineWidth) Q_PROPERTY(LinePosition linePosition READ getLinePosition WRITE setLinePosition) Q_PROPERTY(QColor lineColor READ getLineColor WRITE setLineColor) Q_PROPERTY(QColor normalBgColor READ getNormalBgColor WRITE setNormalBgColor) Q_PROPERTY(QColor hoverBgColor READ getHoverBgColor WRITE setHoverBgColor) Q_PROPERTY(QColor checkBgColor READ getCheckBgColor WRITE setCheckBgColor) Q_PROPERTY(QColor normalTextColor READ getNormalTextColor WRITE setNormalTextColor) Q_PROPERTY(QColor hoverTextColor READ getHoverTextColor WRITE setHoverTextColor) Q_PROPERTY(QColor checkTextColor READ getCheckTextColor WRITE setCheckTextColor) public: enum TextAlign { TextAlign_Left = 0x0001, //左側對齊 TextAlign_Right = 0x0002, //右側對齊 TextAlign_Top = 0x0020, //頂部對齊 TextAlign_Bottom = 0x0040, //底部對齊 TextAlign_Center = 0x0004 //居中對齊 }; enum TrianglePosition { TrianglePosition_Left = 0, //左側 TrianglePosition_Right = 1, //右側 TrianglePosition_Top = 2, //頂部 TrianglePosition_Bottom = 3 //底部 }; enum IconPosition { IconPosition_Left = 0, //左側 IconPosition_Right = 1, //右側 IconPosition_Top = 2, //頂部 IconPosition_Bottom = 3 //底部 }; enum LinePosition { LinePosition_Left = 0, //左側 LinePosition_Right = 1, //右側 LinePosition_Top = 2, //頂部 LinePosition_Bottom = 3 //底部 }; explicit NavButton(QWidget *parent = 0); protected: void enterEvent(QEvent *); void leaveEvent(QEvent *); void paintEvent(QPaintEvent *); void drawBg(QPainter *painter); void drawText(QPainter *painter); void drawIcon(QPainter *painter); void drawLine(QPainter *painter); void drawTriangle(QPainter *painter); private: int paddingLeft; //文字左側間隔 int paddingRight; //文字右側間隔 int paddingTop; //文字頂部間隔 int paddingBottom; //文字底部間隔 TextAlign textAlign; //文字對齊 bool showTriangle; //顯示倒三角 int triangleLen; //倒三角邊長 TrianglePosition trianglePosition; //倒三角位置 QColor triangleColor; //倒三角顏色 bool showIcon; //顯示圖標 int iconSpace; //圖標間隔 QSize iconSize; //圖標尺寸 QPixmap iconNormal; //正常圖標 QPixmap iconHover; //懸停圖標 QPixmap iconCheck; //選中圖標 bool showLine; //顯示線條 int lineSpace; //線條間隔 int lineWidth; //線條寬度 LinePosition linePosition; //線條位置 QColor lineColor; //線條顏色 QColor normalBgColor; //正常背景顏色 QColor hoverBgColor; //懸停背景顏色 QColor checkBgColor; //選中背景顏色 QColor normalTextColor; //正常文字顏色 QColor hoverTextColor; //懸停文字顏色 QColor checkTextColor; //選中文字顏色 QBrush normalBgBrush; //正常背景畫刷 QBrush hoverBgBrush; //懸停背景畫刷 QBrush checkBgBrush; //選中背景畫刷 bool hover; //懸停標誌位 public: int getPaddingLeft() const; int getPaddingRight() const; int getPaddingTop() const; int getPaddingBottom() const; TextAlign getTextAlign() const; bool getShowTriangle() const; int getTriangleLen() const; TrianglePosition getTrianglePosition()const; QColor getTriangleColor() const; bool getShowIcon() const; int getIconSpace() const; QSize getIconSize() const; QPixmap getIconNormal() const; QPixmap getIconHover() const; QPixmap getIconCheck() const; bool getShowLine() const; int getLineSpace() const; int getLineWidth() const; LinePosition getLinePosition() const; QColor getLineColor() const; QColor getNormalBgColor() const; QColor getHoverBgColor() const; QColor getCheckBgColor() const; QColor getNormalTextColor() const; QColor getHoverTextColor() const; QColor getCheckTextColor() const; QSize sizeHint() const; QSize minimumSizeHint() const; public Q_SLOTS: //設置文字間隔 void setPaddingLeft(int paddingLeft); void setPaddingRight(int paddingRight); void setPaddingTop(int paddingTop); void setPaddingBottom(int paddingBottom); void setPadding(int padding); void setPadding(int paddingLeft, int paddingRight, int paddingTop, int paddingBottom); //設置文字對齊 void setTextAlign(const TextAlign &textAlign); //設置顯示倒三角 void setShowTriangle(bool showTriangle); //設置倒三角邊長 void setTriangleLen(int triangleLen); //設置倒三角位置 void setTrianglePosition(const TrianglePosition &trianglePosition); //設置倒三角顏色 void setTriangleColor(const QColor &triangleColor); //設置顯示圖標 void setShowIcon(bool showIcon); //設置圖標間隔 void setIconSpace(int iconSpace); //設置圖標尺寸 void setIconSize(const QSize &iconSize); //設置正常圖標 void setIconNormal(const QPixmap &iconNormal); //設置懸停圖標 void setIconHover(const QPixmap &iconHover); //設置按下圖標 void setIconCheck(const QPixmap &iconCheck); //設置顯示線條 void setShowLine(bool showLine); //設置線條間隔 void setLineSpace(int lineSpace); //設置線條寬度 void setLineWidth(int lineWidth); //設置線條位置 void setLinePosition(const LinePosition &linePosition); //設置線條顏色 void setLineColor(const QColor &lineColor); //設置正常背景顏色 void setNormalBgColor(const QColor &normalBgColor); //設置懸停背景顏色 void setHoverBgColor(const QColor &hoverBgColor); //設置選中背景顏色 void setCheckBgColor(const QColor &checkBgColor); //設置正常文字顏色 void setNormalTextColor(const QColor &normalTextColor); //設置懸停文字顏色 void setHoverTextColor(const QColor &hoverTextColor); //設置選中文字顏色 void setCheckTextColor(const QColor &checkTextColor); //設置正常背景畫刷 void setNormalBgBrush(const QBrush &normalBgBrush); //設置懸停背景畫刷 void setHoverBgBrush(const QBrush &hoverBgBrush); //設置選中背景畫刷 void setCheckBgBrush(const QBrush &checkBgBrush); }; #endif // NAVBUTTON_H
void NavButton::paintEvent(QPaintEvent *) { //繪製準備工做,啓用反鋸齒 QPainter painter(this); painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing); //繪製背景 drawBg(&painter); //繪製文字 drawText(&painter); //繪製圖標 drawIcon(&painter); //繪製邊框線條 drawLine(&painter); //繪製倒三角 drawTriangle(&painter); } void NavButton::drawBg(QPainter *painter) { painter->save(); painter->setPen(Qt::NoPen); int width = this->width(); int height = this->height(); QRect bgRect; if (linePosition == LinePosition_Left) { bgRect = QRect(lineSpace, 0, width - lineSpace, height); } else if (linePosition == LinePosition_Right) { bgRect = QRect(0, 0, width - lineSpace, height); } else if (linePosition == LinePosition_Top) { bgRect = QRect(0, lineSpace, width, height - lineSpace); } else if (linePosition == LinePosition_Bottom) { bgRect = QRect(0, 0, width, height - lineSpace); } //若是畫刷存在則取畫刷 QBrush bgBrush; if (isChecked()) { bgBrush = checkBgBrush; } else if (hover) { bgBrush = hoverBgBrush; } else { bgBrush = normalBgBrush; } if (bgBrush != Qt::NoBrush) { painter->setBrush(bgBrush); } else { //根據當前狀態選擇對應顏色 QColor bgColor; if (isChecked()) { bgColor = checkBgColor; } else if (hover) { bgColor = hoverBgColor; } else { bgColor = normalBgColor; } painter->setBrush(bgColor); } painter->drawRect(bgRect); painter->restore(); } void NavButton::drawText(QPainter *painter) { painter->save(); painter->setBrush(Qt::NoBrush); //根據當前狀態選擇對應顏色 QColor textColor; if (isChecked()) { textColor = checkTextColor; } else if (hover) { textColor = hoverTextColor; } else { textColor = normalTextColor; } QRect textRect = QRect(paddingLeft, paddingTop, width() - paddingLeft - paddingRight, height() - paddingTop - paddingBottom); painter->setPen(textColor); painter->drawText(textRect, textAlign | Qt::AlignVCenter, text()); painter->restore(); } void NavButton::drawIcon(QPainter *painter) { if (!showIcon) { return; } painter->save(); QPixmap pix; if (isChecked()) { pix = iconCheck; } else if (hover) { pix = iconHover; } else { pix = iconNormal; } if (!pix.isNull()) { //等比例平滑縮放圖標 pix = pix.scaled(iconSize, Qt::KeepAspectRatio, Qt::SmoothTransformation); painter->drawPixmap(iconSpace, (height() - iconSize.height()) / 2, pix); } painter->restore(); } void NavButton::drawLine(QPainter *painter) { if (!showLine) { return; } if (!isChecked()) { return; } painter->save(); QPen pen; pen.setWidth(lineWidth); pen.setColor(lineColor); painter->setPen(pen); //根據線條位置設置線條座標 QPoint pointStart, pointEnd; if (linePosition == LinePosition_Left) { pointStart = QPoint(0, 0); pointEnd = QPoint(0, height()); } else if (linePosition == LinePosition_Right) { pointStart = QPoint(width(), 0); pointEnd = QPoint(width(), height()); } else if (linePosition == LinePosition_Top) { pointStart = QPoint(0, 0); pointEnd = QPoint(width(), 0); } else if (linePosition == LinePosition_Bottom) { pointStart = QPoint(0, height()); pointEnd = QPoint(width(), height()); } painter->drawLine(pointStart, pointEnd); painter->restore(); } void NavButton::drawTriangle(QPainter *painter) { if (!showTriangle) { return; } //選中或者懸停顯示 if (!hover && !isChecked()) { 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(); }