Qt自定义控件 开关按钮

  • A+
所属分类:Qt专栏

效果

Qt自定义控件 开关按钮

流程

1、定义一个类,继承某个已有的qt界面类,如QLabel

2、提供设置属性的方法,并在设置属性后调用repaint()方法刷新控件

3、重写paintEvent方法,每次调用repaint()方法时,都会调用paintEvent()进行重绘

4、重写鼠标响应函数,如重写mousePressEvent函数,发出自定义控件的鼠标点击信号;如重写mouseMoveEvent函数,控制鼠标在控件上移动时的样式

5、其他代码调用自定义控件

代码

自定义控件的头文件

  1. #ifndef QSWITCHBUTTON_H2
  2. #define QSWITCHBUTTON_H2
  3. #include <QLabel>
  4. #include <QWidget>
  5. class QSwitchButton : public QLabel
  6. {
  7.     Q_OBJECT
  8. signals:
  9.     /*
  10.      * @brief       button点击信号
  11.      * @param[in]   is_selected 当前是否选中
  12.      */
  13.     void clicked();
  14.     void clicked(bool is_selected);
  15. public:
  16.     QSwitchButton(QWidget *parent=0);
  17.     ~QSwitchButton();
  18.     /*
  19.      * @brief   按钮样式
  20.      */
  21.     typedef enum _buttonStyle{
  22.         Rectage,    //矩形样式
  23.         Ellipse,    //椭圆样式
  24.     }ButtonStyle;
  25.     /*
  26.      * @brief   设置按钮样式
  27.      */
  28.     void SetButtonStyle(ButtonStyle button_style);
  29.     /*
  30.      * @brief       设置button的大小
  31.      */
  32.     void SetSize(int width, int height);
  33.     void SetSize(const QSize& size);
  34.     /*
  35.      * @brief       设置背景颜色
  36.      * @param[in]   selected_color      选中的颜色
  37.      * @param[in]   not_selected_color  未选中的颜色
  38.      */
  39.     void SetBackgroundColor(const QColor& selected_color, const QColor& not_selected_color);
  40.     /*
  41.      * @brief       这是滑块颜色
  42.      * @param[in]   selected_color      选中的颜色
  43.      * @param[in]   not_selected_color  未选中的颜色
  44.      */
  45.     void SetSliderColor(const QColor& selected_color, const QColor& not_selected_color);
  46.     /*
  47.      * @brief       设置圆角弧度
  48.      * @param[in]   round   设置的弧度
  49.      */
  50.     void SetRound(int round);
  51.     /*
  52.      * @brief       是否开启抗锯齿
  53.      */
  54.     void EnableAntiAliasing(bool enable);
  55.     bool IsAntiAliasing();
  56.     /*
  57.      * @brief   当前是否是选中状态
  58.      */
  59.     void SetSelected(bool is_selected);
  60.     bool IsSelected();
  61.     /*
  62.      * @brief   是否启用
  63.      */
  64.     void SetEnabel(bool is_enable);
  65.     bool IsEnable();
  66. protected:
  67.     virtual void paintEvent(QPaintEvent* event);
  68.     virtual void mousePressEvent(QMouseEvent *event);
  69.     virtual void mouseMoveEvent(QMouseEvent *event);
  70. private:
  71.     void DrawBackRect(QPainter* painter, const QRectF& rect);
  72.     void DrawSliderRect(QPainter* painter, const QRectF& rect);
  73. private:
  74.     bool isEnable;  //是否启用
  75.     bool isSelected;    //当前是否为选中状态
  76.     bool isAntiAliasing;    //是否开启抗锯齿
  77.     int buttonWidth;
  78.     int buttonHeight;
  79.     QColor backgroundColorSelected;
  80.     QColor backgroundColorNotSelected;
  81.     QColor sliderColorSelected;
  82.     QColor sliderColorNotSelected;
  83.     int rectRound;
  84.     ButtonStyle buttonStyle;
  85. };
  86. #endif // QSWITCHBUTTON_H

