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. 如果宽度小于高度，就会实现上下滑动，否则就是左右滑动。

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