[特殊字符]【Qt自定义控件】创意开关按钮 - 丝滑动画+自定义样式+信号交互

话不多说直接上代码

1、.mybutton.h

cpp 复制代码

#ifndef MYBUTTON_H
#define MYBUTTON_H

#include <QWidget>
#include <QPropertyAnimation>

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

protected:

    void paintEvent(QPaintEvent *event);
    void mousePressEvent(QMouseEvent *event);
    void resizeEvent(QResizeEvent *event);

private:
    bool isOff =true;

    QBrush offBgBrush = Qt::black;
    QBrush offRBrush = Qt::red;

    //QBrush offBgBrush = Qt::gray;
    //QBrush offRBrush = Qt::black;

    QBrush onBgBrush = Qt::gray;
    QBrush onRBrush = Qt::green;


    //QString offText = "OFF";
    //QString onText = "ON";

   

    QString onText = QStringLiteral("是");
    QString offText = QStringLiteral("否");

    QPropertyAnimation *animation;
    int posX = height()/2;


signals:
    void isClick();
    void isClickedWithParams(bool);
};

#endif // MYBUTTON_H

2、mybutton.cpp

cpp 复制代码

#include "mybutton.h"

#include <QMouseEvent>
#include <QPainter>

MyButton::MyButton(QWidget *parent)
    : QWidget{parent}
{
    //setFixedSize(60,20);
    setFixedSize(240, 32);
    animation = new QPropertyAnimation(this);
    animation->setTargetObject(this);
    animation->setStartValue(height()/2);
    animation->setEndValue(width()-height()/2);
    animation->setEasingCurve(QEasingCurve::InCurve);
    animation->setDuration(500);
    connect(animation,&QPropertyAnimation::valueChanged,this,[=](const QVariant &value){
        posX = value.toInt();
        update();
    });
}
void MyButton::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing,true);
    int radius = height()/2;
    painter.setPen(Qt::NoPen);
    painter.setBrush(isOff ? offBgBrush : onBgBrush);
    painter.drawRoundedRect(this->rect(),radius,radius);
    painter.setBrush(isOff ? offRBrush : onRBrush);
    QPoint center;
    center.setX(posX);
    center.setY(radius);
    painter.drawEllipse(center,radius-radius/10,radius-radius/10);
    //painter.drawEllipse(QPoint(radius,radius),radius*0.9,radius*0.9);
    painter.setPen(Qt::white);
    painter.setFont(QFont("Arial",radius/2));
    painter.drawText(this->rect(),Qt::AlignCenter,isOff? offText:onText);

}
void MyButton::mousePressEvent(QMouseEvent *event)
{
    if(event->button()==Qt::LeftButton){
        isOff ? animation->setDirection(QAbstractAnimation::Forward) : animation->setDirection(QAbstractAnimation::Backward);
        animation->start();
        emit isClick();
        isOff ? emit isClickedWithParams(true):emit isClickedWithParams(false);

        isOff = !isOff;
        //update();
    }
    // MyButton::mousePressEvent(event);
}

void MyButton::resizeEvent(QResizeEvent *event)
{
    animation->setStartValue(height()/2);

    animation->setEndValue(width()-height()/2);
}

3、效果展示

[特殊字符]【Qt自定义控件】创意开关按钮 - 丝滑动画+自定义样式+信号交互 | 附完整源码