Qt创建一个或多个简易滑动按钮

新手大学生，第一次发文章，还不是很懂，有很多不足的地方西望见谅，有疑问可以直接评论，也希望指点不足之处，有空就会看评论。

这是看到别的博主写了大概，比较感兴趣就稍微做了以下更改和完善:

更改按钮位置和大小更方便，中间也可以是直接传入想要的颜色

我写的比较规律，如果还需要更多的按钮的画，可以跟着我的规律进行增加按钮，也可以进行删减，只要建立的按钮数比设计的少，也可以不用删除直接建立按钮

原版链接会放在最下面。如需删除本篇文章，请联系！！！

以下是全部代码，可以直接当CV工程师。

mainw indow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>

#include "slidebutton.h"

QT_BEGIN_NAMESPACE
namespace Ui {
class MainWindow;
}
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

public:
    slidebutton *mybtn=NULL;

    int a;
    int b;
    int c;
    int d;
    int e;
    int f;
    int g;
    int h;
    int i;
    int j;
    int x;
    int y;

private:
    Ui::MainWindow *ui;
};
#endif // MAINWINDOW_H

mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    //可以加载鼠标事件，如果鼠标事件没反应，可以加上这句试试
    this->setMouseTracking(true);

    //五个按钮的位置,更改直接改变按钮位置
    a=200;
    b=200;

    c=220;
    d=220;

    e=240;
    f=240;

    g=260;
    h=260;

    i=280;
    j=280;

    //按钮的长度和宽度
    x=10;
    y=10;


    mybtn=new slidebutton();
    //如果要显示在mainwindow上一定要加这句话，不然可能无法在mainwindow上显示
    mybtn->setParent(this);

    this->mybtn->set_button_position(a,b,a,b,
                                     c,d,c,d,
                                     e,f,e,f,
                                     g,h,g,h,
                                     i,j,i,j);
    this->mybtn->set_button_size(x,y);

    //下面是传入颜色，我不需要就注释掉了
    /*this->mybtn->set_button_color(QColorConstants::LightGray,QColorConstants::Svg::lightblue,QColorConstants::White);*/
}

MainWindow::~MainWindow()
{
    delete ui;
}

slidebutton.h

#ifndef SLIDEBUTTON_H
#define SLIDEBUTTON_H

#include <QWidget>
#include <QPainter>
#include <QPainterPath>
#include <QMouseEvent>
#include <QTimer>

namespace Ui {
class slidebutton;
}

class slidebutton : public QWidget
{
    Q_OBJECT

public:
    explicit slidebutton(QWidget *parent = nullptr);
    ~slidebutton();

private:
    Ui::slidebutton *ui;

public:
    void set_button_size(const int &w, const int &h);
    void set_button_position(const int & rect_x_first,const int & rect_y_first,const int & circle_x_first,const int & circle_y_first,
                             const int & rect_x_second,const int & rect_y_second,const int & circle_x_second,const int & circle_y_second,
                             const int & rect_x_third,const int & rect_y_third,const int & circle_x_third,const int & circle_y_third,
                             const int & rect_x_forth,const int & rect_y_forth,const int & circle_x_forth,const int & circle_y_forth,
                             const int & rect_x_fifth,const int & rect_y_fifth,const int & circle_x_fifth,const int & circle_y_fifth);
    /*void set_button_color(const QColor & , const QColor & ,const QColor & );*/

protected:
    virtual void paintEvent(QPaintEvent *event);
    virtual void mousePressEvent(QMouseEvent *event);

private:
    bool first_button_status;
    bool second_button_status;
    bool third_button_status;
    bool forth_button_status;
    bool fifth_button_status;

    int m_circle_r;

    int first_button_pos_x;
    int second_button_pos_x;
    int third_button_pos_x;
    int forth_button_pos_x;
    int fifth_button_pos_x;

    int first_button_pos_y;
    int second_button_pos_y;
    int third_button_pos_y;
    int forth_button_pos_y;
    int fifth_button_pos_y;

    int m_move_distance;

    int first_rectposition_x;
    int second_rectposition_x;
    int third_rectposition_x;
    int forth_rectposition_x;
    int fifth_rectposition_x;

    int first_rectposition_y;
    int second_rectposition_y;
    int third_rectposition_y;
    int forth_rectposition_y;
    int fifth_rectposition_y;

    QColor first_backcolor_on;
    QColor second_backcolor_on;
    QColor third_backcolor_on;
    QColor forth_backcolor_on;
    QColor fifth_backcolor_on;

