自定义 QTreeView

自定义 QTreeView自定义QTreeView交替行的背景色可以使用下面样式代码来定义:QTreeView{alternate-background-color:yellow;}123123当鼠标划过item时,如果要提供一个特殊的背景色,可以使用 ::item 辅助控制,例如:QTreeView{show-decoration-selected:1;}

大家好,又见面了,我是你们的朋友全栈君。



自定义 QTreeView

交替行的背景色可以使用下面样式代码来定义:

QTreeView { alternate-background-color: yellow; }
 
 
 
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

当鼠标划过 item 时,如果要提供一个特殊的背景色,可以使用 ::item 辅助控制,例如:

QTreeView { show-decoration-selected: 1; }
QTreeView::item { border: 1px solid #d9d9d9; border-top-color: transparent; border-bottom-color: transparent; }
QTreeView::item:hover { background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #e7effd, stop: 1 #cbdaf1); border: 1px solid #bfcde4; }
QTreeView::item:selected { border: 1px solid #567dbc; }
QTreeView::item:selected:active{ background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #6ea1f1, stop: 1 #567dbc); }
QTreeView::item:selected:!active { background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #6b9be8, stop: 1 #577fbf); }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

QTreeView 的分支可以使用 ::branch 辅助控制。当绘制一个 branch 时,下述的样式颜色实现了一系列状态。

QTreeView::branch { background: palette(base); }
QTreeView::branch:has-siblings:!adjoins-item { background: cyan; }
QTreeView::branch:has-siblings:adjoins-item { background: red; }
QTreeView::branch:!has-children:!has-siblings:adjoins-item { background: blue; }
QTreeView::branch:closed:has-children:has-siblings { background: pink; }
QTreeView::branch:has-children:!has-siblings:closed { background: gray; }
QTreeView::branch:open:has-children:has-siblings { background: magenta; }
QTreeView::branch:open:has-children:!has-siblings { background: green; }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

尽管它比较丰富多彩,但可以用下面的图片实现一个更有用的效果:

图片 路径
这里写图片描述 vline.png
这里写图片描述 branch-more.png
这里写图片描述 branch-end.png
这里写图片描述 branch-closed.png
这里写图片描述 branch-open.png


QTreeView::branch:has-siblings:!adjoins-item { border-image: url(vline.png) 0; }
QTreeView::branch:has-siblings:adjoins-item { border-image: url(branch-more.png) 0; }
QTreeView::branch:!has-children:!has-siblings:adjoins-item { border-image: url(branch-end.png) 0; }
QTreeView::branch:has-children:!has-siblings:closed,
QTreeView::branch:closed:has-children:has-siblings { border-image: none; image: url(branch-closed.png); }
QTreeView::branch:open:has-children:!has-siblings,
QTreeView::branch:open:has-children:has-siblings  { border-image: none; image: url(branch-open.png); }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

由此产生的 Tree 视图看起来像这样:

这里写图片描述

指示器

这里写图片描述

如果我们对 Tree 需要添加指示器,需要用过 ::indicator 辅助控制:

QTreeView { border: 1px solid rgb(50, 50, 50); background-color: rgb(57, 58, 60); font-size: 16px; }
QTreeView::item { /** item **/ height: 25px; color: white; border: none; border-bottom: 1px solid rgb(50, 50, 50); background-color: transparent; }
QTreeView::item:hover { /** 鼠标滑过 item **/ background-color: rgba(255, 255, 255, 40); }
QTreeView::item:selected { /** 鼠标选中 item **/ background-color: rgb(0, 160, 230); }
QTreeView::branch:open:has-children { /** 分支 - 展开 item(有孩子) **/ image: url(:/Images/arrowBottom); }
QTreeView::branch:closed:has-children { /** 分支 - 折叠 item(无孩子) **/ image: url(:/Images/arrowRight); }
QTreeView::indicator { /** 指示器 **/ width: 20px; height: 20px; }
QTreeView::indicator:enabled:unchecked { /** 指示器 - 未选中 **/ image: url(:/Images/checkBox); }
QTreeView::indicator:enabled:unchecked:hover { image: url(:/Images/checkBoxHover); }
QTreeView::indicator:enabled:unchecked:pressed { image: url(:/Images/checkBoxPressed); }
QTreeView::indicator:enabled:checked { /** 指示器 - 选中 **/ image: url(:/Images/checkBoxChecked); }
QTreeView::indicator:enabled:checked:hover { image: url(:/Images/checkBoxCheckedHover); }
QTreeView::indicator:enabled:checked:pressed { image: url(:/Images/checkBoxCheckedPressed); }
QTableView::indicator:enabled:indeterminate { /** 指示器 - 半选 **/ image: url(:/Images/checkBoxIndeterminate); }
QTreeView::indicator:enabled:indeterminate:hover { image: url(:/Images/checkBoxIndeterminateHover); }
QTreeView::indicator:enabled:indeterminate:pressed { image: url(:/Images/checkBoxIndeterminatePressed); }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55

整行拓展

由上面分析,如果要整行拓展,可以将 item 和 branch 相同状态(正常、划过、选中)下的背景设置相同。

QTreeView { border: 1px solid rgb(50, 50, 50); background-color: rgb(57, 58, 60); }
QTreeView::item { height: 25px; color: white; border: none; background-color: transparent; }
QTreeView::item:hover, QTreeView::branch:hover { /** 鼠标滑过 **/ background-color: rgba(255, 255, 255, 40); }
QTreeView::item:selected, QTreeView::branch:selected { /** 鼠标选中 **/ background-color: rgb(0, 160, 230); }
QTreeView::branch { background-color: transparent; }
QTreeView::branch:open:has-children { image: url(:/Images/arrowBottom); }
QTreeView::branch:closed:has-children { image: url(:/Images/arrowRight); }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

O__O”…,看似大功告成,可万万没想到:

这里写图片描述

当鼠标选中的时候可以整行拓展,可是当鼠标滑过。。。无语中!

没关系,其实 Qt 关于盒模型的介绍说的很清楚,不妨添加如下代码试试:

QTreeView { show-decoration-selected: 1; }
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

注意:在之前代码的基础上,只需再添加这一行即可。

再来看一下效果:

这里写图片描述

show-decoration-selected 属性控制选中时是选中整项还是仅仅只是项的文本,而辅助控制(子组件) ::branch 和 ::item 用于精细化控制。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/132302.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 做了三年Java,java注释的三种形式

    做了三年Java,java注释的三种形式前言很多同学想进大厂,特别是刚毕业的,以及工作年限短的,不要有任何侥幸心理,踏踏实实的把基础弄扎实了,这是你通往高薪之路的唯一正确姿势。首先从面试题做起~好了,不多说了,直接上正菜。拼多多一面首先自我介绍参加过哪些项目并发编程三要素?实现可见性的方法有哪些?多线程的价值?创建线程的三种方式的对比?画出线程的状态流转图常用的并发工具类有哪些?CyclicBarrier和CountDownLatch的区别CAS的问题:1、CAS容易造成ABA问题2、不能保证代码块的原子

  • JAVA:定时器的三种方法(详细注解)

    JAVA:定时器的三种方法(详细注解)第一种:创建一个thread,然后让它在while循环里一直运行着,通过sleep方法来达到定时任务的效果,代码如下:publicclassTask1{ publicstaticvoidmain(String[]args){ //runinasecond //每一秒钟执行一次 finallongtimeInterval=10…

  • vuex mapGetters的使用「建议收藏」

    vuex mapGetters的使用「建议收藏」importVuefrom’vue’;importVuexfrom’vuex’;Vue.use(Vuex);conststore=newVuex.Store({state:{name:’张三’,number:0,list:[{id:1,name:’111′},{id:2,name:’222′},{id:3,

  • wget命令详解,断点续传[通俗易懂]

    wget命令详解,断点续传[通俗易懂](1)支持断点下传功能(2)同时支持FTP和HTTP下载方式(3)支持代理服务器(4)设置方便简单(5)程序小,完全免费?wget虽然功能强大,但是使用起来还是比较简单的,基本的语法是:wget[参数列表]URL。下面就结合具体的例子来说明一下wget的用法。1、下载整个http或者ftp站点。wgethttp://place.your.url

  • python环境搭建和pycharm的安装配置及汉化(零基础小白版)[通俗易懂]

    python环境搭建和pycharm的安装配置及汉化(零基础小白版)[通俗易懂]前言:写这篇文章主要是介绍一下python的环境搭建和pycharm的安装配置,适合零基础的同学观看。这篇文章你会学到python的环境搭建和python比较好用的IDEpycharm的安装与基础配置。运行环境:window64位操作系统。没想到这么多的人看这篇文章,并且接连不断给我发邮箱,问问题,这篇文章不是用markdown写的,不好改,我重新写了一份,放在我的博客里面,这里是地址…

  • Laravel5性能优化技巧

    Laravel5性能优化技巧

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号