此为系列文章,需要全部文档内容及样例素材,请点击打开链接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