Qss语法及应用4

此为系列文章，需要全部文档内容及样例素材，请点击打开链接https://download.csdn.net/download/guoyanbo_81/10432615

9常用控件样式表

9.1QAbstractScrollArea

所有继承于QAbstractScrollArea类的子类窗口，包括QtextEdit、QAbstractItemView支持使用background-attachment滚动背景，background-attachment一般有两个参数[scroll,fixed]，scroll背景会跟着滚轴移动，fixed背景保持不变，如图15、16所示。

图15默认QTextEdit背景

图16添加内容(打了很多空回车)的滚动背景

图15有关QtextEdit的Qss语句如下：

QTextEdit,QListView

{

    background-color:white;

    background-image:url(:/images/qt.png);

    background-attachment:scroll(fixed);

}

图16左图设置为fixed，右图设置为scroll，可见当窗口内容超出窗口显示区域时，滚轴出现，background-attachment设置为fixed，背景不会随着滚轴的滚动而变化；而设置为scroll时，背景随着滚轴一起滚动变化。

QAbstractItemView，所有ready-to-use view的父类，详细说明参加下一版有关Qt The model/view architecture的论述。

9.2QCheckBox

QcheckBox(多选框)主要包含一个子控件 ::indicator和一个属性sapcing(indicator和text之间的空隙)及indicator的三种状态(checked，unchecked，indeterminate)，其中indeterminate(模糊)状态一般不用。具体实例见图17。

图17checked多选框控件

该checkBox控件的完整qss如下：

QCheckBox::indicator:unchecked

{

    image: url(:checkbox_unchecked.png);

}

QCheckBox::indicator:unchecked:hover

{

    image:url(: checkbox_unchecked_hover.png);

}

QCheckBox::indicator:checked

{

    image:url(:checkbox_checked.png);

}

QCheckBox::indicator:checked:hover

{

    image:url(:checkbox_checked_hover.png);

}

QCheckBox

{

    spacing:0px;

}

 

QCheckBox::indicator

{

    width:18px;

    height:18;

}

图18checkbox子控件图片

QcheckBox的四种状态子控件图片如图18，从左至右分别是unchecked、unchecked：hover、checked、checked：hover状态子控件图片。

9.3QTreeWidget

QtreeWidget主要基于QtreeView，QTreeView控件内容非常丰富，通过QtreeView的设置可以掌握多个控件的stylesheet的设置方法。

QTreeWidget除了要设置常规的border，background等一些常规属性外，还需要设置QscrollBar（滚轴）、QheaderView（标题栏）等附带控件，还需要设置item、branch等子控件以及这些子控件的一些伪状态。

9.3.1隔行变色

一般显示表格的视图需要隔行变色，提高数据分辨能力。设置如下：

QTreeView

{

    alternate-background-color: rgb(0, 136,255);

}

9.3.2选中、悬浮

表格控件一般要求当鼠标移动到一行时，该行高亮显示，并点击选中后，会区别其他非选中表格行的形式来进行提醒。设置如下：

a)设置view项普通样式

QTreeView::item

{

    border: 1px solid #d9d9d9;

    border-top-color: transparent;

    border-bottom-color: transparent;

}

b)设置view项鼠标置上样式

QTreeView::item:hover

{

background:qlineargradient(spread:pad, x1:0.431818, y1:0, x2:0.443, y2:1, stop:0 rgba(244,255, 216, 255), stop:0.488636 rgba(175, 255, 196, 255), stop:1 rgba(218, 255,218, 255));

border: 1px solid #bfcde4;

}

c)设置view项鼠标点击选中后的边界及背景在活动非活动状态下的颜色

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

}

9.3.3branch子控件

a)    设置branch背景为透明，保持和TreeView一致的背景色

QTreeView::branch

{

    background: transparent;

}

b)    设置branch向下存在同级项且向右相邻项不存在时设置竖线样式

QTreeView::branch:has-siblings:!adjoins-item

{

    border-image: url(:vline.png);

}

图19 竖线样式

c)    设置branch向下存在同级项且向右存在相邻项时设置横T图片

QTreeView::branch:has-siblings:adjoins-item

{

    border-image: url(:branch-more.png) 0;

}

图20横T