firemail

标题: QTreeView使用总结8，风格美化，使用qss样式表 [打印本页]

---

作者: Qter    时间: 2020-3-8 17:08
标题: QTreeView使用总结8，风格美化，使用qss样式表
https://blog.csdn.net/dpsying/article/details/80271775
1，简介

本文介绍我在使用QTreeView过程中，常用的样式设置方法。
介绍内容是与我自己的项目界面风格相关，并不是完整的介绍所有样式。
关于QTreeView完整的样式设置，可以参考博主一去丶二三里的文章：
Qt之QSS（QTreeView）
http://blog.sina.com.cn/s/blog_a6fb6cc90102v7q8.html
2，常用样式设置

默认的QTreeView是这样的：


一般改造样式，会处理这些项：
表头：背景色、文字色、边框、高度
控件整体：背景色、文字色、边框
元素：背景色、文字色、边框、高度（处理普通、划过、按下三态的颜色）
分支：颜色或图片（普通、划过、按下三态）

一般需要整行颜色一致，设置show-decoration-selected：1

我的样式效果如下：


当然我项目里整个窗口的样式也是配套的，这里只演示QTreeView。
我整体搭配的灰黑色系，选中用蓝色，hover状态去掉了，也可用淡灰色。
间隔行效果也去掉了。

代码如下

1. /**********QTreeView**********/
   
2. QHeaderView::section {
   
3.     height:25px;
   
4.     color:white;
   
5.     background:#505050;
   
6.     border-left:0px solid gray;
   
7.     border-right:1px solid gray;
   
8.     border-top:0px solid gray;
   
9.     border-bottom:0px solid gray;
   
10. }
    
11. 
    
12. QTreeView {
    
13.     border:none;
    
14.     background: #404040;
    
15.     show-decoration-selected: 1;
    
16. }
    
17. QTreeView::item {
    
18.     height: 25px;
    
19.     border: none;
    
20.     color: white;
    
21.     background: transparent;
    
22. }
    
23. QTreeView::item:hover {
    
24.     background: transparent;
    
25. }
    
26. QTreeView::item:selected{
    
27.     background: #1E90FF;
    
28. }
    
29. QTreeView::branch {
    
30.     background: transparent;
    
31. }
    
32. QTreeView::branch:hover {
    
33.     background: transparent;
    
34. }
    
35. QTreeView::branch:selected {
    
36.     background: #1E90FF;
    
37. }
    
38. QTreeView::branch:closed:has-children{
    
39.     image: url(:/image/treeclose.png);
    
40. }
    
41. QTreeView::branch:open:has-children{
    
42.     image: url(:/image/treeopen.png);
    
43. }

复制代码

其中branch的折叠展开图标是自己画的：

也可以用另外一种+-号样式的：

这里展示了常用的QTreeView样式表的设置和效果，
如果需要更完整的控制方法，可以参考文章开头里的另外一位Qt专家的博客。

---

欢迎光临 firemail (http://firemail.wang:8088/)

Powered by Discuz! X3