找回密码
 立即注册
收起左侧

Qt编写自定义控件9-导航按钮控件

0
回复
268
查看
[复制链接]
累计签到:7 天
连续签到:1 天
来源: 2019-4-26 20:25:51 显示全部楼层 |阅读模式
前言
导航按钮控件,主要用于各种漂亮精美的导航条,我们经常在web中看到导航条都非常精美,都是html+css+js实现的,还自带动画过度效果,Qt提供的qss其实也是无敌的,支持基本上所有的CSS2属性,配合QPainter这个无敌**工具,没有什么不能绘制的。这个控件总结了大部分的导航条样式,比如左侧+右侧+顶部+底部,线条指示器,倒三角指示器等。还可以在导航条前面加上图标等,就显得更加有特色。有了此控件,再也不用担心没有精美的导航了。

实现的功能
* 1:可设置文字的左侧+右侧+顶部+底部间隔
* 2:可设置文字对齐方式
* 3:可设置显示倒三角/倒三角边长/倒三角位置/倒三角颜色
* 4:可设置显示图标/图标间隔/图标尺寸/正常状态图标/悬停状态图标/选中状态图标
* 5:可设置显示边框线条/线条宽度/线条间隔/线条位置/线条颜色
* 6:可设置正常背景颜色/悬停背景颜色/选中背景颜色
* 7:可设置正常文字颜色/悬停文字颜色/选中文字颜色
* 8:可设置背景颜色为画刷颜色

效果图


