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

Qt编写自定义控件8-动画按钮组控件

0
回复
471
查看
[复制链接]
累计签到:7 天
连续签到:1 天
来源: 2019-4-25 17:19:52 显示全部楼层 |阅读模式
前言
动画按钮组控件可以用来当做各种漂亮的导航条用,既可以设置成顶部底部+左侧右侧,还自带精美的滑动效果,还可以设置悬停滑动等各种颜色,原创作者雨田哥(QQ:3246214072),驰骋Qt控件界多年,雨田哥是我见过的在这块水平相当牛逼的,在我之上,想要什么效果都可以搞出来,大家也可以找他定制控件,物美价廉!

实现的功能
* 1:可设置线条的宽度
* 2:可设置线条的颜色
* 3:可设置线条的位置 上下左右
* 4:可设置按钮的正常+悬停+选中背景颜色
* 5:可设置文字的正常+悬停+选中背景颜色
* 6:切换位置线条自动跟随
* 7:可设置按钮字符串组合生成按钮组
* 8:可设置线条滑动的速度

效果图

头文件代码

  1. #ifndef BUTTONGROUP_H
  2. #define BUTTONGROUP_H

  3. /**
  4. * 动画按钮组控件 作者:feiyangqingyun(QQ:517216493) 2018-9-12
  5. * 参考雨田哥(QQ:3246214072) https://blog.csdn.net/ly305750665/article/details/80736504
  6. * 1:可设置线条的宽度
  7. * 2:可设置线条的颜色
  8. * 3:可设置线条的位置 上下左右
  9. * 4:可设置按钮的正常+悬停+选中背景颜色
  10. * 5:可设置文字的正常+悬停+选中背景颜色
  11. * 6:切换位置线条自动跟随
  12. * 7:可设置按钮字符串组合生成按钮组
  13. * 8:可设置线条滑动的速度
  14. */

  15. #include <QWidget>

  16. class QBoxLayout;
  17. class QAbstractButton;
  18. class QButtonGroup;
  19. class QPropertyAnimation;

  20. #ifdef quc
  21. #if (QT_VERSION < QT_VERSION_CHECK(5,7,0))
  22. #include <QtDesigner/QDesignerExportWidget>
  23. #else
  24. #include <QtUiPlugin/QDesignerExportWidget>
  25. #endif

  26. class QDESIGNER_WIDGET_EXPORT ButtonGroup : public QWidget
  27. #else
  28. class ButtonGroup : public QWidget
  29. #endif

  30. {
  31.     Q_OBJECT
  32.     Q_ENUMS(LinePosition)

  33.     Q_PROPERTY(int interval READ getInterval WRITE setInterval)
  34.     Q_PROPERTY(int lineLen READ getLineLen WRITE setLineLen)
  35.     Q_PROPERTY(int index READ getIndex WRITE setIndex)
  36.     Q_PROPERTY(QString texts READ getTexts WRITE setTexts)
  37.     Q_PROPERTY(LinePosition linePosition READ getLinePosition WRITE setLinePosition)

  38.     Q_PROPERTY(QColor lineColor READ getLineColor WRITE setLineColor)
  39.     Q_PROPERTY(QColor btnNormalColor READ getBtnNormalColor WRITE setBtnNormalColor)
  40.     Q_PROPERTY(QColor btnHoverColor READ getBtnHoverColor WRITE setBtnHoverColor)
  41.     Q_PROPERTY(QColor btnDarkColor READ getBtnDarkColor WRITE setBtnDarkColor)
  42.     Q_PROPERTY(QColor textNormalColor READ getTextNormalColor WRITE setTextNormalColor)
  43.     Q_PROPERTY(QColor textHoverColor READ getTextHoverColor WRITE setTextHoverColor)
  44.     Q_PROPERTY(QColor textDarkColor READ getTextDarkColor WRITE setTextDarkColor)
  45.     Q_PROPERTY(QColor baseColor READ getBaseColor WRITE setBaseColor)

  46. public:
  47.     enum LinePosition {
  48.         LinePosition_Left = 0,     //左边
  49.         LinePosition_Right = 1,    //右边
  50.         LinePosition_Top = 2,      //上边
  51.         LinePosition_Bottom = 3    //下边
  52.     };

  53.     explicit ButtonGroup(QWidget *parent = 0);
  54.     ~ButtonGroup();

  55. protected:
  56.     void resizeEvent(QResizeEvent *);
  57.     void showEvent(QShowEvent *);
  58.     void paintEvent(QPaintEvent *);

  59. private:
  60.     int interval;                   //线条移动的速度
  61.     int lineLen;                    //线条的长度
  62.     int index;                      //当前索引
  63.     QString texts;                  //按钮文本集合
  64.     LinePosition linePosition;      //线条方向

  65.     QColor lineColor;               //线条的颜色
  66.     QColor btnNormalColor;          //按钮正常颜色
  67.     QColor btnHoverColor;           //按钮经过颜色
  68.     QColor btnDarkColor;            //按钮加深选中颜色
  69.     QColor textNormalColor;         //文字正常颜色
  70.     QColor textHoverColor;          //文字经过颜色
  71.     QColor textDarkColor;           //文字加深选中颜色
  72.     QColor baseColor;               //基准颜色

  73.     int previousIndex;              //上一个按钮索引
  74.     int offset;                     //偏移量
  75.     QSize btnSize;                  //按钮的尺寸
  76.     QBoxLayout *layout;             //布局
  77.     QButtonGroup *btnGroup;         //按钮组
  78.     QList<QAbstractButton *> btns;  //按钮集合
  79.     QPropertyAnimation *animation;  //属性动画

  80. private slots:
  81.     void onButtonClicked(int index);
  82.     void onValueChanged(const QVariant &value);

  83. public:
  84.     int getInterval()               const;
  85.     int getLineLen()                const;
  86.     int getIndex()                  const;
  87.     QString getTexts()              const;
  88.     LinePosition getLinePosition()  const;

  89.     QColor getLineColor()           const;
  90.     QColor getBtnNormalColor()      const;
  91.     QColor getBtnHoverColor()       const;
  92.     QColor getBtnDarkColor()        const;
  93.     QColor getTextNormalColor()     const;
  94.     QColor getTextHoverColor()      const;
  95.     QColor getTextDarkColor()       const;
  96.     QColor getBaseColor()           const;

  97.     QSize sizeHint()                const;
  98.     QSize minimumSizeHint()         const;

  99. public Q_SLOTS:
  100.     //设置线条移动的速度
  101.     void setInterval(int interval);
  102.     //设置线条的尺寸
  103.     void setLineLen(int lineLen);
  104.     //设置当前索引,选中按钮
  105.     void setIndex(int index);
  106.     //设置按钮文本集合
  107.     void setTexts(const QString &texts);
  108.     //设置线条方向
  109.     void setLinePosition(const LinePosition &linePosition);

  110.     //设置线条颜色
  111.     void setLineColor(const QColor &lineColor);
  112.     //设置按钮正常颜色
  113.     void setBtnNormalColor(const QColor &btnNormalColor);
  114.     //设置按钮悬停颜色
  115.     void setBtnHoverColor(const QColor &btnHoverColor);
  116.     //设置鼠标选中颜色
  117.     void setBtnDarkColor(const QColor &btnDarkColor);
  118.     //设置文字正常颜色
  119.     void setTextNormalColor(const QColor &textNormalColor);
  120.     //设置文字悬停颜色
  121.     void setTextHoverColor(const QColor &textHoverColor);
  122.     //设置文字选中颜色
  123.     void setTextDarkColor(const QColor &textDarkColor);
  124.     //设置基准颜色
  125.     void setBaseColor(const QColor &baseColor, bool normal = false);

  126.     //初始化按下按钮
  127.     void init();
  128.     //添加按钮
  129.     void addButton(QAbstractButton *btn, int id);
  130.     //结束添加
  131.     void addFinsh();   
  132.     //设置按钮样式
  133.     void setBtnStyle();

  134. Q_SIGNALS:
  135.     void buttonClicked(int index);
  136.     void buttonClicked(QAbstractButton *btn);
  137. };

  138. #endif // BUTTONGROUP_H
