Qt之QSS(QTreeView)

简述

QTreeView 作为一个树形控件,我们经常用到,只要对样式熟悉,可以做出特别漂亮的特效。

自定义 QTreeView

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

QTreeView {
    alternate-background-color: yellow;
}
  • 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

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

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

图片 路径
这里写图片描述 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

由此产生的 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

整行拓展

由上面分析,如果要整行拓展,可以将 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

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

这里写图片描述

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

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

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

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

再来看一下效果:

这里写图片描述

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

©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值