头文件代码
  1. #ifndef NAVBUTTON_H
  2. #define NAVBUTTON_H

  3. /**
  4. * 导航按钮控件 作者:feiyangqingyun(QQ:517216493) 2017-12-19
  5. * 1:可设置文字的左侧+右侧+顶部+底部间隔
  6. * 2:可设置文字对齐方式
  7. * 3:可设置显示倒三角/倒三角边长/倒三角位置/倒三角颜色
  8. * 4:可设置显示图标/图标间隔/图标尺寸/正常状态图标/悬停状态图标/选中状态图标
  9. * 5:可设置显示边框线条/线条宽度/线条间隔/线条位置/线条颜色
  10. * 6:可设置正常背景颜色/悬停背景颜色/选中背景颜色
  11. * 7:可设置正常文字颜色/悬停文字颜色/选中文字颜色
  12. * 8:可设置背景颜色为画刷颜色
  13. */

  14. #include <QPushButton>

  15. #ifdef quc
  16. #if (QT_VERSION < QT_VERSION_CHECK(5,7,0))
  17. #include <QtDesigner/QDesignerExportWidget>
  18. #else
  19. #include <QtUiPlugin/QDesignerExportWidget>
  20. #endif

  21. class QDESIGNER_WIDGET_EXPORT NavButton : public QPushButton
  22. #else
  23. class NavButton : public QPushButton
  24. #endif

  25. {
  26.     Q_OBJECT
  27.     Q_ENUMS(TextAlign)
  28.     Q_ENUMS(TrianglePosition)
  29.     Q_ENUMS(LinePosition)
  30.     Q_ENUMS(IconPosition)

  31.     Q_PROPERTY(int paddingLeft READ getPaddingLeft WRITE setPaddingLeft)
  32.     Q_PROPERTY(int paddingRight READ getPaddingRight WRITE setPaddingRight)
  33.     Q_PROPERTY(int paddingTop READ getPaddingTop WRITE setPaddingTop)
  34.     Q_PROPERTY(int paddingBottom READ getPaddingBottom WRITE setPaddingBottom)
  35.     Q_PROPERTY(TextAlign textAlign READ getTextAlign WRITE setTextAlign)

  36.     Q_PROPERTY(bool showTriangle READ getShowTriangle WRITE setShowTriangle)
  37.     Q_PROPERTY(int triangleLen READ getTriangleLen WRITE setTriangleLen)
  38.     Q_PROPERTY(TrianglePosition trianglePosition READ getTrianglePosition WRITE setTrianglePosition)
  39.     Q_PROPERTY(QColor triangleColor READ getTriangleColor WRITE setTriangleColor)

  40.     Q_PROPERTY(bool showIcon READ getShowIcon WRITE setShowIcon)
  41.     Q_PROPERTY(int iconSpace READ getIconSpace WRITE setIconSpace)
  42.     Q_PROPERTY(QSize iconSize READ getIconSize WRITE setIconSize)
  43.     Q_PROPERTY(QPixmap iconNormal READ getIconNormal WRITE setIconNormal)
  44.     Q_PROPERTY(QPixmap iconHover READ getIconHover WRITE setIconHover)
  45.     Q_PROPERTY(QPixmap iconCheck READ getIconCheck WRITE setIconCheck)

  46.     Q_PROPERTY(bool showLine READ getShowLine WRITE setShowLine)
  47.     Q_PROPERTY(int lineSpace READ getLineSpace WRITE setLineSpace)
  48.     Q_PROPERTY(int lineWidth READ getLineWidth WRITE setLineWidth)
  49.     Q_PROPERTY(LinePosition linePosition READ getLinePosition WRITE setLinePosition)
  50.     Q_PROPERTY(QColor lineColor READ getLineColor WRITE setLineColor)

  51.     Q_PROPERTY(QColor normalBgColor READ getNormalBgColor WRITE setNormalBgColor)
  52.     Q_PROPERTY(QColor hoverBgColor READ getHoverBgColor WRITE setHoverBgColor)
  53.     Q_PROPERTY(QColor checkBgColor READ getCheckBgColor WRITE setCheckBgColor)
  54.     Q_PROPERTY(QColor normalTextColor READ getNormalTextColor WRITE setNormalTextColor)
  55.     Q_PROPERTY(QColor hoverTextColor READ getHoverTextColor WRITE setHoverTextColor)
  56.     Q_PROPERTY(QColor checkTextColor READ getCheckTextColor WRITE setCheckTextColor)

  57. public:
  58.     enum TextAlign {
  59.         TextAlign_Left = 0x0001,    //左侧对齐
  60.         TextAlign_Right = 0x0002,   //右侧对齐
  61.         TextAlign_Top = 0x0020,     //顶部对齐
  62.         TextAlign_Bottom = 0x0040,  //底部对齐
  63.         TextAlign_Center = 0x0004   //居中对齐
  64.     };

  65.     enum TrianglePosition {
  66.         TrianglePosition_Left = 0,  //左侧
  67.         TrianglePosition_Right = 1, //右侧
  68.         TrianglePosition_Top = 2,   //顶部
  69.         TrianglePosition_Bottom = 3 //底部
  70.     };

  71.     enum IconPosition {
  72.         IconPosition_Left = 0,      //左侧
  73.         IconPosition_Right = 1,     //右侧
  74.         IconPosition_Top = 2,       //顶部
  75.         IconPosition_Bottom = 3     //底部
  76.     };

  77.     enum LinePosition {
  78.         LinePosition_Left = 0,      //左侧
  79.         LinePosition_Right = 1,     //右侧
  80.         LinePosition_Top = 2,       //顶部
  81.         LinePosition_Bottom = 3     //底部
  82.     };

  83.     explicit NavButton(QWidget *parent = 0);

  84. protected:
  85.     void enterEvent(QEvent *);
  86.     void leaveEvent(QEvent *);
  87.     void paintEvent(QPaintEvent *);
  88.     void drawBg(QPainter *painter);
  89.     void drawText(QPainter *painter);
  90.     void drawIcon(QPainter *painter);
  91.     void drawLine(QPainter *painter);
  92.     void drawTriangle(QPainter *painter);

  93. private:
  94.     int paddingLeft;                    //文字左侧间隔
  95.     int paddingRight;                   //文字右侧间隔
  96.     int paddingTop;                     //文字顶部间隔
  97.     int paddingBottom;                  //文字底部间隔
  98.     TextAlign textAlign;                //文字对齐

  99.     bool showTriangle;                  //显示倒三角
  100.     int triangleLen;                    //倒三角边长
  101.     TrianglePosition trianglePosition;  //倒三角位置
  102.     QColor triangleColor;               //倒三角颜色

  103.     bool showIcon;                      //显示图标
  104.     int iconSpace;                      //图标间隔
  105.     QSize iconSize;                     //图标尺寸
  106.     QPixmap iconNormal;                 //正常图标
  107.     QPixmap iconHover;                  //悬停图标
  108.     QPixmap iconCheck;                  //选中图标

  109.     bool showLine;                      //显示线条
  110.     int lineSpace;                      //线条间隔
  111.     int lineWidth;                      //线条宽度
  112.     LinePosition linePosition;          //线条位置
  113.     QColor lineColor;                   //线条颜色

  114.     QColor normalBgColor;               //正常背景颜色
  115.     QColor hoverBgColor;                //悬停背景颜色
  116.     QColor checkBgColor;                //选中背景颜色
  117.     QColor normalTextColor;             //正常文字颜色
  118.     QColor hoverTextColor;              //悬停文字颜色
  119.     QColor checkTextColor;              //选中文字颜色

  120.     QBrush normalBgBrush;               //正常背景画刷
  121.     QBrush hoverBgBrush;                //悬停背景画刷
  122.     QBrush checkBgBrush;                //选中背景画刷

  123.     bool hover;                         //悬停标志位

  124. public:
  125.     int getPaddingLeft()                const;
  126.     int getPaddingRight()               const;
  127.     int getPaddingTop()                 const;
  128.     int getPaddingBottom()              const;
  129.     TextAlign getTextAlign()            const;

  130.     bool getShowTriangle()              const;
  131.     int getTriangleLen()                const;
  132.     TrianglePosition getTrianglePosition()const;
  133.     QColor getTriangleColor()           const;

  134.     bool getShowIcon()                  const;
  135.     int getIconSpace()                  const;
  136.     QSize getIconSize()                 const;
  137.     QPixmap getIconNormal()             const;
  138.     QPixmap getIconHover()              const;
  139.     QPixmap getIconCheck()              const;

  140.     bool getShowLine()                  const;
  141.     int getLineSpace()                  const;
  142.     int getLineWidth()                  const;
  143.     LinePosition getLinePosition()      const;
  144.     QColor getLineColor()               const;

  145.     QColor getNormalBgColor()           const;
  146.     QColor getHoverBgColor()            const;
  147.     QColor getCheckBgColor()            const;
  148.     QColor getNormalTextColor()         const;
  149.     QColor getHoverTextColor()          const;
  150.     QColor getCheckTextColor()          const;

  151.     QSize sizeHint()                    const;
  152.     QSize minimumSizeHint()             const;

  153. public Q_SLOTS:
  154.     //设置文字间隔
  155.     void setPaddingLeft(int paddingLeft);
  156.     void setPaddingRight(int paddingRight);
  157.     void setPaddingTop(int paddingTop);
  158.     void setPaddingBottom(int paddingBottom);
  159.     void setPadding(int padding);
  160.     void setPadding(int paddingLeft, int paddingRight, int paddingTop, int paddingBottom);

  161.     //设置文字对齐
  162.     void setTextAlign(const TextAlign &textAlign);

  163.     //设置显示倒三角
  164.     void setShowTriangle(bool showTriangle);
  165.     //设置倒三角边长
  166.     void setTriangleLen(int triangleLen);
  167.     //设置倒三角位置
  168.     void setTrianglePosition(const TrianglePosition &trianglePosition);
  169.     //设置倒三角颜色
  170.     void setTriangleColor(const QColor &triangleColor);

  171.     //设置显示图标
  172.     void setShowIcon(bool showIcon);
  173.     //设置图标间隔
  174.     void setIconSpace(int iconSpace);
  175.     //设置图标尺寸
  176.     void setIconSize(const QSize &iconSize);
  177.     //设置正常图标
  178.     void setIconNormal(const QPixmap &iconNormal);
  179.     //设置悬停图标
  180.     void setIconHover(const QPixmap &iconHover);
  181.     //设置按下图标
  182.     void setIconCheck(const QPixmap &iconCheck);

  183.     //设置显示线条
  184.     void setShowLine(bool showLine);
  185.     //设置线条间隔
  186.     void setLineSpace(int lineSpace);
  187.     //设置线条宽度
  188.     void setLineWidth(int lineWidth);
  189.     //设置线条位置
  190.     void setLinePosition(const LinePosition &linePosition);
  191.     //设置线条颜色
  192.     void setLineColor(const QColor &lineColor);

  193.     //设置正常背景颜色
  194.     void setNormalBgColor(const QColor &normalBgColor);
  195.     //设置悬停背景颜色
  196.     void setHoverBgColor(const QColor &hoverBgColor);
  197.     //设置选中背景颜色
  198.     void setCheckBgColor(const QColor &checkBgColor);

  199.     //设置正常文字颜色
  200.     void setNormalTextColor(const QColor &normalTextColor);
  201.     //设置悬停文字颜色
  202.     void setHoverTextColor(const QColor &hoverTextColor);
  203.     //设置选中文字颜色
  204.     void setCheckTextColor(const QColor &checkTextColor);

  205.     //设置正常背景画刷
  206.     void setNormalBgBrush(const QBrush &normalBgBrush);
  207.     //设置悬停背景画刷
  208.     void setHoverBgBrush(const QBrush &hoverBgBrush);
  209.     //设置选中背景画刷
  210.     void setCheckBgBrush(const QBrush &checkBgBrush);

  211. };

  212. #endif // NAVBUTTON_H
