Qter 发表于 2020-3-8 17:08:22

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状态去掉了,也可用淡灰色。
间隔行效果也去掉了。

代码如下/**********QTreeView**********/
QHeaderView::section {
    height:25px;
    color:white;
    background:#505050;
    border-left:0px solid gray;
    border-right:1px solid gray;
    border-top:0px solid gray;
    border-bottom:0px solid gray;
}

QTreeView {
    border:none;
    background: #404040;
    show-decoration-selected: 1;
}
QTreeView::item {
    height: 25px;
    border: none;
    color: white;
    background: transparent;
}
QTreeView::item:hover {
    background: transparent;
}
QTreeView::item:selected{
    background: #1E90FF;
}
QTreeView::branch {
    background: transparent;
}
QTreeView::branch:hover {
    background: transparent;
}
QTreeView::branch:selected {
    background: #1E90FF;
}
QTreeView::branch:closed:has-children{
    image: url(:/image/treeclose.png);
}
QTreeView::branch:open:has-children{
    image: url(:/image/treeopen.png);
}其中branch的折叠展开图标是自己画的:
https://img-blog.csdn.net/20180510180859800?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rwc3lpbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70 https://img-blog.csdn.net/20180510180906902?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rwc3lpbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70也可以用另外一种+-号样式的:
https://img-blog.csdn.net/20180510181143550?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rwc3lpbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70 https://img-blog.csdn.net/20180510181150405?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rwc3lpbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70这里展示了常用的QTreeView样式表的设置和效果,
如果需要更完整的控制方法,可以参考文章开头里的另外一位Qt专家的博客。



页: [1]
查看完整版本: QTreeView使用总结8,风格美化,使用qss样式表