    QColor first_backcolor_off;
    QColor second_backcolor_off;
    QColor third_backcolor_off;
    QColor forth_backcolor_off;
    QColor fifth_backcolor_off;

    QColor first_circle_color;
    QColor second_circle_color;
    QColor third_circle_color;
    QColor forth_circle_color;
    QColor fifth_circle_color;

    QTimer *first_timer;
    QTimer *second_timer;
    QTimer *third_timer;
    QTimer *forth_timer;
    QTimer *fifth_timer;

public slots:
    void slot_first_change();
    void slot_second_change();
    void slot_third_change();
    void slot_forth_change();
    void slot_fifth_change();
};


#endif // SLIDEBUTTON_H

slidebutton.cpp

#include "slidebutton.h"
#include "ui_slidebutton.h"

slidebutton::slidebutton(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::slidebutton),

    //以下皆为全局变量，不然按钮将无法滑动
    first_button_status(false),
    second_button_status(false),
    third_button_status(false),
    forth_button_status(false),
    fifth_button_status(false),

    m_circle_r(),

    first_button_pos_x(),
    second_button_pos_x(),
    third_button_pos_x(),
    forth_button_pos_x(),
    fifth_button_pos_x(),

    first_button_pos_y(),
    second_button_pos_y(),
    third_button_pos_y(),
    forth_button_pos_y(),
    fifth_button_pos_y(),

    m_move_distance(),

    first_rectposition_x(),
    second_rectposition_x(),
    third_rectposition_x(),
    forth_rectposition_x(),
    fifth_rectposition_x(),

    first_rectposition_y(),
    second_rectposition_y(),
    third_rectposition_y(),
    forth_rectposition_y(),
    fifth_rectposition_y(),

    first_backcolor_on(QColorConstants::LightGray),
    second_backcolor_on(QColorConstants::LightGray),
    third_backcolor_on(QColorConstants::LightGray),
    forth_backcolor_on(QColorConstants::LightGray),
    fifth_backcolor_on(QColorConstants::LightGray),

    first_backcolor_off(QGradient::LightBlue),
    second_backcolor_off(QGradient::LightBlue),
    third_backcolor_off(QGradient::LightBlue),
    forth_backcolor_off(QGradient::LightBlue),
    fifth_backcolor_off(QGradient::LightBlue),

    first_circle_color(QColorConstants::White),
    second_circle_color(QColorConstants::White),
    third_circle_color(QColorConstants::White),
    forth_circle_color(QColorConstants::White),
    fifth_circle_color(QColorConstants::White)
{
    ui->setupUi(this);

    //设置无窗口背景透明
    setWindowFlags(Qt::FramelessWindowHint);
    setAttribute(Qt::WA_TranslucentBackground);

    first_timer = new QTimer(this);
    connect(first_timer, SIGNAL(timeout()), this, SLOT(slot_first_change()));

    second_timer = new QTimer(this);
    connect(second_timer, SIGNAL(timeout()), this, SLOT(slot_second_change()));

    third_timer = new QTimer(this);
    connect(third_timer, SIGNAL(timeout()), this, SLOT(slot_third_change()));

    forth_timer = new QTimer(this);
    connect(forth_timer, SIGNAL(timeout()), this, SLOT(slot_forth_change()));

    fifth_timer = new QTimer(this);
    connect(fifth_timer, SIGNAL(timeout()), this, SLOT(slot_fifth_change()));
}

slidebutton::~slidebutton()
{
    delete ui;
}

void slidebutton::set_button_size(const int &w ,const int &h)
{
    m_circle_r=w;
    m_move_distance=h;
}