复制代码
核心代码
  1. void ButtonGroup::paintEvent(QPaintEvent *)
  2. {
  3.     if (btns.count() == 0) {
  4.         return;
  5.     }

  6.     QPainter painter(this);
  7.     painter.setRenderHints(QPainter::Antialiasing);

  8.     //设置颜色
  9.     painter.setPen(Qt::NoPen);
  10.     painter.setBrush(lineColor);

  11.     //根据不同的位置绘制线条区域,也可以改成绘制两点之间的距离
  12.     if (linePosition == LinePosition_Top) {
  13.         painter.drawRect(offset, 0, btnSize.width(), lineLen);
  14.     } else if (linePosition == LinePosition_Bottom) {
  15.         painter.drawRect(offset, this->height() - lineLen, btnSize.width(), lineLen);
  16.     } else if (linePosition == LinePosition_Left) {
  17.         painter.drawRect(0, offset, lineLen, btnSize.height());
  18.     } else if (linePosition == LinePosition_Right) {
  19.         painter.drawRect(this->width() - lineLen, offset, lineLen, btnSize.height());
  20.     }
  21. }

  22. void ButtonGroup::onButtonClicked(int index)
  23. {
  24.     //当前按钮选中
  25.     btnGroup->button(index)->setChecked(true);

  26.     //更新当前按钮和上一个按钮的索引
  27.     previousIndex = this->index;
  28.     this->index = index;

  29.     //根据线条位置设置动画启动和结束值
  30.     if (linePosition == LinePosition_Top || linePosition == LinePosition_Bottom) {
  31.         animation->setStartValue(btns.at(previousIndex)->x());
  32.         animation->setEndValue(btns.at(index)->x());
  33.     } else if (linePosition == LinePosition_Left || linePosition == LinePosition_Right) {
  34.         animation->setStartValue(btns.at(previousIndex)->y());
  35.         animation->setEndValue(btns.at(index)->y());
  36.     }

  37.     //启动动画移动线条
  38.     animation->start();

  39.     //发送信号出去
  40.     emit buttonClicked(index);
  41.     emit buttonClicked(btns.at(index));
  42. }
复制代码



控件介绍

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使用(永久免费),无任何后门和限制,请放心使用。
- 不定期增加控件和完善控件,不定期更新SDK,欢迎各位提出建议,谢谢!
- widget版本(QQ:517216493)qml版本(QQ:373955953)三峰驼(QQ:278969898)。






本帖子中包含更多资源

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

x
回复

使用道具 举报

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