Qt 之自定义控件（开关按钮）

接触过IOS系统的童鞋们应该对开关按钮很熟悉，在设置里面经常遇到，切换时候的滑动效果比较帅气。
通常说的开关按钮，有两个状态：on、off。
下面，我们利用自定义控件来实现一个开关按钮。

原理

重写鼠标按下事件（mousePressEvent）、释放事件（mouseReleaseEvent），用于切换开关状态。
重写绘制事件（paintEvent），用于绘制开关效果。
使用QTimer，定时刷新，让开关切换时产生动画效果。
其余接口用于扩展，也可自己扩充。

源码

SwitchControl.h

#ifndef SWITCHCONTROL_H
#define SWITCHCONTROL_H


#include 
#include 
#include 


class SwitchControl : public QWidget
{
    Q_OBJECT
public:
    explicit SwitchControl(QWidget *parent = nullptr);


    // 返回开关状态 - 打开：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;




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 // SWITCHCONTROL_H
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

SwitchControl.cpp

#include 
#include 
#include "switchcontrol.h"


SwitchControl::SwitchControl(QWidget *parent)
    : QWidget(parent),
      m_bChecked(false),
      m_background(Qt::black),
      m_checkedColor(QColor(0, 150, 136)),
      m_disabledColor(QColor(190, 190, 190)),
      m_thumbColor(Qt::white),
      m_radius(32.0),
      m_nHeight(64),
      m_nMargin(0)
{
    // 鼠标滑过光标形状 - 手型
    setCursor(Qt::PointingHandCursor);
    setFixedSize(m_nHeight*3, m_nHeight);


    // 连接信号槽
    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;
    QString stateStr;
    QRectF rect;
    QPen pen(QBrush(QColor(255, 255, 255)), 1);
    QFont font("黑体", 28, QFont::Normal);


    if (isEnabled()) { // 可用状态


        if (m_bChecked) { // 打开状态
            background = m_checkedColor;
            thumbColor = m_checkedColor;
            dOpacity = 0.600;
            stateStr = QString("On");
            QFontMetrics fmt(font);
            int textWidth = fmt.horizontalAdvance(stateStr);
            int textHeight = fmt.height();
            rect = QRectF(height()*0.3, height()*0.1, textWidth, textHeight);


        } else { //关闭状态
            background = m_background;
            thumbColor = m_thumbColor;
            dOpacity = 0.800;
            stateStr = QString("Off");
            QFontMetrics fmt(font);
            int textWidth = fmt.horizontalAdvance(stateStr);
            int textHeight = fmt.height();
            rect = QRectF(height()*1.3, height()*0.1, textWidth, textHeight);


        }
    } 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());
    qDebug("x:%d, y:%d, w:%d, h:%d\n", m_nMargin, m_nMargin, width() - 2 * m_nMargin, height() - 2 * m_nMargin);


    // 绘制小椭圆
    painter.setBrush(thumbColor);
    painter.setOpacity(1.0);
    painter.drawEllipse(QRectF(m_nX - (m_nHeight / 2), m_nY - (m_nHeight / 2), height(), height()));


    painter.setPen(pen);
    painter.setFont(font);
    painter.drawText(rect, Qt::AlignCenter, stateStr);
}


// 鼠标按下事件
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(3);
        } else {
            event->ignore();
        }
    }
}


// 大小改变事件
void SwitchControl::resizeEvent(QResizeEvent *event)
{
    m_nX = m_nHeight / 2;
    m_nY = m_nHeight / 2;
    QWidget::resizeEvent(event);
}




// 切换状态 - 滑动
void SwitchControl::onTimeout()
{
    if (m_bChecked) {
        m_nX += 1;
        if (m_nX >= width() - m_nHeight/2)
            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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188

为了演示，可以设置开关的样式、以及状态等效果。调用代码：

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    SwitchControl *pSwitchControl = new SwitchControl(this);
    SwitchControl *pGreenSwitchControl = new SwitchControl(this);
    SwitchControl *pDisabledSwitchControl = new SwitchControl(this);


    QVBoxLayout* vbox = new QVBoxLayout;
    ui->centralwidget->setLayout(vbox);
    vbox->addWidget(pSwitchControl, 1);
    vbox->addWidget(pGreenSwitchControl);
    vbox->addWidget(pDisabledSwitchControl);
    // 设置状态、样式
    pGreenSwitchControl->setToggle(true);
    pGreenSwitchControl->setCheckedColor(QColor(0, 160, 230));
    pGreenSwitchControl->setBackgroundColor(QColor(255, 99, 71));
    pDisabledSwitchControl->setEnabled(true);
    pDisabledSwitchControl->setToggle(true);
    // 连接信号槽
    connect(pSwitchControl, SIGNAL(toggled(bool)), this, SLOT(onToggled(bool)));


}

void MainWindow::onToggled(bool bChecked)
{
    qDebug() << "State : " << bChecked;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

运行结果