Qt自定义控件-自定义SwitchButton

Qt自定义控件-自定义SwitchButton

概述

自定义SwitchButton，继承QWidget，然后重载paintEvent方法来绘制按键外观，其中动画效果通过定时器timer处理，可以自定义按键宽度、高度以及圆角，重载mousePressEvent方法实现点击功能；按键开关状态通过信号获取，实现方法多种多样，欢迎感兴趣的朋友探讨。

源码

#ifndef SWITCHBUTTON_H
#define SWITCHBUTTON_H

#include <QWidget>

class SwitchButton : public QWidget
{
    Q_OBJECT
    Q_PROPERTY(bool buttonState READ buttonState WRITE setButtonState NOTIFY buttonStateChanged)
    Q_PROPERTY(int buttonWidth READ buttonWidth WRITE setButtonWidth)
    Q_PROPERTY(int buttonHeight READ buttonHeight WRITE setButtonHeight)
    Q_PROPERTY(int buttonRadius READ buttonRadius WRITE setButtonRadius)

public:
    explicit SwitchButton(QWidget *parent = nullptr,int buttonWidth = 100,int buttonHeight =50, int radius = 5);
    bool buttonState();
    void setButtonState(bool state);
    int buttonWidth();
    void setButtonWidth(int width);
    int buttonHeight();
    void setButtonHeight(int height);
    int buttonRadius();
    void setButtonRadius(int radius);



protected:
    void paintEvent(QPaintEvent* event) override;
    void mousePressEvent(QMouseEvent *event) override;
private:
    int mButtonWidth;       //按键宽度
    int mButtonHeight;      //按键高度
    int mInnerBorder;       //按键内部边框大小
    int mButtonRadius;            //圆角
    bool mButtonState;      //按键状态
    int innerRectWidth;     //内部滑块宽度
    int innerRectHeight;    //内部滑块高度
    int sliderX;
    QTimer* timer;
    QColor buttonStateColor;    //按键状态颜色
    QString buttonstateStr;  //按键状态字
    int buttonTextX;  //按键状态字位置
    int buttonTextY;

    void switchOnOff();
public slots:
    void onTimeOut();
signals:
    void buttonStateChanged(bool ButtonState);

};

#endif // SWITCHBUTTON_H

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
源文件

#include "switchbutton.h"
#include <QPainter>
#include <QTimer>
#include <QMouseEvent>
SwitchButton::SwitchButton(QWidget *parent, int buttonWidth, int buttonHeight, int radius)
    : QWidget{parent},
      mButtonWidth(buttonWidth),
      mButtonHeight(buttonHeight),
      mButtonRadius(radius)
{
    //按键大小初始化
    mInnerBorder = 5;
    innerRectHeight = (mButtonHeight - 2*mInnerBorder);
    innerRectWidth = (mButtonWidth - 2*mInnerBorder)/2;
    sliderX = -innerRectWidth; //按键滑块的初始位置，位于按键左侧

    //按键状态初始化
    buttonstateStr = "开";
    buttonStateColor = QColor(200,200,200);
    mButtonState = false;

    QFontMetrics textSize = QWidget::fontMetrics();
    QRect textRect=textSize.tightBoundingRect(buttonstateStr);//得到字符串的rect
    buttonTextX = mButtonWidth/4 - textRect.width()/2;
    buttonTextY = textRect.height()/2;
    timer = new QTimer(this);
    timer->setInterval(2);
    connect(timer,SIGNAL(timeout()),this,SLOT(onTimeOut()));


}

bool SwitchButton::buttonState()
{
    return mButtonState;
}

void SwitchButton::setButtonState(bool state)
{
    mButtonState = state;
}

int SwitchButton::buttonWidth()
{
    return mButtonWidth;
}

void SwitchButton::setButtonWidth(int width)
{
    mButtonWidth = width;
    update();
}

int SwitchButton::buttonHeight()
{
    return mButtonHeight;
}

void SwitchButton::setButtonHeight(int height)
{
    mButtonHeight = height;
    update();
}

int SwitchButton::buttonRadius()
{
    return mButtonRadius;
}

void SwitchButton::setButtonRadius(int radius)
{
    mButtonRadius = radius;
    update();
}

void SwitchButton::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event);
    QPainter painter(this);

    //设置视口坐标和窗口坐标
    int width = this->rect().width();
    int height = this->rect().height();
    painter.setViewport(this->rect());
    painter.setWindow(-width/2,-height/2,width,height);
    painter.setPen(Qt::NoPen);

    painter.setRenderHints(QPainter::Antialiasing);
    painter.setBrush(buttonStateColor);
    painter.drawRoundedRect(-mButtonWidth/2,-mButtonHeight/2,mButtonWidth,mButtonHeight,mButtonRadius,mButtonRadius);

    //绘制滑块
    painter.setBrush(QColor("white"));
    painter.drawRoundedRect(sliderX,-innerRectHeight/2,innerRectWidth,innerRectHeight,mButtonRadius,mButtonRadius);

    //绘制开关状态文字
//    QFont font = this->font();
//    qDebug()<<"font.pixelSize = "<<font.pixelSize();
//    font.setPixelSize(10);
//    this->setFont(font);


//    QFontMetrics textSize = QWidget::fontMetrics();
//    QRect textRect=textSize.tightBoundingRect(buttonstateStr);//得到字符串的rect

//    QPen pen;
//    pen.setColor("red"); //划线颜色
//    painter.setPen(pen);
//    painter.drawText(buttonTextX,buttonTextY,buttonstateStr);
////    painter.drawRect(textRect);
}

void SwitchButton::mousePressEvent(QMouseEvent *event)
{
    switch (event->type()) {
    case QEvent::MouseButtonPress:
        switchOnOff();
        break;
    default:
        QWidget::mousePressEvent(event);
        break;
    }
}

void SwitchButton::switchOnOff()
{
    mButtonState = !mButtonState;
    buttonTextX = -buttonTextX;
    timer->start();
    if(mButtonState){
        buttonstateStr = "关";
        buttonStateColor = QColor("#11EE11");
        emit buttonStateChanged(mButtonState);
    }else{
        buttonstateStr = "开";
        buttonStateColor = QColor(200,200,200);
        emit buttonStateChanged(mButtonState);
    }

}

void SwitchButton::onTimeOut()
{
    static int i = 0;
    qDebug()<<"timeOut "<<i++;

    if(mButtonState){ //打开开关，滑块往右滑动
        sliderX +=1;
        if(sliderX >=0){
            timer->stop();
        }
    }else{          //关闭开关，滑块往左滑动
        sliderX -=1;
        if(sliderX <=-innerRectWidth){
            timer->stop();
        }
    }
    update();
}

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

后续功能将持续更新。。。