//将需要建立按钮的坐标传入
void slidebutton::set_button_position(const int &rect_x_first, const int &rect_y_first, const int &circle_x_first, const int &circle_y_first,
                                      const int &rect_x_second, const int &rect_y_second, const int &circle_x_second, const int &circle_y_second,
                                      const int &rect_x_third, const int &rect_y_third, const int &circle_x_third, const int &circle_y_third,
                                      const int &rect_x_forth, const int &rect_y_forth, const int &circle_x_forth, const int &circle_y_forth,
                                      const int &rect_x_fifth, const int &rect_y_fifth, const int &circle_x_fifth, const int &circle_y_fifth)
{
    first_rectposition_x=rect_x_first;
    first_rectposition_y=rect_y_first;
    first_button_pos_x=circle_x_first;
    first_button_pos_y=circle_y_first;

    second_rectposition_x=rect_x_second;
    second_rectposition_y=rect_y_second;
    second_button_pos_x=circle_x_second;
    second_button_pos_y=circle_y_second;

    third_rectposition_x=rect_x_third;
    third_rectposition_y=rect_y_third;
    third_button_pos_x=circle_x_third;
    third_button_pos_y=circle_y_third;

    forth_rectposition_x=rect_x_forth;
    forth_rectposition_y=rect_y_forth;
    forth_button_pos_x=circle_x_forth;
    forth_button_pos_y=circle_y_forth;

    fifth_rectposition_x=rect_x_fifth;
    fifth_rectposition_y=rect_y_fifth;
    fifth_button_pos_x=circle_x_fifth;
    fifth_button_pos_y=circle_y_fifth;
}

//这里可以自己传入颜色，我不需要自己传入颜色所以加*
/*void slidebutton::set_button_color(const QColor &on_color, const QColor &off_color, const QColor &button_color)
{
    first_backcolor_on = on_color;
    first_backcolor_off = off_color;
    first_circle_color = button_color;

    second_backcolor_on = on_color;
    second_backcolor_off = off_color;
    second_circle_color = button_color;

    third_backcolor_on = on_color;
    third_backcolor_off = off_color;
    third_circle_color = button_color;

    forth_backcolor_on = on_color;
    forth_backcolor_off = off_color;
    forth_circle_color = button_color;

    fifth_backcolor_on = on_color;
    fifth_backcolor_off = off_color;
    fifth_circle_color = button_color;
}*/

//重载paintEvent
void slidebutton::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event);

    //定义矩形大小
    QRect rect_first (first_rectposition_x, first_rectposition_y, m_circle_r, m_circle_r);
    QRect rect_second (second_rectposition_x, second_rectposition_y, m_circle_r, m_circle_r);
    QRect rect_third (third_rectposition_x, third_rectposition_y, m_circle_r, m_circle_r);
    QRect rect_forth (forth_rectposition_x, forth_rectposition_y, m_circle_r, m_circle_r);
    QRect rect_fifth (fifth_rectposition_x, fifth_rectposition_y, m_circle_r, m_circle_r);

    //计算开始的坐标
    int first_startX = rect_first.left() + rect_first.width() / 2;
    int first_startY = rect_first.top();

    int second_startX = rect_second.left() + rect_second.width() / 2;
    int second_startY = rect_second.top();

    int third_startX = rect_third.left() + rect_third.width() / 2;
    int third_startY = rect_third.top();

    int forth_startX = rect_forth.left() + rect_forth.width() / 2;
    int forth_startY = rect_forth.top();

    int fifth_startX = rect_fifth.left() + rect_fifth.width() / 2;
    int fifth_startY = rect_fifth.top();


//画一个滑动按钮，并且判断开关，更改按钮，以下皆是      ***如果还需要添加***按照我的写法顺序添加，不然颜色刷可能会出问题***
    QPainter painter_first(this);
    QPainterPath draw_first;
    painter_first.setRenderHint(QPainter::Antialiasing, true);

    if (first_button_status == true)
    {
        painter_first.setBrush(QBrush(QColor(first_backcolor_off)));
    }
    else
    {
        painter_first.setBrush(QBrush(QColor(first_backcolor_on)));
    }
    draw_first.moveTo(first_startX,first_startY);
    draw_first.arcTo(QRect(rect_first.left(), rect_first.top(), rect_first.width(), rect_first.height()),90,180);
    draw_first.lineTo((rect_first.left() + m_move_distance ), rect_first.bottom() + 1); // the graph not connet , neet 1 pixcel
    draw_first.arcTo(QRect((first_startX + m_move_distance),rect_first.top(),rect_first.width(),rect_first.height()),270,180);
    draw_first.lineTo(first_startX,first_startY);

    painter_first.drawPath(draw_first);
    painter_first.setBrush(QBrush(QColor(first_circle_color)));
    painter_first.drawEllipse(first_button_pos_x ,first_button_pos_y,m_circle_r,m_circle_r);
