使用CSS美化QTreeView

洗砚 2019-06-22 02:43:51
这个是用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);
}
...全文
1804 7 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
feiyangqingyun 2019-07-17
  • 打赏
  • 举报
回复
这个最好的办法就是自定义控件,重写model
  • 打赏
  • 举报
回复
引用 4 楼 洗砚 的回复:
[quote=引用 3 楼 这是一个正经昵称 的回复:] 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; }
因为之前接触的不多,所以用起来比较吃力;我试了下,第一级可以,第二级会到第二个branch左侧,有没有可能无论哪一级都在最左边branch左侧[/quote] 这个我也试了一下,二级的branch左侧还一个一级branch,暂时没弄清怎么让那个一级的变状态而二级的不变。 如果你非得实现那个效果的话可以换个思路:做一个左侧是蓝色边框,底色是黑色的QWidget,让QTreeView在选中某一行的时候item和branch都底色透明,再把QWidget移动到对应的位置,放到QTreeView的下一层,show()。 如果是想用图片就把QWidget换成QLabel,放入图片再挪入位置
洗砚 2019-06-25
  • 打赏
  • 举报
回复
引用 5 楼 这是一个正经昵称 的回复:
[quote=引用 4 楼 洗砚 的回复:]
[quote=引用 3 楼 这是一个正经昵称 的回复:]
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;
}

因为之前接触的不多,所以用起来比较吃力;我试了下,第一级可以,第二级会到第二个branch左侧,有没有可能无论哪一级都在最左边branch左侧[/quote]


这个我也试了一下,二级的branch左侧还一个一级branch,暂时没弄清怎么让那个一级的变状态而二级的不变。
如果你非得实现那个效果的话可以换个思路:做一个左侧是蓝色边框,底色是黑色的QWidget,让QTreeView在选中某一行的时候item和branch都底色透明,再把QWidget移动到对应的位置,放到QTreeView的下一层,show()。

如果是想用图片就把QWidget换成QLabel,放入图片再挪入位置[/quote]
谢谢,要是用其他方法我就不过来提问了
洗砚 2019-06-24
  • 打赏
  • 举报
回复
我要的是左边蓝色的竖线
洗砚 2019-06-24
  • 打赏
  • 举报
回复
引用 3 楼 这是一个正经昵称 的回复:
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;
}

因为之前接触的不多,所以用起来比较吃力;我试了下,第一级可以,第二级会到第二个branch左侧,有没有可能无论哪一级都在最左边branch左侧
  • 打赏
  • 举报
回复
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
  • 打赏
  • 举报
回复
你说样式表?照搬过去就可以了呀

16,817

社区成员

发帖
与我相关
我的任务
社区描述
Qt 是一个跨平台应用程序框架。通过使用 Qt,您可以一次性开发应用程序和用户界面,然后将其部署到多个桌面和嵌入式操作系统,而无需重复编写源代码。
社区管理员
  • Qt
  • 亭台六七座
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