Qt自定义控件 开关按钮

  • A+
所属分类：Qt专栏 Qt系列教程

效果

Qt自定义控件 开关按钮

流程

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

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

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

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

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

代码

自定义控件的头文件

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

自定义控件的源文件

  1. #include "qswitchbutton.h"
  3. #include <QPainter>
  4. #include <QRectF>
  6. QSwitchButton::QSwitchButton(QWidget *parent)
  7.     : QLabel(parent), isSelected(true), buttonWidth(100), buttonHeight(40)
  8.     , backgroundColorSelected(Qt::white), backgroundColorNotSelected("#E7E3E7")
  9.     , sliderColorSelected("#63BAFF"), sliderColorNotSelected("#7B797B")
  10.     , rectRound(30), isAntiAliasing(true), buttonStyle(Ellipse), isEnable(true)
  11. {
  12.     resize(buttonWidth, buttonHeight);
  13.     setMouseTracking(true);
  14. }
  17. QSwitchButton::~QSwitchButton()
  18. {
  20. }
  22. void QSwitchButton::SetButtonStyle(ButtonStyle button_style)
  23. {
  24.     buttonStyle = button_style;
  25.     repaint();
  26. }
  28. void QSwitchButton::SetSize(int width, int height)
  29. {
  30.     buttonWidth = width;
  31.     buttonHeight = height;
  33.     resize(buttonWidth, buttonHeight);
  35.     repaint();
  36. }
  38. void QSwitchButton::SetSize(const QSize& size)
  39. {
  40.     buttonWidth = size.width();
  41.     buttonHeight = size.height();
  43.     resize(buttonWidth, buttonHeight);
  45.     repaint();
  46. }
  48. void QSwitchButton::SetBackgroundColor(const QColor& selected_color, const QColor& not_selected_color)
  49. {
  50.     backgroundColorSelected = selected_color;
  51.     backgroundColorNotSelected = not_selected_color;
  53.     repaint();
  54. }
  56. void QSwitchButton::SetSliderColor(const QColor& selected_color, const QColor& not_selected_color)
  57. {
  58.     sliderColorSelected = selected_color;
  59.     sliderColorNotSelected = not_selected_color;
  61.     repaint();
  62. }
  64. void QSwitchButton::SetRound(int round)
  65. {
  66.     rectRound = round;
  67.     repaint();
  68. }
  70. void QSwitchButton::EnableAntiAliasing(bool enable)
  71. {
  72.     isAntiAliasing = enable;
  73.     repaint();
  74. }
  76. bool QSwitchButton::IsAntiAliasing()
  77. {
  78.     return isAntiAliasing;
  79. }
  81. void QSwitchButton::SetSelected(bool is_selected)
  82. {
  83.     isSelected = is_selected;
  85.     repaint();
  86. }
  88. bool QSwitchButton::IsSelected()
  89. {
  90.     return isSelected;
  91. }
  93. void QSwitchButton::SetEnabel(bool is_enable)
  94. {
  95.     isEnable = is_enable;
  97.     repaint();
  98. }
  100. bool QSwitchButton::IsEnable()
  101. {
  102.     return isEnable;
  103. }
  105. void QSwitchButton::paintEvent(QPaintEvent* event)
  106. {
  107.     QPainter painter(this);
  109.     if (isAntiAliasing)
  110.     {
  111.         painter.setRenderHint(QPainter::Antialiasing);
  112.         painter.setRenderHint(QPainter::SmoothPixmapTransform);
  113.     }
  115.     if (!isEnable)  //未启用
  116.     {
  117.         painter.setPen(QPen(QColor("#F4F4F4")));
  118.         painter.setBrush(QBrush(QColor("#F4F4F4")));
  119.         DrawBackRect(&painter, QRectF(0, 0, buttonWidth, buttonHeight));
  121.         painter.setPen(QPen(QColor("#ADB2B5")));
  122.         painter.setBrush(QBrush(QColor("#ADB2B5")));
  123.         DrawSliderRect(&painter, QRectF(buttonWidth*2/3-2, 2.5, buttonWidth/3, buttonHeight-5));
  124.     }
  125.     else if (isSelected)
  126.     {
  127.         painter.setPen(QPen(backgroundColorSelected));
  128.         painter.setBrush(QBrush(backgroundColorSelected));
  129.         DrawBackRect(&painter, QRectF(0, 0, buttonWidth, buttonHeight));
  131.         painter.setPen(QPen(sliderColorSelected));
  132.         painter.setBrush(QBrush(sliderColorSelected));
  133.         DrawSliderRect(&painter, QRectF(buttonWidth*2/3-2, 2.5, buttonWidth/3, buttonHeight-5));
  134.     }
  135.     else
  136.     {
  137.         painter.setPen(QPen(backgroundColorNotSelected));
  138.         painter.setBrush(QBrush(backgroundColorNotSelected));
  139.         DrawBackRect(&painter,QRectF(0, 0, buttonWidth, buttonHeight));
  141.         painter.setPen(QPen(sliderColorNotSelected));
  142.         painter.setBrush(QBrush(sliderColorNotSelected));
  143.         DrawSliderRect(&painter,QRectF(2, 2.5, buttonWidth/3, buttonHeight-5));
  144.     }
  146.     return QLabel::paintEvent(event);
  147. }
  149. void QSwitchButton::mousePressEvent(QMouseEvent *event)
  150. {
  151.     if (isEnable)
  152.     {
  153.         isSelected = !isSelected;
  154.         repaint();
  156.         emit clicked();
  157.         emit clicked(isSelected);
  158.     }
  160.     return QLabel::mousePressEvent(event);
  161. }
  163. void QSwitchButton::mouseMoveEvent(QMouseEvent *event)
  164. {
  165.     setCursor(Qt::PointingHandCursor);
  167.     return QLabel::mouseMoveEvent(event);
  168. }
  170. void QSwitchButton::DrawBackRect(QPainter* painter, const QRectF& rect)
  171. {
  172.     switch (buttonStyle)
  173.     {
  174.     case Rectage:
  175.         painter->drawRoundRect(rect, rectRound, rectRound);
  176.         break;
  177.     case Ellipse:
  178.         painter->drawEllipse(0, 0, buttonHeight, buttonHeight);
  179.         painter->drawEllipse(buttonWidth - buttonHeight, 0, buttonHeight, buttonHeight);
  180.         painter->drawRect(buttonHeight/2, 0, buttonWidth-buttonHeight, buttonHeight);
  181.         break;
  182.     default:
  183.         break;
  184.     }
  185. }
  187. void QSwitchButton::DrawSliderRect(QPainter* painter, const QRectF& rect)
  188. {
  189.     switch (buttonStyle)
  190.     {
  191.     case Rectage:
  192.         painter->drawRoundRect(rect, rectRound, rectRound);
  193.         break;
  194.     case Ellipse:
  195.         painter->drawEllipse(rect);
  196.         break;
  197.     default:
  198.         break;
  199.     }
  200. }

调用自定义控件类

  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. }
Qt大课堂-QtShare

发表评论

您必须登录才能发表评论！