Switch - Material 开关
Switch 是 Material Design 3 开关(Toggle)控件的完整实现,带有动画滑块位置、轨道颜色过渡和状态层。提供 CheckBox 的替代方案,适用于二进制开/关设置。
类参考
cpp
namespace cf::ui::widget::material;
class Switch : public QCheckBox {
Q_OBJECT
};
```text
头文件:`ui/widget/material/widget/switch/switch.h`
## 基本用法
```cpp
#include "widget/material/widget/switch/switch.h"
using namespace cf::ui::widget::material;
// 创建不带文本的开关
auto* toggle = new Switch(this);
// 创建带文本的开关
auto* wifiSwitch = new Switch("Wi-Fi", this);
wifiSwitch->setChecked(true);
// 连接信号(与 QCheckBox 兼容)
connect(wifiSwitch, &QCheckBox::toggled, this, &MyClass::onWifiToggled);
```bash
## 开关尺寸
Switch 遵循 Material Design 3 的尺寸规范:
| 元素 | 尺寸 |
|------|------|
| 轨道宽度 | 52dp |
| 轨道高度 | 32dp |
| 滑块直径 | 选中时更大 |
| 轨道圆角 | 完全圆角(高度的一半) |
## 滑块动画
开关切换时,滑块从一侧滑动到另一侧,有平滑的位移动画:
```cpp
// m_thumbPosition 从 0.0(未选中/左侧)到 1.0(选中/右侧)
// 动画由 CFMaterialAnimationFactory 驱动
toggle->setChecked(true); // 滑块从左滑到右
toggle->setChecked(false); // 滑块从右滑到左
```bash
内部使用 `m_inNextCheckState` 标志防止 `setChecked()` 在状态切换时直接跳过动画。
## 轨道颜色
轨道颜色根据选中状态自动切换:
| 状态 | 轨道颜色 | 滑块颜色 |
|------|----------|----------|
| Unchecked | SurfaceVariant | OnSurface (带 outline) |
| Checked | Primary | OnPrimary |
## 交互状态
| 状态 | 视觉效果 |
|------|----------|
| Normal | 默认轨道和滑块 |
| Hovered | 状态层叠加 + 滑块扩展 |
| Pressed | 水波纹 + 状态层 |
| Focused | 焦点环 |
| Disabled | 38% 透明度 |
## 与 CheckBox 的区别
| 特性 | CheckBox | Switch |
|------|----------|--------|
| 视觉形式 | 方形勾选框 | 圆形滑块 + 轨道 |
| 适用场景 | 多选列表 | 单项开/关设置 |
| 状态切换 | 勾选/取消勾选 | 滑动动画 |
| 触摸目标 | 48x48dp | 52x32dp |
根据 Material Design 3 的建议,开关适用于即时生效的设置项(如 Wi-Fi 开关),而复选框适用于需要确认的多选项。
## 绘制流程
Switch 的 `paintEvent` 实现以下绘制步骤:
1. 绘制轨道(`drawTrack`) - 带颜色过渡
2. 绘制滑块(`drawThumb`) - 带位置动画
3. 绘制水波纹(`drawRipple`)
4. 绘制文本(`drawText`)
5. 绘制焦点指示器(`drawFocusIndicator`)
## 主要方法
| 方法 | 说明 |
|------|------|
| `setChecked(bool)` | 设置选中状态,触发滑块位移动画 |
| `hitButton(const QPoint&)` | 整个控件区域可点击 |
| `sizeHint()` / `minimumSizeHint()` | 获取推荐/最小尺寸 |
## 信号
| 信号 | 说明 |
|------|------|
| 继承自 QCheckBox | `toggled`, `clicked`, `stateChanged` 等 |
## 相关文档
- [CheckBox - Material 复选框](./checkbox.md)
- [MdElevationController - 阴影控制器](../base/elevation_controller.md)
- [Material Design 3 开关规范](https://m3.material.io/components/switch)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
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