Qt实现自定义滑动按钮

　　今天记录下，使用Qt现有的组件，搭配来实现一个滑动按钮的效果。我看之前有人做过类似的，不过是在paintEvent事件里用画笔画的，我呢，比较懒，就使用现成的组件来实现吧，下面看下效果：

　　

　　这是利用自定义的类继承QWidget，里面再加一个QLabel，来实现上面的效果。顺便提一下，以后可以将自己做得组件保存下来，方便以后项目里使用。

废话不多说，直接上核心代码，没玩过的，都来手动体验下吧。

　　下面是头文件：

#ifndef CUSTOMBUTTON_H #define CUSTOMBUTTON_H #include <QWidget> #include <QLabel> #include <QTimer> #include <QMouseEvent> #include <QStyleOption> #include <QPainter>

class CustomButton : public QWidget { Q_OBJECT public: explicit CustomButton(QWidget *parent = nullptr,int width=50, int height=20); private: QLabel* myLabel; QTimer timer; int m_width; int m_height; int dir; int position; int max; int min; int length; protected: void paintEvent(QPaintEvent *event) override; //这个必须要重写，不然，样式表加载无效。
    void mousePressEvent(QMouseEvent *event) override; public slots: void move_slot(); //定时器的超时槽函数，用来实现按钮的滑动效果
public: void init(); }; #endif // CUSTOMBUTTON_H

 

　　下面是cpp文件：

#include "CustomButton.h"

/*** 我的是MSVC的编译器，必须要这段代码，不然中文就是乱码。如果Mingw编译器可以忽略。 #if _MSC_VER >=1800 #pragma execution_character_set("utf-8") #endif ********/ CustomButton::CustomButton(QWidget *parent,int width, int height) : QWidget(parent),m_width(width),m_height(height),position(0) { max = qMax(m_width,m_height); min = m_width>m_height?m_height:m_width; length = max - min; dir = m_width>=m_height? Qt::AlignLeft : Qt::AlignTop; connect(&timer,SIGNAL(timeout()),this,SLOT(move_slot())); init(); } void CustomButton::paintEvent(QPaintEvent *event) { Q_UNUSED(event) QStyleOption opt; opt.init(this); QPainter painter(this); style()->drawPrimitive(QStyle::PE_Widget,&opt,&painter,this); } void CustomButton::mousePressEvent(QMouseEvent *event) { if(event->button()==Qt::LeftButton) { switch (dir) { case Qt::AlignLeft: case Qt::AlignRight: position = myLabel->pos().x(); timer.start(5); break; case Qt::AlignTop: case Qt::AlignBottom: position = myLabel->pos().y(); timer.start(5); break; } } QWidget::mousePressEvent(event); } void CustomButton::move_slot() { switch(dir) { case Qt::AlignLeft: if(position>length) { timer.stop(); this->setStyleSheet(QString("CustomButton{background-color:red;border-radius:%1px;}").arg(min/2)); myLabel->setText("开"); myLabel->setStyleSheet(QString("#myLabel{background-color: /*lightgrey*/rgb(144,236,144);border-radius:%1px}").arg(min/2)); dir = Qt::AlignRight; return; } ++position; myLabel->move(position,0); break; case Qt::AlignRight: if(position<=0) { timer.stop(); this->setStyleSheet(QString("CustomButton{background-color:rgb(144,236,144);border-radius:%1px;}").arg(min/2)); myLabel->setStyleSheet(QString("#myLabel{background-color:red;border-radius:%1px;}").arg(min/2)); myLabel->setText("关"); dir = Qt::AlignLeft; return; } --position; myLabel->move(position,0); break; case Qt::AlignTop: if(position>length) { timer.stop(); this->setStyleSheet(QString("CustomButton{background-color:red;border-radius:%1px;}").arg(min/2)); myLabel->setText("开"); myLabel->setStyleSheet(QString("#myLabel{background-color: /*lightgrey*/rgb(144,236,144);border-radius:%1px}").arg(min/2)); dir = Qt::AlignBottom; return; } ++position; myLabel->move(0,position); break; case Qt::AlignBottom: if(position<=0) { timer.stop(); this->setStyleSheet(QString("CustomButton{background-color:rgb(144,236,144);border-radius:%1px;}").arg(min/2)); myLabel->setStyleSheet(QString("#myLabel{background-color:red;border-radius:%1px;}").arg(min/2)); myLabel->setText("关"); dir = Qt::AlignTop; return; } --position; myLabel->move(0,position); break; } } void CustomButton::init() { this->resize(m_width,m_height); QString leftBtn_style = QString("CustomButton{background-color:rgb(144,236,144);border-radius:%1px;}").arg(min/2); this->setStyleSheet(leftBtn_style); myLabel = new QLabel(this); myLabel->setObjectName("myLabel"); myLabel->resize(min,min); myLabel->setText("关"); myLabel->setAlignment(Qt::AlignCenter); QString lab_style = QString("#myLabel{background-color: red;border-radius:%1px}").arg(min/2); myLabel->setStyleSheet(lab_style); this->setFixedSize(m_width,m_height); }

 

最后呢，在主函数调用下，并new一个我们写好的类的实例，来展示效果吧。

Widget::Widget(QWidget *parent) : QWidget(parent) , ui(new Ui::Widget) { ui->setupUi(this); btn1 = new CustomButton(this,58,22); btn2 = new CustomButton(this,60,20); btn3 = new CustomButton(this,18,50); btn4 = new CustomButton(this,50,22); label1 = new QLabel("客厅开关:"); label2 = new QLabel("卧室开关:"); label3 = new QLabel("水泵开关:"); label4 = new QLabel("总闸开关:"); form = new QFormLayout(this); //这里是表单布局
   form->addRow(label1,btn1); form->addRow(label2,btn2); form->addRow(label3,btn3); form->addRow(label4,btn4); setStyleSheet("QWidget{background-color:rgb(124,134,146);}.QLabel{background-color:lightgrey;border-radius:3px;}"); resize(sizeHint()); }

　　上面的代码，实现的功能如下：

　　1. 可以自定义组件的大小，实例化时可以不指定大小，因为有默认的参数。

　　2. 如果宽度小于高度，就会实现上下滑动，否则就是左右滑动。

　　目前就是这些功能，当然还可以添加自定义颜色呀之类的，那么只要在源码里添加相关的接口供外部调用就行了。