1. Preface

Since the smartphone era, a wide variety of APP s have flourished. Apps on mobile phones have many popular elements. Switch buttons are very liked by individuals. Mobile phones QQ, 360 Guards, Jinshan Toxinba, etc. have many switch controls for some operations. On WINFORM projects, if CheckBox is also changed to switch buttons, it is estimated that it will add a lot of novelty to the project.
Following the previous practice, I still like to draw pictures directly on the user control using drawimage method, enabling double buffer and background transparency. Some people say that a nice picture on the PS is not easy and needs professionalism. Here is a good way to get these pictures, in fact, most of the APPs can be opened with decompression software.Changing the extension name to.zip will do. Generally, most of the pictures are decompressed and found that most of the APPs prefer to use pictures as a background to show some effects instead of drawing them bit by bit with the original code.Tencent is Tencent, a big company!People's artistic MM design pictures that really can't be said, absolutely first-class, each time mobile QQ upgrades a version, it will come down and extract the beautiful picture icons and so on, so that the project can be used, this is not considered piracy!

2. Code ideas

ImageSwitch::ImageSwitch(QWidget *parent) : QWidget(parent)
{
    isChecked = false;
    buttonStyle = ButtonStyle_2;

    imgOffFile = ":/image/btncheckoff2.png";
    imgOnFile = ":/image/btncheckon2.png";
    imgFile = imgOffFile;
}

void ImageSwitch::mousePressEvent(QMouseEvent *)
{
    imgFile = isChecked ? imgOffFile : imgOnFile;
    isChecked = !isChecked;
    this->update();
}

void ImageSwitch::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    painter.setRenderHints(QPainter::SmoothPixmapTransform);
    QImage img(imgFile);
    img = img.scaled(this->size(), Qt::KeepAspectRatio, Qt::SmoothTransformation);

    //Auto-center drawing on scale
    int pixX = rect().center().x() - img.width() / 2;
    int pixY = rect().center().y() - img.height() / 2;
    QPoint point(pixX, pixY);
    painter.drawImage(point, img);
}

bool ImageSwitch::getChecked() const
{
    return isChecked;
}

ImageSwitch::ButtonStyle ImageSwitch::getButtonStyle() const
{
    return this->buttonStyle;
}

QSize ImageSwitch::sizeHint() const
{
    return QSize(87, 28);
}

QSize ImageSwitch::minimumSizeHint() const
{
    return QSize(87, 28);
}

void ImageSwitch::setChecked(bool isChecked)
{
    if (this->isChecked != isChecked) {
        this->isChecked = isChecked;
        imgFile = isChecked ? imgOnFile : imgOffFile;
        this->update();
    }
}

void ImageSwitch::setButtonStyle(const ImageSwitch::ButtonStyle &buttonStyle)
{
    if (this->buttonStyle != buttonStyle) {
        this->buttonStyle = buttonStyle;

        if (buttonStyle == ButtonStyle_1) {
            imgOffFile = ":/image/btncheckoff1.png";
            imgOnFile = ":/image/btncheckon1.png";
            this->resize(87, 28);
        } else if (buttonStyle == ButtonStyle_2) {
            imgOffFile = ":/image/btncheckoff2.png";
            imgOnFile = ":/image/btncheckon2.png";
            this->resize(87, 28);
        } else if (buttonStyle == ButtonStyle_3) {
            imgOffFile = ":/image/btncheckoff3.png";
            imgOnFile = ":/image/btncheckon3.png";
            this->resize(96, 38);
        }

        imgFile = isChecked ? imgOnFile : imgOffFile;
        setChecked(isChecked);
        this->update();
        updateGeometry();
    }
}

3. Effect Charts

4. Open Source Home Page

The complete source downloads of the above works are all on the open source homepage. The quantity and quality of the works will be continuously updated, and you are welcome to pay attention.

1. Domestic site: https://gitee.com/feiyangqingyun/QWidgetDemo
2. International site: https://github.com/feiyangqingyun/QWidgetDemo
3. Personal home page: https://blog.csdn.net/feiyangqingyun
4. Knowing Home Page: https://www.zhihu.com/people/feiyangqingyun/