自定义 QTreeView

交替行的背景色可以使用下面样式代码来定义：

QTreeView {    alternate-background-color: yellow;}
1
2
3
1
2
3

当鼠标划过 item 时，如果要提供一个特殊的背景色，可以使用 ::item 辅助控制，例如：

QTreeView {    show-decoration-selected: 1;}QTreeView::item {    border: 1px solid #d9d9d9;    border-top-color: transparent;    border-bottom-color: transparent;}QTreeView::item:hover {    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #e7effd, stop: 1 #cbdaf1);    border: 1px solid #bfcde4;}QTreeView::item:selected {    border: 1px solid #567dbc;}QTreeView::item:selected:active{    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #6ea1f1, stop: 1 #567dbc);}QTreeView::item:selected:!active {    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #6b9be8, stop: 1 #577fbf);}
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
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

QTreeView 的分支可以使用 ::branch 辅助控制。当绘制一个 branch 时，下述的样式颜色实现了一系列状态。

QTreeView::branch {    background: palette(base);}QTreeView::branch:has-siblings:!adjoins-item {    background: cyan;}QTreeView::branch:has-siblings:adjoins-item {    background: red;}QTreeView::branch:!has-children:!has-siblings:adjoins-item {    background: blue;}QTreeView::branch:closed:has-children:has-siblings {    background: pink;}QTreeView::branch:has-children:!has-siblings:closed {    background: gray;}QTreeView::branch:open:has-children:has-siblings {    background: magenta;}QTreeView::branch:open:has-children:!has-siblings {    background: green;}
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
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

尽管它比较丰富多彩，但可以用下面的图片实现一个更有用的效果：

图片路径vline.pngbranch-more.pngbranch-end.pngbranch-closed.pngbranch-open.png

QTreeView::branch:has-siblings:!adjoins-item {    border-image: url(vline.png) 0;}QTreeView::branch:has-siblings:adjoins-item {    border-image: url(branch-more.png) 0;}QTreeView::branch:!has-children:!has-siblings:adjoins-item {    border-image: url(branch-end.png) 0;}QTreeView::branch:has-children:!has-siblings:closed,QTreeView::branch:closed:has-children:has-siblings {    border-image: none;    image: url(branch-closed.png);}QTreeView::branch:open:has-children:!has-siblings,QTreeView::branch:open:has-children:has-siblings  {    border-image: none;    image: url(branch-open.png);}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

由此产生的 Tree 视图看起来像这样：

指示器

如果我们对 Tree 需要添加指示器，需要用过 ::indicator 辅助控制：

QTreeView {        border: 1px solid rgb(50, 50, 50);        background-color: rgb(57, 58, 60);        font-size: 16px;}QTreeView::item {  /** item **/        height: 25px;        color: white;        border: none;        border-bottom: 1px solid rgb(50, 50, 50);        background-color: transparent;}QTreeView::item:hover { /** 鼠标滑过 item **/        background-color: rgba(255, 255, 255, 40);}QTreeView::item:selected { /** 鼠标选中 item **/        background-color: rgb(0, 160, 230);}QTreeView::branch:open:has-children {  /** 分支 - 展开 item（有孩子） **/        image: url(:/Images/arrowBottom);}QTreeView::branch:closed:has-children { /** 分支 - 折叠 item（无孩子） **/        image: url(:/Images/arrowRight);}QTreeView::indicator {  /** 指示器 **/        width: 20px;        height: 20px;}QTreeView::indicator:enabled:unchecked {  /** 指示器 - 未选中 **/        image: url(:/Images/checkBox);}QTreeView::indicator:enabled:unchecked:hover {        image: url(:/Images/checkBoxHover);}QTreeView::indicator:enabled:unchecked:pressed {        image: url(:/Images/checkBoxPressed);}QTreeView::indicator:enabled:checked {  /** 指示器 - 选中 **/        image: url(:/Images/checkBoxChecked);}QTreeView::indicator:enabled:checked:hover {        image: url(:/Images/checkBoxCheckedHover);}QTreeView::indicator:enabled:checked:pressed {        image: url(:/Images/checkBoxCheckedPressed);}QTableView::indicator:enabled:indeterminate {  /** 指示器 - 半选 **/        image: url(:/Images/checkBoxIndeterminate);}QTreeView::indicator:enabled:indeterminate:hover {        image: url(:/Images/checkBoxIndeterminateHover);}QTreeView::indicator:enabled:indeterminate:pressed {        image: url(:/Images/checkBoxIndeterminatePressed);}
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
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

整行拓展

由上面分析，如果要整行拓展，可以将 item 和 branch 相同状态（正常、划过、选中）下的背景设置相同。

QTreeView {        border: 1px solid rgb(50, 50, 50);        background-color: rgb(57, 58, 60);}QTreeView::item {        height: 25px;        color: white;        border: none;        background-color: transparent;}QTreeView::item:hover, QTreeView::branch:hover { /** 鼠标滑过 **/        background-color: rgba(255, 255, 255, 40);}QTreeView::item:selected, QTreeView::branch:selected { /** 鼠标选中 **/        background-color: rgb(0, 160, 230);}QTreeView::branch {        background-color: transparent;}QTreeView::branch:open:has-children {        image: url(:/Images/arrowBottom);}QTreeView::branch:closed:has-children {        image: url(:/Images/arrowRight);}
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
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

O__O”…，看似大功告成，可万万没想到：

当鼠标选中的时候可以整行拓展，可是当鼠标滑过。。。无语中！

没关系，其实 Qt 关于盒模型的介绍说的很清楚，不妨添加如下代码试试：

QTreeView {    show-decoration-selected: 1;}
1
2
3
1
2
3

注意：在之前代码的基础上，只需再添加这一行即可。

再来看一下效果：

show-decoration-selected 属性控制选中时是选中整项还是仅仅只是项的文本，而辅助控制（子组件） ::branch 和 ::item 用于精细化控制。