TabView - Material 标签页
TabView 是 Material Design 3 标签页控件的完整实现,支持标签文本、带滑动动画的选中指示器和标签滚动。包含状态层、焦点指示器和 Material Design 3 样式。
类参考
cpp
namespace cf::ui::widget::material;
class TabView : public QTabWidget {
Q_OBJECT
Q_PROPERTY(int tabHeight READ tabHeight WRITE setTabHeight)
Q_PROPERTY(int tabMinWidth READ tabMinWidth WRITE setTabMinWidth)
Q_PROPERTY(bool showIndicator READ showIndicator WRITE setShowIndicator)
};
```text
头文件:`ui/widget/material/widget/tabview/tabview.h`
## 基本用法
```cpp
#include "widget/material/widget/tabview/tabview.h"
using namespace cf::ui::widget::material;
// 创建标签页视图
auto* tabs = new TabView(this);
// 添加标签页
tabs->addTab(new QWidget(tr("Home")), "Home");
tabs->addTab(new QWidget(tr("Settings")), "Settings");
tabs->addTab(new QWidget(tr("Profile")), "Profile");
// 设置标签高度
tabs->setTabHeight(48);
// 连接信号
connect(tabs, &QTabWidget::currentChanged, this, &MyClass::onTabChanged);
```text
## 标签高度和宽度
```cpp
// 设置标签高度(默认遵循 Material Design 3 规范)
tabs->setTabHeight(48);
// 设置标签最小宽度(默认遵循 Material Design 3 规范)
tabs->setTabMinWidth(90);
```text
## 选中指示器
```cpp
// 显示选中指示器(默认启用)
tabs->setShowIndicator(true);
// 选中指示器是一个滑动条,在标签之间平滑过渡
// 使用 Primary 颜色绘制
```text
指示器在标签切换时通过滑动动画移动到新的选中标签位置。
## 可关闭标签
```cpp
// 设置标签可关闭
tabs->setTabCloseable(0, true); // 第一个标签可关闭
tabs->setTabCloseable(1, true); // 第二个标签可关闭
// 连接关闭信号
connect(tabs, &TabView::tabCloseRequested, this, &MyClass::onTabClose);
```text
可关闭的标签会显示关闭按钮。
## 内部 TabBar
TabView 使用内部 `MaterialTabBar` 实现标签栏:
```cpp
// MaterialTabBar 是内部实现,不暴露给外部
// 负责标签的绘制、选中指示器动画和滚动
```bash
## 绘制流程
TabBar 内部实现以下绘制步骤:
1. 绘制标签背景
2. 绘制状态层
3. 绘制标签文本
4. 绘制选中指示器(带滑动动画)
5. 绘制焦点指示器
## 颜色系统
| 元素 | 颜色角色 |
|------|----------|
| 标签背景 | Surface |
| 标签文本(未选中) | OnSurfaceVariant |
| 标签文本(选中) | Primary |
| 选中指示器 | Primary |
| 状态层 | 根据状态计算 |
## 主要方法
| 方法 | 说明 |
|------|------|
| `tabHeight()` / `setTabHeight(int)` | 获取/设置标签高度 |
| `tabMinWidth()` / `setTabMinWidth(int)` | 获取/设置标签最小宽度 |
| `showIndicator()` / `setShowIndicator(bool)` | 获取/设置选中指示器 |
| `setTabCloseable(int, bool)` | 设置标签是否可关闭 |
| `sizeHint()` | 获取推荐尺寸 |
| 继承自 QTabWidget | `addTab()`, `setCurrentIndex()`, `currentWidget()` 等 |
## 信号
| 信号 | 说明 |
|------|------|
| `tabCloseRequested(int)` | 标签关闭按钮被点击时发射 |
| 继承自 QTabWidget | `currentChanged(int)` 等 |
## 相关文档
- [Material Design 3 标签页规范](https://m3.material.io/components/tabs)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
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