再谈QSS

来源:互联网 发布:淘宝评价提取器 编辑:程序博客网 时间:2024/06/05 03:56

QSS是Qt的控件样式文件,可以对控件赋予控件的样式。目的是达到让Qt的控件的布局和样式分离开,在代码中只用控制控件的布局,样式放到样式表中进行。

QSS目前是基于CSS2.0的对于CSS3.0的一些特性不支持的。

QSS是有选择器的概念的,可以分为:全局,某一类控件,单个控件。

比如: 1. *{background: red} 这是对全部控件都起作用的。 

              2. QPushButton{background: red} 这只是对按钮控件有作用。

             3. QPushButton#editButton{background: red} 这条语句只对QPushButton的对象setObjectName("editButton")作用。

选择器的目的: 一个工程中可能会有一些样式是全部工程都需要的,比如字体和字体颜色,这时候可以将对应的样式语句放到全局选择器中。

可以有局部,可以有统一的样式。这样可以最大化的保证样式的覆盖。


对于Qt的控件而言可能会有三态的不同样式,那么三态是什么呢,怎么去设置他们呢?

三态指的的是: 正常状态,鼠标滑过状态, 点击状态。           这时一般情况下所说的三态,更多的状态还有 控件不可点击时等等

例子:

1.正常状态

QPushButton#sitesetting{        border: 1px solid #dbe3ec; //边框为1px 实线 色系#dbe3ec        background: white; //背景白色        width: 70; //按钮宽 70px        height: 25; //按钮高 25px        color: #4c74a2; //文字颜色}2. 鼠标滑过状态QPushButton#sitesetting:hover {        border: 1px;        width: 70;        height: 25;        background: #dde8f4;        color: #fff;}3. 不可点击状态QPushButton#sitesetting:!enabled {        border: 1px;        width: 70;        height: 25;        background: grey;        color: rgb(58, 58, 58);}4. 点击状态QPushButton#sitesetting:pressed {        border: 1px;        width: 70;        height: 25;        background: #c4dbf6;        color: #fff;}
这是对于QPushButton下的子选择器sitesetting而言的。只有当QPushButton的对象设置了setObjectName("sitesetting");这个QPushButton的样式会变为这个样式。


一般的控件样式是这样的。但是对于Qt中的表格控件就不同了。表格控件,比如:QTableView

一个QTableView可以拆分为以下控件: 1. 表头 headerView 2. 整个表格本身 3. 表格中的项

所以在设置样式的时候需要注意对这些子控件分别设置样式


//表格的边框 交替变色QTableView {        border: 0px;        alternate-background-color: rgb(241, 245, 248);}//表格的项QTableView::item {        height: 40px;        color: rgb(58, 58, 58);        padding-left: 5px; 向左浮动5px}//被选中的表格的项QTableView::item:selected {        font: 12px;        color: black;        background: rgb(213, 225, 242);}//鼠标滑过时表格的项的样式QTableView::item:hover {        font: 12px;        font-color: black;        background: rgb(226, 232, 239);}//表头的样式QHeaderView#overview{        border: none;        color: rgb(58, 58, 58);        min-height: 30px;        background: white;}//表头的部分样式(意思是: 比如整个表头有三项,这三项的样式)QHeaderView::section {        border-top: 1px solid #86b2e4;        border-left: 1px solid #86b2e4;        background: rgb(200, 212, 226);}//最后一个表头项的样式,可以分别设置表头项的样QHeaderView::section:last {        border-right: 1px solid #86b2e4;}

上面说到了实现表格交替变色的样式还需要在代码 上:setAlternatingRowColors(true);这句开关才可以。


好。。今天 先说到这里,还要那些样式不懂得可以评论我会一一回复的。






0 0