新增图片开关控件

README.md

@@ -33,6 +33,7 @@
 | 30 | videowidget | 通用视频控件 |
 | 31 | screenwidget | 屏幕截图控件 |
 | 32 | echartgauge | echart仪表盘含交互支持webkit及webengine |
+| 33 | imageswitch | 图片开关控件 |
 
 ![avatar](https://gitee.com/feiyangqingyun/QWidgetDemo/raw/master/snap/lightbutton.gif)
 ![avatar](https://gitee.com/feiyangqingyun/QWidgetDemo/raw/master/snap/movewidget.gif)
@@ -65,4 +66,5 @@
 ![avatar](https://gitee.com/feiyangqingyun/QWidgetDemo/raw/master/snap/lunarcalendarwidget.gif)
 ![avatar](https://gitee.com/feiyangqingyun/QWidgetDemo/raw/master/snap/videowidget.gif)
 ![avatar](https://gitee.com/feiyangqingyun/QWidgetDemo/raw/master/snap/screenwidget.gif)
-![avatar](https://gitee.com/feiyangqingyun/QWidgetDemo/raw/master/snap/echartgauge.gif)
+![avatar](https://gitee.com/feiyangqingyun/QWidgetDemo/raw/master/snap/echartgauge.gif)
+![avatar](https://gitee.com/feiyangqingyun/QWidgetDemo/raw/master/snap/imageswitch.gif)

imageswitch/frmimageswitch.cpp

@@ -0,0 +1,28 @@
+#pragma execution_character_set("utf-8")
+
+#include "frmimageswitch.h"
+#include "ui_frmimageswitch.h"
+
+frmImageSwitch::frmImageSwitch(QWidget *parent) : QWidget(parent), ui(new Ui::frmImageSwitch)
+{
+    ui->setupUi(this);
+    this->initForm();
+}
+
+frmImageSwitch::~frmImageSwitch()
+{
+    delete ui;
+}
+
+void frmImageSwitch::initForm()
+{
+    ui->imageSwitch1->setChecked(true);
+    ui->imageSwitch2->setChecked(true);
+    ui->imageSwitch3->setChecked(true);
+    ui->imageSwitch1->setFixedSize(87, 28);
+    ui->imageSwitch2->setFixedSize(87, 28);
+    ui->imageSwitch3->setFixedSize(87, 28);
+    ui->imageSwitch1->setButtonStyle(ImageSwitch::ButtonStyle_1);
+    ui->imageSwitch2->setButtonStyle(ImageSwitch::ButtonStyle_2);
+    ui->imageSwitch3->setButtonStyle(ImageSwitch::ButtonStyle_3);
+}

imageswitch/frmimageswitch.h

@@ -0,0 +1,25 @@
+#ifndef FRMIMAGESWITCH_H
+#define FRMIMAGESWITCH_H
+
+#include <QWidget>
+
+namespace Ui {
+class frmImageSwitch;
+}
+
+class frmImageSwitch : public QWidget
+{
+    Q_OBJECT
+
+public:
+    explicit frmImageSwitch(QWidget *parent = 0);
+    ~frmImageSwitch();
+
+private:
+    Ui::frmImageSwitch *ui;
+
+private slots:
+    void initForm();
+};
+
+#endif // FRMIMAGESWITCH_H

imageswitch/frmimageswitch.ui

@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<ui version="4.0">
+ <class>frmImageSwitch</class>
+ <widget class="QWidget" name="frmImageSwitch">
+  <property name="geometry">
+   <rect>
+    <x>0</x>
+    <y>0</y>
+    <width>500</width>
+    <height>300</height>
+   </rect>
+  </property>
+  <property name="windowTitle">
+   <string>Form</string>
+  </property>
+  <layout class="QGridLayout" name="gridLayout">
+   <item row="0" column="2">
+    <widget class="ImageSwitch" name="imageSwitch3" native="true"/>
+   </item>
+   <item row="0" column="0">
+    <widget class="ImageSwitch" name="imageSwitch1" native="true"/>
+   </item>
+   <item row="0" column="1">
+    <widget class="ImageSwitch" name="imageSwitch2" native="true"/>
+   </item>
+   <item row="1" column="0">
+    <spacer name="verticalSpacer">
+     <property name="orientation">
+      <enum>Qt::Vertical</enum>
+     </property>
+     <property name="sizeHint" stdset="0">
+      <size>
+       <width>20</width>
+       <height>40</height>
+      </size>
+     </property>
+    </spacer>
+   </item>
+   <item row="0" column="3">
+    <spacer name="horizontalSpacer">
+     <property name="orientation">
+      <enum>Qt::Horizontal</enum>
+     </property>
+     <property name="sizeHint" stdset="0">
+      <size>
+       <width>40</width>
+       <height>20</height>
+      </size>
+     </property>
+    </spacer>
+   </item>
+  </layout>
+ </widget>
+ <customwidgets>
+  <customwidget>
+   <class>ImageSwitch</class>
+   <extends>QWidget</extends>
+   <header>imageswitch.h</header>
+  </customwidget>
+ </customwidgets>
+ <resources/>
+ <connections/>
+</ui>

imageswitch/imageswitch.cpp

@@ -0,0 +1,91 @@
+#pragma execution_character_set("utf-8")
+
+#include "imageswitch.h"
+#include "qpainter.h"
+#include "qdebug.h"
+
+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);
+
+    //按照比例自动居中绘制
+    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();
+    }
+}

imageswitch/imageswitch.h

@@ -0,0 +1,63 @@
+#ifndef IMAGESWITCH_H
+#define IMAGESWITCH_H
+
+/**
+ * 图片开关控件 作者:feiyangqingyun(QQ:517216493) 2016-11-25
+ * 1:自带三种开关按钮样式
+ * 2:可自定义开关图片
+ */
+
+#include <QWidget>
+
+#ifdef quc
+#if (QT_VERSION < QT_VERSION_CHECK(5,7,0))
+#include <QtDesigner/QDesignerExportWidget>
+#else
+#include <QtUiPlugin/QDesignerExportWidget>
+#endif
+
+class QDESIGNER_WIDGET_EXPORT ImageSwitch : public QWidget
+#else
+class ImageSwitch : public QWidget
+#endif
+
+{
+    Q_OBJECT
+    Q_ENUMS(ButtonStyle)
+
+    Q_PROPERTY(bool isChecked READ getChecked WRITE setChecked)
+    Q_PROPERTY(ButtonStyle buttonStyle READ getButtonStyle WRITE setButtonStyle)
+
+public:
+    enum ButtonStyle {
+        ButtonStyle_1 = 0,  //开关样式1
+        ButtonStyle_2 = 1,  //开关样式2
+        ButtonStyle_3 = 2   //开关样式3
+    };
+
+    explicit ImageSwitch(QWidget *parent = 0);
+
+protected:
+    void mousePressEvent(QMouseEvent *);
+    void paintEvent(QPaintEvent *event);
+
+private:
+    bool isChecked;
+    ButtonStyle buttonStyle;
+
+    QString imgOffFile;
+    QString imgOnFile;
+    QString imgFile;
+
+public:
+    bool getChecked()               const;
+    ButtonStyle getButtonStyle()    const;
+    QSize sizeHint()                const;
+    QSize minimumSizeHint()         const;
+
+public Q_SLOTS:
+    void setChecked(bool isChecked);
+    void setButtonStyle(const ImageSwitch::ButtonStyle &buttonStyle);
+};
+
+#endif // IMAGESWITCH_H

imageswitch/imageswitch.pro

@@ -0,0 +1,25 @@
+#-------------------------------------------------
+#
+# Project created by QtCreator 2017-02-08T14:39:46
+#
+#-------------------------------------------------
+
+QT       += core gui
+
+greaterThan(QT_MAJOR_VERSION, 4): QT += widgets
+
+TARGET      = imageswitch
+TEMPLATE    = app
+DESTDIR     = $$PWD/../bin
+CONFIG      += warn_off
+
+SOURCES     += main.cpp
+SOURCES     += frmimageswitch.cpp
+SOURCES     += imageswitch.cpp
+
+HEADERS     += frmimageswitch.h
+HEADERS     += imageswitch.h
+
+FORMS       += frmimageswitch.ui
+
+RESOURCES   += main.qrc

imageswitch/main.cpp

@@ -0,0 +1,31 @@
+#pragma execution_character_set("utf-8")
+
+#include "frmimageswitch.h"
+#include <QApplication>
+#include <QTextCodec>
+
+int main(int argc, char *argv[])
+{
+    QApplication a(argc, argv);
+    a.setFont(QFont("Microsoft Yahei", 9));
+
+#if (QT_VERSION <= QT_VERSION_CHECK(5,0,0))
+#if _MSC_VER
+    QTextCodec *codec = QTextCodec::codecForName("gbk");
+#else
+    QTextCodec *codec = QTextCodec::codecForName("utf-8");
+#endif
+    QTextCodec::setCodecForLocale(codec);
+    QTextCodec::setCodecForCStrings(codec);
+    QTextCodec::setCodecForTr(codec);
+#else
+    QTextCodec *codec = QTextCodec::codecForName("utf-8");
+    QTextCodec::setCodecForLocale(codec);
+#endif
+
+    frmImageSwitch w;
+    w.setWindowTitle("图片背景开关");
+    w.show();
+
+    return a.exec();
+}

imageswitch/main.qrc

@@ -0,0 +1,10 @@
+<RCC>
+    <qresource prefix="/">
+        <file>image/btncheckoff1.png</file>
+        <file>image/btncheckoff2.png</file>
+        <file>image/btncheckoff3.png</file>
+        <file>image/btncheckon1.png</file>
+        <file>image/btncheckon2.png</file>
+        <file>image/btncheckon3.png</file>
+    </qresource>
+</RCC>