Qt实现SwitchButton滑动开关按钮组件

概述

---

使用Qt如何制作一个滑动开关按钮，同类的文章和代码网上很多，但很多都是pyqt编写的，也有c++编写的，大家可以参考. 我这里主要是实现了一个滑动按钮，富有滑动动画和文字，话不多说，上代码

自定义滑动按钮

c++/Qt实现

---

.h文件

#ifndef SwitchButtonInsideINSIDE_H
#define SwitchButtonInsideINSIDE_H

#include <QWidget>

#include "customcomponent_global.h"

class Slider;

class CUSTOMCOMPONENT_EXPORT SwitchButtonInside : public QWidget
{
    Q_OBJECT

public:
    explicit SwitchButtonInside(QWidget *parent = nullptr);
    ~SwitchButtonInside();
    /**
     * @brief SetSize 设置按钮的尺寸
     * @param nWidth 按钮的新宽度
     * @param nHeight 按钮的新高度
     */
    void SetSize(int nWidth, int nHeight);

    /**
     * @brief SetActiveColor 设置按钮激活时候的颜色
     * @param color 激活颜色
     */
    void SetActiveColor(const QColor& color);

    /**
     * @brief SetInactiveColor 设置按钮未激活时候的颜色
     * @param color 未激活颜色
     */
    void SetInactiveColor(const QColor& color);

    /**
     * @brief SetSliderColor 设置滑块颜色
     * @param color 滑块的颜色
     */
    void SetSliderColor(const QColor& color);

    /**
     * @brief SetStatus 设置按钮状态
     * @param bActive true: 激活，false: 未激活
     */
    void SetStatus(bool bActive);

    /**
     * @brief GetStatus 获取按钮当前状态
     * @return  true: 激活，false: 未激活
     */
    bool GetStatus() const;

    /**
     * @brief SetStatus 设置按钮显示文字
     * @param text: 文字内容
     */
    void SetText(const QString &text);

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

    void ToActive();
    void ToInactive();

private:
    bool m_bActive; // 是否激活
    int m_nArcRadius; // 圆弧的半径
    int m_nRectWidth; // 矩形的宽度
    const short m_nMargin = 2;
    const int m_nDuration = 100; // 动画时间，单位毫秒
    bool m_bClicked; // 能否被点击。如果动画还没结束，无法进行点击/状态切换
    QColor m_colorActive; // 激活时的颜色
    QColor m_colorInactive;
    Slider* m_pSlider;
    QString m_text; // 显示文字

signals:
    /**
     * @brief Clicked 按钮被点击后发出的信号
     * @param status 当前按钮状态。true为active，false为inactive
     */
    void Clicked(bool status);
};


class Slider : public QWidget
{
    Q_OBJECT
public:
    explicit Slider(QWidget* parent = nullptr);
    ~Slider();

    /**
     * @brief SetSliderColor 设置滑块颜色
     * @param color
     */
    void SetSliderColor(const QColor& color);

protected:
    void paintEvent(QPaintEvent* e) override;

private:
    QColor m_sliderColor;
};

#endif // SwitchButtonInsideINSIDE_H

.cpp文件

#include "switchbuttoninside.h"
#include <QPainter>
#include <QFont>
#include <QPainterPath>
#include <QPropertyAnimation>

SwitchButtonInside::SwitchButtonInside(QWidget *parent) :
    QWidget(parent)
{
    resize(72, 28); // 默认80，28宽高
    m_pSlider = new Slider(this);
    m_pSlider->resize(height() - m_nMargin * 2, height() - m_nMargin * 2);
    m_pSlider->move(m_nMargin, m_nMargin);
    m_bActive = false; // 默认未激活
    m_nArcRadius = std::min(width(), height()); // 默认半径
    m_nRectWidth = width() - m_nArcRadius;
    m_colorActive = qRgb(60, 189, 136);
    m_colorInactive = qRgb(167, 177, 188);
}

SwitchButtonInside::~SwitchButtonInside()
{
}

void SwitchButtonInside::SetSize(int nWidth, int nHeight)
{
    resize(nWidth, nHeight);
    m_pSlider->resize(height() - m_nMargin * 2, height() - m_nMargin * 2);
    m_pSlider->move(m_nMargin, m_nMargin);
    m_nArcRadius = std::min(width(), height());
    m_nRectWidth = width() - m_nArcRadius;
}

void SwitchButtonInside::SetActiveColor(const QColor& color)
{
    m_colorActive = color;
}

void SwitchButtonInside::SetInactiveColor(const QColor& color)
{
    m_colorInactive = color;
}

void SwitchButtonInside::SetSliderColor(const QColor& color)
{
    m_pSlider->SetSliderColor(color);
}