复制代码
核心代码

  1. void NavButton::paintEvent(QPaintEvent *)
  2. {
  3.     //绘制准备工作,启用反锯齿
  4.     QPainter painter(this);
  5.     painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);

  6.     //绘制背景
  7.     drawBg(&painter);
  8.     //绘制文字
  9.     drawText(&painter);
  10.     //绘制图标
  11.     drawIcon(&painter);
  12.     //绘制边框线条
  13.     drawLine(&painter);
  14.     //绘制倒三角
  15.     drawTriangle(&painter);
  16. }

  17. void NavButton::drawBg(QPainter *painter)
  18. {
  19.     painter->save();
  20.     painter->setPen(Qt::NoPen);

  21.     int width = this->width();
  22.     int height = this->height();

  23.     QRect bgRect;
  24.     if (linePosition == LinePosition_Left) {
  25.         bgRect = QRect(lineSpace, 0, width - lineSpace, height);
  26.     } else if (linePosition == LinePosition_Right) {
  27.         bgRect = QRect(0, 0, width - lineSpace, height);
  28.     } else if (linePosition == LinePosition_Top) {
  29.         bgRect = QRect(0, lineSpace, width, height - lineSpace);
  30.     } else if (linePosition == LinePosition_Bottom) {
  31.         bgRect = QRect(0, 0, width, height - lineSpace);
  32.     }

  33.     //如果画刷存在则取画刷
  34.     QBrush bgBrush;
  35.     if (isChecked()) {
  36.         bgBrush = checkBgBrush;
  37.     } else if (hover) {
  38.         bgBrush = hoverBgBrush;
  39.     } else {
  40.         bgBrush = normalBgBrush;
  41.     }

  42.     if (bgBrush != Qt::NoBrush) {
  43.         painter->setBrush(bgBrush);
  44.     } else {
  45.         //根据当前状态选择对应颜色
  46.         QColor bgColor;
  47.         if (isChecked()) {
  48.             bgColor = checkBgColor;
  49.         } else if (hover) {
  50.             bgColor = hoverBgColor;
  51.         } else {
  52.             bgColor = normalBgColor;
  53.         }

  54.         painter->setBrush(bgColor);
  55.     }

  56.     painter->drawRect(bgRect);

  57.     painter->restore();
  58. }

  59. void NavButton::drawText(QPainter *painter)
  60. {
  61.     painter->save();
  62.     painter->setBrush(Qt::NoBrush);

  63.     //根据当前状态选择对应颜色
  64.     QColor textColor;
  65.     if (isChecked()) {
  66.         textColor = checkTextColor;
  67.     } else if (hover) {
  68.         textColor = hoverTextColor;
  69.     } else {
  70.         textColor = normalTextColor;
  71.     }

  72.     QRect textRect = QRect(paddingLeft, paddingTop, width() - paddingLeft - paddingRight, height() - paddingTop - paddingBottom);
  73.     painter->setPen(textColor);
  74.     painter->drawText(textRect, textAlign | Qt::AlignVCenter, text());

  75.     painter->restore();
  76. }

  77. void NavButton::drawIcon(QPainter *painter)
  78. {
  79.     if (!showIcon) {
  80.         return;
  81.     }

  82.     painter->save();

  83.     QPixmap pix;
  84.     if (isChecked()) {
  85.         pix = iconCheck;
  86.     } else if (hover) {
  87.         pix = iconHover;
  88.     } else {
  89.         pix = iconNormal;
  90.     }

  91.     if (!pix.isNull()) {
  92.         //等比例平滑缩放图标
  93.         pix = pix.scaled(iconSize, Qt::KeepAspectRatio, Qt::SmoothTransformation);
  94.         painter->drawPixmap(iconSpace, (height() - iconSize.height()) / 2, pix);
  95.     }

  96.     painter->restore();
  97. }

  98. void NavButton::drawLine(QPainter *painter)
  99. {
  100.     if (!showLine) {
  101.         return;
  102.     }

  103.     if (!isChecked()) {
  104.         return;
  105.     }

  106.     painter->save();

  107.     QPen pen;
  108.     pen.setWidth(lineWidth);
  109.     pen.setColor(lineColor);
  110.     painter->setPen(pen);

  111.     //根据线条位置设置线条坐标
  112.     QPoint pointStart, pointEnd;
  113.     if (linePosition == LinePosition_Left) {
  114.         pointStart = QPoint(0, 0);
  115.         pointEnd = QPoint(0, height());
  116.     } else if (linePosition == LinePosition_Right) {
  117.         pointStart = QPoint(width(), 0);
  118.         pointEnd = QPoint(width(), height());
  119.     } else if (linePosition == LinePosition_Top) {
  120.         pointStart = QPoint(0, 0);
  121.         pointEnd = QPoint(width(), 0);
  122.     } else if (linePosition == LinePosition_Bottom) {
  123.         pointStart = QPoint(0, height());
  124.         pointEnd = QPoint(width(), height());
  125.     }

  126.     painter->drawLine(pointStart, pointEnd);

  127.     painter->restore();
  128. }

  129. void NavButton::drawTriangle(QPainter *painter)
  130. {
  131.     if (!showTriangle) {
  132.         return;
  133.     }

  134.     //选中或者悬停显示
  135.     if (!hover && !isChecked()) {
  136.         return;
  137.     }

  138.     painter->save();
  139.     painter->setPen(Qt::NoPen);
  140.     painter->setBrush(triangleColor);

  141.     //绘制在右侧中间,根据设定的倒三角的边长设定三个点位置
  142.     int width = this->width();
  143.     int height = this->height();
  144.     int midWidth = width / 2;
  145.     int midHeight = height / 2;

  146.     QPolygon pts;
  147.     if (trianglePosition == TrianglePosition_Left) {
  148.         pts.setPoints(3, triangleLen, midHeight, 0, midHeight - triangleLen, 0, midHeight + triangleLen);
  149.     } else if (trianglePosition == TrianglePosition_Right) {
  150.         pts.setPoints(3, width - triangleLen, midHeight, width, midHeight - triangleLen, width, midHeight + triangleLen);
  151.     } else if (trianglePosition == TrianglePosition_Top) {
  152.         pts.setPoints(3, midWidth, triangleLen, midWidth - triangleLen, 0, midWidth + triangleLen, 0);
  153.     } else if (trianglePosition == TrianglePosition_Bottom) {
  154.         pts.setPoints(3, midWidth, height - triangleLen, midWidth - triangleLen, height, midWidth + triangleLen, height);
  155.     }

  156.     painter->drawPolygon(pts);

  157.     painter->restore();
  158. }
