《使用QSS美化QTreeView界面》：系列教程之五

本文中例子來自於Qt Style Sheets Examples

1、style1（QTreeView::item）

當鼠標懸停在item上時，可以通過item子控件設置背景。

style1.qss：

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);
}

效果：

2、style2（QTreeView::branch）

QTreeView的分支使用::branch子控件樣式化。下面的樣式表在繪製分支時對各種狀態進行顏色編碼。

style2.qss：

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;
}

效果：

3、style3（QTreeView::branch）

雖然上面例子它是豐富多彩，但是一個更有用的例子是使用以下圖標方式。

style3.qss：

QTreeView::branch:has-siblings:!adjoins-item {
	border-image: url(:/res/vline.png) 0;
}

QTreeView::branch:has-siblings:adjoins-item {
	border-image: url(:/res/branch-more.png) 0;
}

QTreeView::branch:!has-children:!has-siblings:adjoins-item {
	border-image: url(:/res/branch-end.png) 0;
}

QTreeView::branch:has-children:!has-siblings:closed,
QTreeView::branch:closed:has-children:has-siblings {
    border-image: none;
    image: url(:/res/branch-closed.png);
}

QTreeView::branch:open:has-children:!has-siblings,
QTreeView::branch:open:has-children:has-siblings  {
    border-image: none;
    image: url(:/res/branch-open.png);
}

效果：

代碼地址：https://gitee.com/bailiyang/cdemo/tree/master/Qt/34QTreeViewCustomModel/QssStyle

 

===================================================

===================================================

業餘時間不定期更新一些想法、思考文章，歡迎關注，共同探討，沉澱技術！