void SwitchButtonInside::SetStatus(bool bActive)
{
    if(m_bActive == bActive) {
        return;
    }
    m_bActive = bActive;
    if(m_bActive) {
        ToActive();
    } else {
        ToInactive();
    }
}

bool SwitchButtonInside::GetStatus() const
{
    return m_bActive;
}

void SwitchButtonInside::SetText(const QString &text)
{
    m_text = text;
}

void SwitchButtonInside::paintEvent(QPaintEvent *)
{
    qDebug() << "[SwitchButtonInside]m_nArcRadius = " << m_nArcRadius
             << "| m_nRectWidth << " << m_nRectWidth
             << "| size = " << width() << "," << height();

    if (m_nArcRadius > height()) {
        qDebug() << "******* switchbutton resize ******";
        SetSize(width(), height());
    }

    QPainter p;
    p.begin(this);
    p.setRenderHint(QPainter::Antialiasing, true);
    p.setPen(Qt::NoPen);
    if(m_bActive) p.setBrush(QBrush(m_colorActive));
    else p.setBrush(QBrush(m_colorInactive));

    QPainterPath leftPath;
    leftPath.addEllipse(0, 0, m_nArcRadius, m_nArcRadius);

    QPainterPath middlePath;
    middlePath.addRect(m_nArcRadius / 2, 0, m_nRectWidth, m_nArcRadius);

    QPainterPath rightPath;
    rightPath.addEllipse(m_nRectWidth, 0, m_nArcRadius, m_nArcRadius);

    QPainterPath path = leftPath + middlePath + rightPath;

    p.drawPath(path);

    QPen pen;
    pen.setColor(Qt::white);
    p.setPen(pen);
    QFont ft;
    ft.setPointSize(9);
    p.setFont(ft);
    if (m_bActive) {
        p.drawText(QRect(0, 0, m_nRectWidth,
                         m_nArcRadius), Qt::AlignCenter, m_text);
    } else {
        p.drawText(QRect(m_nArcRadius, 0,
                         m_nRectWidth, m_nArcRadius), Qt::AlignCenter, m_text);
    }


    p.end();
}

void SwitchButtonInside::mousePressEvent(QMouseEvent *event)
{
    QWidget::mousePressEvent(event);
}

void SwitchButtonInside::mouseReleaseEvent(QMouseEvent *event)
{
    emit Clicked(!m_bActive);
    QWidget::mouseReleaseEvent(event);
}

void SwitchButtonInside::ToActive()
{
    QPropertyAnimation* pAnimation = new QPropertyAnimation(m_pSlider, "geometry");
    pAnimation->setDuration(m_nDuration);
    pAnimation->setStartValue(m_pSlider->rect());
    pAnimation->setEndValue(QRect(width() - m_pSlider->width() - m_nMargin,
                                  m_nMargin,
                                  m_pSlider->width(),
                                  m_pSlider->height()));
    connect(pAnimation, &QPropertyAnimation::valueChanged, this, [&](const QVariant &value){
        Q_UNUSED(value)
        update();
    });
    pAnimation->start(QAbstractAnimation::DeleteWhenStopped);
}

void SwitchButtonInside::ToInactive()
{
    QPropertyAnimation* pAnimation = new QPropertyAnimation(m_pSlider, "geometry");
    pAnimation->setDuration(m_nDuration);
    pAnimation->setStartValue(QRect(m_pSlider->x(),
                                    m_pSlider->y(),
                                    m_pSlider->width(),
                                    m_pSlider->height()));
    pAnimation->setEndValue(QRect(m_nMargin,
                                  m_nMargin,
                                  m_pSlider->width(),
                                  m_pSlider->height()));
    connect(pAnimation, &QPropertyAnimation::valueChanged, this, [&](const QVariant &value){
        Q_UNUSED(value)
        update();
    });
    pAnimation->start(QAbstractAnimation::DeleteWhenStopped);
}


///
/// Slider  滑块类  //
//

Slider::Slider(QWidget *parent) : QWidget(parent)
{
    m_sliderColor = Qt::white;
    resize(56, 56);
}

Slider::~Slider()
{

}

void Slider::SetSliderColor(const QColor &color)
{
    m_sliderColor = color;
    update();
}

void Slider::paintEvent(QPaintEvent *e)
{
    QPainter p(this);
    p.setRenderHints(QPainter::Antialiasing | QPainter::SmoothPixmapTransform);
    p.fillRect(rect(), Qt::transparent);
    p.setBrush(m_sliderColor);
    p.setPen(Qt::NoPen);
    p.drawRoundedRect(rect(), width() / 2, height() / 2);
    QWidget::paintEvent(e);
}