自定义控件的源文件

  1. #include "qswitchbutton.h"
  2. #include <QPainter>
  3. #include <QRectF>
  4. QSwitchButton::QSwitchButton(QWidget *parent)
  5.     : QLabel(parent), isSelected(true), buttonWidth(100), buttonHeight(40)
  6.     , backgroundColorSelected(Qt::white), backgroundColorNotSelected("#E7E3E7")
  7.     , sliderColorSelected("#63BAFF"), sliderColorNotSelected("#7B797B")
  8.     , rectRound(30), isAntiAliasing(true), buttonStyle(Ellipse), isEnable(true)
  9. {
  10.     resize(buttonWidth, buttonHeight);
  11.     setMouseTracking(true);
  12. }
  13. QSwitchButton::~QSwitchButton()
  14. {
  15. }
  16. void QSwitchButton::SetButtonStyle(ButtonStyle button_style)
  17. {
  18.     buttonStyle = button_style;
  19.     repaint();
  20. }
  21. void QSwitchButton::SetSize(int width, int height)
  22. {
  23.     buttonWidth = width;
  24.     buttonHeight = height;
  25.     resize(buttonWidth, buttonHeight);
  26.     repaint();
  27. }
  28. void QSwitchButton::SetSize(const QSize& size)
  29. {
  30.     buttonWidth = size.width();
  31.     buttonHeight = size.height();
  32.     resize(buttonWidth, buttonHeight);
  33.     repaint();
  34. }
  35. void QSwitchButton::SetBackgroundColor(const QColor& selected_color, const QColor& not_selected_color)
  36. {
  37.     backgroundColorSelected = selected_color;
  38.     backgroundColorNotSelected = not_selected_color;
  39.     repaint();
  40. }
  41. void QSwitchButton::SetSliderColor(const QColor& selected_color, const QColor& not_selected_color)
  42. {
  43.     sliderColorSelected = selected_color;
  44.     sliderColorNotSelected = not_selected_color;
  45.     repaint();
  46. }
  47. void QSwitchButton::SetRound(int round)
  48. {
  49.     rectRound = round;
  50.     repaint();
  51. }
  52. void QSwitchButton::EnableAntiAliasing(bool enable)
  53. {
  54.     isAntiAliasing = enable;
  55.     repaint();
  56. }
  57. bool QSwitchButton::IsAntiAliasing()
  58. {
  59.     return isAntiAliasing;
  60. }
  61. void QSwitchButton::SetSelected(bool is_selected)
  62. {
  63.     isSelected = is_selected;
  64.     repaint();
  65. }
  66. bool QSwitchButton::IsSelected()
  67. {
  68.     return isSelected;
  69. }
  70. void QSwitchButton::SetEnabel(bool is_enable)
  71. {
  72.     isEnable = is_enable;
  73.     repaint();
  74. }
  75. bool QSwitchButton::IsEnable()
  76. {
  77.     return isEnable;
  78. }
  79. void QSwitchButton::paintEvent(QPaintEvent* event)
  80. {
  81.     QPainter painter(this);
  82.     if (isAntiAliasing)
  83.     {
  84.         painter.setRenderHint(QPainter::Antialiasing);
  85.         painter.setRenderHint(QPainter::SmoothPixmapTransform);
  86.     }
  87.     if (!isEnable)  //未启用
  88.     {
  89.         painter.setPen(QPen(QColor("#F4F4F4")));
  90.         painter.setBrush(QBrush(QColor("#F4F4F4")));
  91.         DrawBackRect(&painter, QRectF(00, buttonWidth, buttonHeight));
  92.         painter.setPen(QPen(QColor("#ADB2B5")));
  93.         painter.setBrush(QBrush(QColor("#ADB2B5")));
  94.         DrawSliderRect(&painter, QRectF(buttonWidth*2/3-22.5, buttonWidth/3, buttonHeight-5));
  95.     }
  96.     else if (isSelected)
  97.     {
  98.         painter.setPen(QPen(backgroundColorSelected));
  99.         painter.setBrush(QBrush(backgroundColorSelected));
  100.         DrawBackRect(&painter, QRectF(00, buttonWidth, buttonHeight));
  101.         painter.setPen(QPen(sliderColorSelected));
  102.         painter.setBrush(QBrush(sliderColorSelected));
  103.         DrawSliderRect(&painter, QRectF(buttonWidth*2/3-22.5, buttonWidth/3, buttonHeight-5));
  104.     }
  105.     else
  106.     {
  107.         painter.setPen(QPen(backgroundColorNotSelected));
  108.         painter.setBrush(QBrush(backgroundColorNotSelected));
  109.         DrawBackRect(&painter,QRectF(00, buttonWidth, buttonHeight));
  110.         painter.setPen(QPen(sliderColorNotSelected));
  111.         painter.setBrush(QBrush(sliderColorNotSelected));
  112.         DrawSliderRect(&painter,QRectF(22.5, buttonWidth/3, buttonHeight-5));
  113.     }
  114.     return QLabel::paintEvent(event);
  115. }
  116. void QSwitchButton::mousePressEvent(QMouseEvent *event)
  117. {
  118.     if (isEnable)
  119.     {
  120.         isSelected = !isSelected;
  121.         repaint();
  122.         emit clicked();
  123.         emit clicked(isSelected);
  124.     }
  125.     return QLabel::mousePressEvent(event);
  126. }
  127. void QSwitchButton::mouseMoveEvent(QMouseEvent *event)
  128. {
  129.     setCursor(Qt::PointingHandCursor);
  130.     return QLabel::mouseMoveEvent(event);
  131. }
  132. void QSwitchButton::DrawBackRect(QPainter* painter, const QRectF& rect)
  133. {
  134.     switch (buttonStyle)
  135.     {
  136.     case Rectage:
  137.         painter->drawRoundRect(rect, rectRound, rectRound);
  138.         break;
  139.     case Ellipse:
  140.         painter->drawEllipse(00, buttonHeight, buttonHeight);
  141.         painter->drawEllipse(buttonWidth - buttonHeight, 0, buttonHeight, buttonHeight);
  142.         painter->drawRect(buttonHeight/20, buttonWidth-buttonHeight, buttonHeight);
  143.         break;
  144.     default:
  145.         break;
  146.     }
  147. }
  148. void QSwitchButton::DrawSliderRect(QPainter* painter, const QRectF& rect)
  149. {
  150.     switch (buttonStyle)
  151.     {
  152.     case Rectage:
  153.         painter->drawRoundRect(rect, rectRound, rectRound);
  154.         break;
  155.     case Ellipse:
  156.         painter->drawEllipse(rect);
  157.         break;
  158.     default:
  159.         break;
  160.     }
  161. }

调用自定义控件类

  1. int main(int argc, char *argv[])
  2. {
  3.     QApplication a(argc, argv);
  4.     MainWindow w;
  5.     QWidget *wgt = new QWidget;
  6.     QVBoxLayout* layout = new QVBoxLayout;
  7.     wgt->setLayout(layout);
  8.     QSwitchButton* bt = new QSwitchButton(0);
  9.     QSwitchButton* bt2 = new QSwitchButton(0);
  10.     bt2->SetButtonStyle(QSwitchButton::Rectage);
  11.     layout->addWidget(bt);
  12.     layout->addWidget(bt2);
  13.     w.setCentralWidget(wgt);
  14.     w.show();
  15.     w.setStyleSheet("background-color:Orange");
  16.     return a.exec();
  17. }
  • 我的微信
  • weinxin
  • 微信公众号
  • weinxin
阿拉灯aladeng

发表评论

您必须才能发表评论!