复制代码



1. 超过140个精美控件,涵盖了各种仪表盘、进度条、进度球、指南针、曲线图、标尺、温度计、导航条、导航栏,flatui、高亮按钮、滑动选择器、农历等。远超qwt集成的控件数量。
2. 每个类都可以独立成一个单独的控件,零耦合,每个控件一个头文件和一个实现文件,不依赖其他文件,方便单个控件以源码形式集成到项目中,较少代码量。qwt的控件类环环相扣,高度耦合,想要使用其中一个控件,必须包含所有的代码。
3. 全部纯Qt编写,QWidget+QPainter绘制,支持Qt4.6到Qt5.12的任何Qt版本,支持mingw、msvc、gcc等编译器,不乱码,可直接集成到Qt  Creator中,和自带的控件一样使用,大部分效果只要设置几个属性即可,极为方便。
4. 每个控件都有一个对应的单独的包含该控件源码的DEMO,方便参考使用。同时还提供一个所有控件使用的集成的DEMO。
5. 每个控件的源代码都有详细中文注释,都按照统一设计规范编写,方便学习自定义控件的编写。
6. 每个控件默认配色和demo对应的配色都非常精美。
7. 超过120个可见控件,6个不可见控件。
8. 部分控件提供多种样式风格选择,多种指示器样式选择。
9. 所有控件自适应窗体拉伸变化。
10.  集成自定义控件属性设计器,支持拖曳设计,所见即所得,支持导入导出xml格式。
11. 自带activex控件demo,所有控件可以直接运行在ie浏览器中。
12. 集成fontawesome图形字体+阿里巴巴iconfont收藏的几百个图形字体,享受图形字体带来的乐趣。
13. 所有控件最后生成一个dll动态库文件,可以直接集成到qtcreator中拖曳设计使用。

SDK下载
- SDK下载链接:https://pan.baidu.com/s/1tD9v1YPfE2fgYoK6lqUr1Q 提取码:lyhk
- 自定义控件+属性设计器欣赏:https://pan.baidu.com/s/1l6L3rKSiLu_uYi7lnL3ibQ 提取码:tmvl
- 下载链接中包含了各个版本的动态库文件,所有控件的头文件,使用demo。
- 自定义控件插件开放动态库dll使用(永久免费),无任何后门和限制,请放心使用。
- 目前已提供25个版本的dll,其中包括了qt5.12.3 msvc2017 32+64 mingw 32+64 的。
- 不定期增加控件和完善控件,不定期更新SDK,欢迎各位提出建议,谢谢!
- widget版本(QQ:517216493)qml版本(QQ:373955953)三峰驼(QQ:278969898)。



本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册