/**************************************************************************************************************/
    QPainterPath draw_second;
    QPainter painter_second(this);
    painter_second.setRenderHint(QPainter::Antialiasing, true);

    if (second_button_status == true)
    {
        painter_second.setBrush(second_backcolor_off);
    }
    else
    {
        painter_second.setBrush(second_backcolor_on);
    }
    draw_second.moveTo(second_startX,second_startY);
    draw_second.arcTo(QRect(rect_second.left(), rect_second.top(), rect_second.width(), rect_second.height()),90,180);
    draw_second.lineTo((rect_second.left() + m_move_distance ), rect_second.bottom() + 1); // the graph not connet , neet 1 pixcel
    draw_second.arcTo(QRect((second_startX + m_move_distance),rect_second.top(),rect_second.width(),rect_second.height()),270,180);
    draw_second.lineTo(second_startX,second_startY);
    painter_second.drawPath(draw_second);
    painter_second.setBrush(second_circle_color);
    painter_second.drawEllipse(second_button_pos_x ,second_button_pos_y,m_circle_r,m_circle_r);
/**************************************************************************************************************/
    QPainter painter_third(this);
    QPainterPath draw_third;
    painter_third.setRenderHint(QPainter::Antialiasing, true);

    if (third_button_status == true)
    {
        painter_third.setBrush(third_backcolor_off);
    }
    else
    {
        painter_third.setBrush(third_backcolor_on);
    }
    draw_third.moveTo(third_startX,third_startY);
    draw_third.arcTo(QRect(rect_third.left(), rect_third.top(), rect_third.width(), rect_third.height()),90,180);
    draw_third.lineTo((rect_third.left() + m_move_distance ), rect_third.bottom() + 1); // the graph not connet , neet 1 pixcel
    draw_third.arcTo(QRect((third_startX + m_move_distance),rect_third.top(),rect_third.width(),rect_third.height()),270,180);
    draw_third.lineTo(third_startX,third_startY);
    painter_third.drawPath(draw_third);
    painter_third.setBrush(third_circle_color);
    painter_third.drawEllipse(third_button_pos_x ,third_button_pos_y,m_circle_r,m_circle_r);
/**************************************************************************************************************/
    QPainter painter_forth(this);
    QPainterPath draw_forth;
    painter_forth.setRenderHint(QPainter::Antialiasing, true);

    if (forth_button_status == true)
    {
        painter_forth.setBrush(forth_backcolor_off);
    }
    else
    {
        painter_forth.setBrush(forth_backcolor_on);
    }
    draw_forth.moveTo(forth_startX,forth_startY);
    draw_forth.arcTo(QRect(rect_forth.left(), rect_forth.top(), rect_forth.width(), rect_forth.height()),90,180);
    draw_forth.lineTo((rect_forth.left() + m_move_distance ), rect_forth.bottom() + 1); // the graph not connet , neet 1 pixcel
    draw_forth.arcTo(QRect((forth_startX + m_move_distance),rect_forth.top(),rect_forth.width(),rect_forth.height()),270,180);
    draw_forth.lineTo(forth_startX,forth_startY);
    painter_forth.drawPath(draw_forth);
    painter_forth.setBrush(forth_circle_color);
    painter_forth.drawEllipse(forth_button_pos_x ,forth_button_pos_y,m_circle_r,m_circle_r);
/**************************************************************************************************************/
    QPainter painter_fifth(this);
    QPainterPath draw_fifth;
    painter_fifth.setRenderHint(QPainter::Antialiasing, true);

    if (fifth_button_status == true)
    {
        painter_fifth.setBrush(fifth_backcolor_off);
    }
    else
    {
        painter_fifth.setBrush(fifth_backcolor_on);
    }
    draw_fifth.moveTo(fifth_startX,fifth_startY);
    draw_fifth.arcTo(QRect(rect_fifth.left(), rect_fifth.top(), rect_fifth.width(), rect_fifth.height()),90,180);
    draw_fifth.lineTo((rect_fifth.left() + m_move_distance ), rect_fifth.bottom() + 1); // the graph not connet , neet 1 pixcel
    draw_fifth.arcTo(QRect((fifth_startX + m_move_distance),rect_fifth.top(),rect_fifth.width(),rect_fifth.height()),270,180);
    draw_fifth.lineTo(fifth_startX,fifth_startY);
    painter_fifth.drawPath(draw_fifth);
    painter_fifth.setBrush(fifth_circle_color);
    painter_fifth.drawEllipse(fifth_button_pos_x ,fifth_button_pos_y,m_circle_r,m_circle_r);
}

