簡述

接觸過iOS系統的童鞋們應該對開關按鈕很熟悉，在設定裡面經常遇到，切換時候的滑動效果比較帥氣。

通常說的開關按鈕，有兩個狀態：on、off。

下面，我們利用自定義控制元件來實現一個開關按鈕。

原理

重寫滑鼠按下事件（mousePressEvent）、釋放事件（mouseReleaseEvent），用於切換開關狀態。
重寫繪製事件（paintEvent），用於繪製開關效果。
使用QTimer，定時重新整理，讓開關切換時產生動畫效果。
其餘介面用於擴充套件，也可自己擴充。

原始碼

SwitchControl.h

#ifndef SWITCH_CONTROL
#define
 
 SWITCH_CONTROL

#include <QWidget>
#include <QTimer>

class SwitchControl : public QWidget
{
    Q_OBJECT

public:
    explicit SwitchControl(QWidget *parent = 0);

    // 返回開關狀態 - 開啟：true 關閉：false
    bool 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_CONTROL

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 關閉：false
bool 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;
}

示例

下面，我們來實現一組開關按鈕。

效果

原始碼

為了演示，可以設定開關的樣式、以及狀態等效果。

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)));