16,824
社区成员
发帖
与我相关
我的任务
分享使用CSS美化QTreeView
这个是用QTreeView做的组织树，使用CSS怎么实现左边的蓝色效果QTreeView{
color: rgb(255,255,255);
background-color:#15171a;
show-decoration-selected: 1;
}
QTreeView::item {
height: 30px;
background-color: #15171a;
}
QTreeView::item:selected:active{
color: rgb(255,255,255);
background-color: #282c32;
}
QTreeView::branch:selected:active{
background-color: #282c32;
}
QTreeView::item:hover, QTreeView::branch:hover {
background-color: #282c32;
}
QTreeView::item:selected:!active{
color: rgb(255,255,255);
background-color: #282c32;
}
QTreeView::branch {
background-color: #15171a;
}
QTreeView::branch:has-children:!has-siblings:closed,
QTreeView::branch:closed:has-children:has-siblings {
border-image: none;
image: url(:/images/branch_closed.png);
}
QTreeView::branch:open:has-children:!has-siblings,
QTreeView::branch:open:has-children:has-siblings {
border-image: none;
image: url(:/images/branch_open.png);
}
...全文
请发表友善的回复…
发表回复
feiyangqingyun 2019-07-17
- 打赏
- 举报
这个最好的办法就是自定义控件，重写model
这是一个正经昵称 2019-06-25
- 打赏
- 举报
因为之前接触的不多，所以用起来比较吃力；我试了下，第一级可以，第二级会到第二个branch左侧，有没有可能无论哪一级都在最左边branch左侧[/quote]
这个我也试了一下，二级的branch左侧还一个一级branch，暂时没弄清怎么让那个一级的变状态而二级的不变。
如果你非得实现那个效果的话可以换个思路：做一个左侧是蓝色边框，底色是黑色的QWidget，让QTreeView在选中某一行的时候item和branch都底色透明，再把QWidget移动到对应的位置，放到QTreeView的下一层，show()。
如果是想用图片就把QWidget换成QLabel，放入图片再挪入位置
洗砚 2019-06-25
- 打赏
- 举报
因为之前接触的不多，所以用起来比较吃力；我试了下，第一级可以，第二级会到第二个branch左侧，有没有可能无论哪一级都在最左边branch左侧[/quote]
这个我也试了一下，二级的branch左侧还一个一级branch，暂时没弄清怎么让那个一级的变状态而二级的不变。
如果你非得实现那个效果的话可以换个思路：做一个左侧是蓝色边框，底色是黑色的QWidget，让QTreeView在选中某一行的时候item和branch都底色透明，再把QWidget移动到对应的位置，放到QTreeView的下一层，show()。
如果是想用图片就把QWidget换成QLabel，放入图片再挪入位置[/quote]
谢谢，要是用其他方法我就不过来提问了
洗砚 2019-06-24
- 打赏
- 举报
我要的是左边蓝色的竖线
洗砚 2019-06-24
- 打赏
- 举报
因为之前接触的不多，所以用起来比较吃力；我试了下，第一级可以，第二级会到第二个branch左侧，有没有可能无论哪一级都在最左边branch左侧
这是一个正经昵称 2019-06-24
- 打赏
- 举报
QSS写的很清楚了：
QTreeView::branch:has-children:!has-siblings:closed,
QTreeView::branch:closed:has-children:has-siblings {
border-image: none;
image: url(:/images/branch_closed.png);
}
QTreeView::branch:open:has-children:!has-siblings,
QTreeView::branch:open:has-children:has-siblings {
border-image: none;
image: url(:/images/branch_open.png);
}
不过没必要用图片，你可以直接用border：
QTreeView::branch:has-children:!has-siblings:closed,
QTreeView::branch:closed:has-children:has-siblings {
border-image: none;
border-left: none;
}
//有子选项 展开 并且选中的时候就显示左侧的蓝色竖线。可以根据自己的需求自己调条件
QTreeView::branch:open:has-children:!has-siblings:selected,
QTreeView::branch:open:has-children:has-siblings:selected {
border-image: none;
border-left:5px solid blue;
}
幻夢之葉 2019-06-23
- 打赏
- 举报
你说样式表？照搬过去就可以了呀
