TreeView - Material 树视图
TreeView 是 Material Design 3 树视图控件的完整实现,用于层级数据展示。具有展开/折叠动画、树连接线、正确的层级缩进和 Material Design 3 颜色令牌。
类参考
cpp
namespace cf::ui::widget::material;
class TreeView : public QTreeView {
Q_OBJECT
Q_PROPERTY(TreeItemHeight itemHeight READ itemHeight WRITE setItemHeight)
Q_PROPERTY(TreeIndentStyle indentStyle READ indentStyle WRITE setIndentStyle)
Q_PROPERTY(bool showTreeLines READ showTreeLines WRITE setShowTreeLines)
Q_PROPERTY(bool rootIsDecorated READ rootIsDecorated WRITE setRootIsDecorated)
};
```text
头文件:`ui/widget/material/widget/treeview/treeview.h`
## 项高度模式
```cpp
enum class TreeItemHeight {
Compact, // 48dp - 紧凑模式
Standard // 56dp - 标准模式(默认)
};
```text
## 缩进样式
```cpp
enum class TreeIndentStyle {
Material, // 56dp 每级 + 引导线
Classic // 传统嵌套缩进
};
```text
## 基本用法
```cpp
#include "widget/material/widget/treeview/treeview.h"
using namespace cf::ui::widget::material;
// 创建树视图
auto* tree = new TreeView(this);
// 设置标准项高度
tree->setItemHeight(TreeItemHeight::Standard);
// 使用 Material 缩进样式
tree->setIndentStyle(TreeIndentStyle::Material);
// 显示树连接线
tree->setShowTreeLines(true);
// 装饰根节点(显示展开/折叠控件)
tree->setRootIsDecorated(true);
// 设置模型
auto* model = new QFileSystemModel(this);
tree->setModel(model);
// 连接信号
connect(tree, &QTreeView::clicked, this, &MyClass::onItemClicked);
```text
## 树连接线
```cpp
// 启用树连接线(显示层级关系)
tree->setShowTreeLines(true);
// 连接线在父节点和子节点之间绘制
// 使用 OutlineVariant 颜色
```text
## 展开/折叠
TreeView 使用 `TreeViewItemDelegate` 处理展开/折叠图标的渲染:
```cpp
// drawBranches() 被重写为空实现
// 所有展开/折叠图标由委托渲染,避免与默认 Qt 渲染冲突
```text
## 根节点装饰
```cpp
// 装饰根节点(显示展开/折叠箭头)
tree->setRootIsDecorated(true);
// 隐藏根节点装饰
tree->setRootIsDecorated(false);
```bash
## 交互状态
| 状态 | 视觉效果 |
|------|----------|
| Normal | 默认背景 |
| Hovered | 状态层叠加 |
| Pressed | 水波纹 + 状态层 |
| Selected | 选中背景色 |
| Focused | 焦点环 |
通过 `QPersistentModelIndex` 追踪悬停和按下的项目索引,确保模型变更后状态仍然正确。
## 项委托
TreeView 使用内部委托(`TreeViewItemDelegate`)渲染每个项目:
- 展开/折叠图标
- 项目文本和图标
- 悬停/选中状态背景
- 水波纹效果
委托遵循 Qt 的 Model/View 架构。
## 绘制流程
TreeView 的 `paintEvent` 实现:
1. 绘制背景
2. 让 Qt 通过委托渲染树项目
3. `drawBranches()` 为空实现(委托处理所有展开/折叠图标)
## 颜色系统
| 元素 | 颜色角色 |
|------|----------|
| 表面 | Surface |
| 文本 | OnSurface |
| 连接线 | OutlineVariant |
## 主要方法
| 方法 | 说明 |
|------|------|
| `itemHeight()` / `setItemHeight(TreeItemHeight)` | 获取/设置项高度模式 |
| `indentStyle()` / `setIndentStyle(TreeIndentStyle)` | 获取/设置缩进样式 |
| `showTreeLines()` / `setShowTreeLines(bool)` | 获取/设置树连接线 |
| `rootIsDecorated()` / `setRootIsDecorated(bool)` | 获取/设置根节点装饰 |
| `sizeHint()` / `minimumSizeHint()` | 获取推荐/最小尺寸 |
## 相关文档
- [ListView - Material 列表视图](./listview.md)
- [TableView - Material 表格视图](./tableview.md)
- [Material Design 3 树视图规范](https://m3.material.io/components/lists)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
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