//重写鼠标事件，确定点击鼠标位置，对应滑动按钮移动
void slidebutton::mousePressEvent(QMouseEvent *event)
{
    int i=event->pos().x();
    int j=event->pos().y();
    if((i>=first_rectposition_x)&&(i<=first_rectposition_x+m_move_distance+m_circle_r/2)&&(j>=first_rectposition_x)&&(j<=first_rectposition_x+m_circle_r))
    {
        if(first_button_status==false)
        {
            qDebug()<<"now is false become true";
            first_button_status=true;
        }
        else if(first_button_status==true)
        {
            qDebug()<<"now is true become false";
            first_button_status=false;
        }
        first_timer->start(1);
    }

    if((i>=second_rectposition_x)&&(i<=second_rectposition_x+m_move_distance+m_circle_r/2)&&(j>=second_rectposition_x)&&(j<=second_rectposition_x+m_circle_r))
    {
        if(second_button_status==false)
        {
            qDebug()<<"now is false become true";
            second_button_status=true;
        }
        else if(second_button_status==true)
        {
            qDebug()<<"now is true become false";
            second_button_status=false;
        }
        second_timer->start(1);
    }

    if((i>=third_rectposition_x)&&(i<=third_rectposition_x+m_move_distance+m_circle_r/2)&&(j>=third_rectposition_x)&&(j<=third_rectposition_x+m_circle_r))
    {
        if(third_button_status==false)
        {
            qDebug()<<"now is false become true";
            third_button_status=true;
        }
        else if(third_button_status==true)
        {
            qDebug()<<"now is true become false";
            third_button_status=false;
        }
        third_timer->start(1);
    }

    if((i>=forth_rectposition_x)&&(i<=forth_rectposition_x+m_move_distance+m_circle_r/2)&&(j>=forth_rectposition_x)&&(j<=forth_rectposition_x+m_circle_r))
    {
        if(forth_button_status==false)
        {
            qDebug()<<"now is false become true";
            forth_button_status=true;
        }
        else if(forth_button_status==true)
        {
            qDebug()<<"now is true become false";
            forth_button_status=false;
        }
        forth_timer->start(1);
    }

    if((i>=fifth_rectposition_x)&&(i<=fifth_rectposition_x+m_move_distance+m_circle_r/2)&&(j>=fifth_rectposition_x)&&(j<=fifth_rectposition_x+m_circle_r))
    {
        if(fifth_button_status==false)
        {
            qDebug()<<"now is false become true";
            fifth_button_status=true;
        }
        else if(fifth_button_status==true)
        {
            qDebug()<<"now is true become false";
            fifth_button_status=false;
        }
        fifth_timer->start(1);
    }

}


//以下五个全为按钮滑动过程，我直接是更改位置，如需要滑动，可以增加QTimer在以下就可以实现滑动更改，不要忘记槽函数进行连接
void slidebutton::slot_first_change()
{
    if (first_button_status == true)
    {
        first_button_pos_x=first_rectposition_x + m_move_distance +m_circle_r/2;
    }
    else if(first_button_status == false)
    {
        first_button_pos_x=first_rectposition_x;
    }
    update();
}

void slidebutton::slot_second_change()
{
    if (second_button_status == true)
    {
        second_button_pos_x=second_rectposition_x + m_move_distance +m_circle_r/2;
    }
    else if(second_button_status == false)
    {
        second_button_pos_x=second_rectposition_x;
    }
    update();
}

void slidebutton::slot_third_change()
{
    if (third_button_status == true)
    {
        third_button_pos_x=third_rectposition_x + m_move_distance +m_circle_r/2;
    }
    else if(third_button_status == false)
    {
        third_button_pos_x=third_rectposition_x;
    }
    update();
}

void slidebutton::slot_forth_change()
{
    if (forth_button_status == true)
    {
        forth_button_pos_x=forth_rectposition_x + m_move_distance +m_circle_r/2;
    }
    else if(forth_button_status == false)
    {
        forth_button_pos_x=forth_rectposition_x;
    }
    update();
}

void slidebutton::slot_fifth_change()
{
    if (fifth_button_status == true)
    {
        fifth_button_pos_x=fifth_rectposition_x + m_move_distance +m_circle_r/2;
    }
    else if(fifth_button_status == false)
    {
        fifth_button_pos_x=fifth_rectposition_x;
    }
    update();
}

main.cpp

#include "mainwindow.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWindow w;
    w.show();
    return a.exec();
}

原版作者链接：Qt简易滑动按钮_qt滑动按钮-CSDN博客

Qt创建一个或多个简易滑动按钮

悦读