其他分享
首页 > 其他分享> > QTreeview 设置复选框、箭头、选项的QSS详细用法

QTreeview 设置复选框、箭头、选项的QSS详细用法

作者:互联网

本文主要总结QTreeview的用QSS美化界面用法,具体的美化包括QTreeview的箭头伸展和收缩,复选框的勾选、不勾选、半勾选,选项的选中、不选中状态,具体的QSS设置代码如下所示:

1.1 QSS美化QTreeview代码

"QTreeView{background-color:transparent;font-size:12px;font-family:Microsoft YaHei;font-weight:400;color:rgba(126,206,244,1);border-top:none;outline:0px;}"

//设置箭头图标打开和关闭样式
"QTreeView::branch:closed:has-children:!has-siblings,QTreeView::branch:closed:has-children:has-siblings {border-image: none;image:url(:/image/UI/切图/解析硬盘/icon_spread.png);}"
"QTreeView::branch:open:has-children:!has-siblings,QTreeView::branch:open:has-children:has-siblings  {border-image: none;image: url(:/image/UI/切图/解析硬盘/icon_retract.png);}"

//设置选项样式
"QTreeView::item {background-color: transparent;}"
"QTreeView::item:hover{background-color:rgba(0,176,220,0.5);}"
"QTreeView::item:selected{background-color:rgba(0,176,220,1);}"
"QTreeView::item:selected:active{background-color:rgba(0,176,220,1);}"
"QTreeView::item:selected:!active {background-color:rgba(0,176,220,1);}"

//设置复选框样式
"QTreeView::indicator {width: 20px;height: 20px;}"
"QTreeView::indicator:enabled:unchecked {image: url(:/image/UI/切图/解析硬盘/icon_unchecked.png);}"
"QTreeView::indicator:enabled:unchecked:hover {image: url(:/image/UI/切图/解析硬盘/icon_unchecked.png);}"
"QTreeView::indicator:enabled:unchecked:pressed {image: url(:/image/UI/切图/解析硬盘/icon_unchecked.png);}"
"QTreeView::indicator:enabled:checked {image: url(:/image/UI/切图/解析硬盘/icon_select.png);}"
"QTreeView::indicator:enabled:checked:hover {image: url(:/image/UI/切图/解析硬盘/icon_select.png);}"
"QTreeView::indicator:enabled:checked:pressed {image: url(:/image/UI/切图/解析硬盘/icon_select.png);}"
"QTreeView::indicator:enabled:indeterminate {image: url(:/image/UI/切图/解析硬盘/icon_portion.png);}"
"QTreeView::indicator:enabled:indeterminate:hover {image: url(:/image/UI/切图/解析硬盘/icon_portion.png);}"
"QTreeView::indicator:enabled:indeterminate:pressed {image: url(:/image/UI/切图/解析硬盘/icon_portion.png);}"

1.2效果图

 

 

参考内容:

https://blog.csdn.net/liang19890820/article/details/52606662(参考:QSS美化QTreeview的复选框、选项、箭头)

https://blog.csdn.net/naibozhuan3744/article/details/80914480(参考:QTreeview的QSS用法)

标签:QTreeView,切图,image,QTreeview,复选框,QSS,UI,png,icon
来源: https://blog.csdn.net/naibozhuan3744/article/details/100699705