简述
接触过IOS系统的童鞋们应该对开关按钮很熟悉，在设置里面经常遇到，切换时候的滑动效果比较帅气。
通常说的开关按钮，有两个状态：on、off。
下面，我们利用自定义控件来实现一个开关按钮。
简述原理源码示例 效果源码 更多参考
原理
重写鼠标按下事件（mousePressEvent）、释放事件（mouseReleaseEvent），用于切换开关状态。重写绘制事件（paintEvent），用于绘制开关效果。使用QTimer，定时刷新，让开关切换时产生动画效果。其余接口用于扩展，也可自己扩充。
源码
SwitchControl.h
#ifndef SWITCH_CONTROL#define SWITCH_CONTROL#include <QWidget>#include <QTimer>class SwitchControl : public QWidget{Q_OBJECTpublic:explicit SwitchControl(QWidget *parent = 0);// 返回开关状态 - 打开：true 关闭：falsebool isToggled() const;// 设置开关状态void setToggle(bool checked);// 设置背景颜色void setBackgroundColor(QColor color);// 设置选中颜色void setCheckedColor(QColor color);// 设置不可用颜色void setDisbaledColor(QColor color);protected:// 绘制开关void paintEvent(QPaintEvent *event) Q_DECL_OVERRIDE;// 鼠标按下事件void mousePressEvent(QMouseEvent *event) Q_DECL_OVERRIDE;// 鼠标释放事件 - 切换开关状态、发射toggled()信号void mouseReleaseEvent(QMouseEvent *event) Q_DECL_OVERRIDE;// 大小改变事件void resizeEvent(QResizeEvent *event) Q_DECL_OVERRIDE;// 缺省大小QSize sizeHint() const Q_DECL_OVERRIDE;QSize minimumSizeHint() const Q_DECL_OVERRIDE;signals:// 状态改变时，发射信号void toggled(bool checked);private slots:// 状态切换时，用于产生滑动效果void onTimeout();private:bool m_bChecked; // 是否选中QColor m_background;// 背景颜色QColor m_checkedColor; // 选中颜色QColor m_disabledColor; // 不可用颜色QColor m_thumbColor;// 拇指颜色qreal m_radius;// 圆角qreal m_nX; // x点坐标qreal m_nY; // y点坐标qint16 m_nHeight; // 高度qint16 m_nMargin; // 外边距QTimer m_timer;// 定时器};#endif // SWITCH_CONTROL123456789101112131415161718192223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
SwitchControl.cpp
#include <QPainter>#include <QMouseEvent>#include "SwitchControl.h"SwitchControl::SwitchControl(QWidget *parent): QWidget(parent),m_nHeight(16),m_bChecked(false),m_radius(8.0),m_nMargin(3),m_checkedColor(0, 150, 136),m_thumbColor(Qt::white),m_disabledColor(190, 190, 190),m_background(Qt::black){// 鼠标滑过光标形状 - 手型setCursor(Qt::PointingHandCursor);// 连接信号槽connect(&m_timer, SIGNAL(timeout()), this, SLOT(onTimeout()));}// 绘制开关void SwitchControl::paintEvent(QPaintEvent *event){Q_UNUSED(event);QPainter painter(this);painter.setPen(Qt::NoPen);painter.setRenderHint(QPainter::Antialiasing);QPainterPath path;QColor background;QColor thumbColor;qreal dOpacity;if (isEnabled()) { // 可用状态if (m_bChecked) { // 打开状态background = m_checkedColor;thumbColor = m_checkedColor;dOpacity = 0.600;} else { //关闭状态background = m_background;thumbColor = m_thumbColor;dOpacity = 0.800;}} else { // 不可用状态background = m_background;dOpacity = 0.260;thumbColor = m_disabledColor;}// 绘制大椭圆painter.setBrush(background);painter.setOpacity(dOpacity);path.addRoundedRect(QRectF(m_nMargin, m_nMargin, width() - 2 * m_nMargin, height() - 2 * m_nMargin), m_radius, m_radius);painter.drawPath(path.simplified());// 绘制小椭圆painter.setBrush(thumbColor);painter.setOpacity(1.0);painter.drawEllipse(QRectF(m_nX - (m_nHeight / 2), m_nY - (m_nHeight / 2), height(), height()));}// 鼠标按下事件void SwitchControl::mousePressEvent(QMouseEvent *event){if (isEnabled()) {if (event->buttons() & Qt::LeftButton) {event->accept();} else {event->ignore();}}}// 鼠标释放事件 - 切换开关状态、发射toggled()信号void SwitchControl::mouseReleaseEvent(QMouseEvent *event){if (isEnabled()) {if ((event->type() == QMouseEvent::MouseButtonRelease) && (event->button() == Qt::LeftButton)) {event->accept();m_bChecked = !m_bChecked;emit toggled(m_bChecked);m_timer.start(10);} else {event->ignore();}}}// 大小改变事件void SwitchControl::resizeEvent(QResizeEvent *event){m_nX = m_nHeight / 2;m_nY = m_nHeight / 2;QWidget::resizeEvent(event);}// 默认大小QSize SwitchControl::sizeHint() const{return minimumSizeHint();}// 最小大小QSize SwitchControl::minimumSizeHint() const{return QSize(2 * (m_nHeight + m_nMargin), m_nHeight + 2 * m_nMargin);}// 切换状态 - 滑动void SwitchControl::onTimeout(){if (m_bChecked) {m_nX += 1;if (m_nX >= width() - m_nHeight)m_timer.stop();} else {m_nX -= 1;if (m_nX <= m_nHeight / 2)m_timer.stop();}update();}// 返回开关状态 - 打开：true 关闭：falsebool SwitchControl::isToggled() const{return m_bChecked;}// 设置开关状态void SwitchControl::setToggle(bool checked){m_bChecked = checked;m_timer.start(10);}// 设置背景颜色void SwitchControl::setBackgroundColor(QColor color){m_background = color;}// 设置选中颜色void SwitchControl::setCheckedColor(QColor color){m_checkedColor = color;}// 设置不可用颜色void SwitchControl::setDisbaledColor(QColor color){m_disabledColor = color;}1234567891011121314151617181922232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811911122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
示例
下面，我们来实现一组开关按钮。
效果
源码
为了演示，可以设置开关的样式、以及状态等效果。
SwitchControl *pSwitchControl = new SwitchControl(this);SwitchControl *pGreenSwitchControl = new SwitchControl(this);SwitchControl *pDisabledSwitchControl = new SwitchControl(this);// 设置状态、样式pGreenSwitchControl->setToggle(true);pGreenSwitchControl->setCheckedColor(QColor(0, 160, 230));pDisabledSwitchControl->setDisabled(true);pDisabledSwitchControl->setToggle(true);// 连接信号槽connect(pSwitchControl, SIGNAL(toggled(bool)), this, SLOT(onToggled(bool)));123456789101112
实现一个简单的槽函数，当开关按钮效果变化时，就会触发，打印当前的状态。
void MainWindow::onToggled(bool bChecked){qDebug() << "State : " << bChecked;}1234
