Qt—样式表(setStyleSheet())

来源:互联网 发布:淘宝官方正品女装 编辑:程序博客网 时间:2024/06/05 16:57

内容借鉴于《精通Qt4编程》和《Qt Creator快速入门》以及网上博客等一些资料,刚好自己需要用到这个知识,把Qt的样式表资料整理总结一下。

Qt样式表描述窗口部件外观的机制,类似于HTML的层叠样式表(Cascading Style Sheet,CSS)。样式表在Qt的风格之上起作用(如果使用了样式表,QWidget::style()返回的Qstyle为“style sheet”),提供了比Qpalette更为灵活、更强大的机制。
样式表使用文本描述,可以在应用程序级别和窗口部件级别设置样式表。如果在不同的级别都设置了样式表,则Qt继承所有有效的样式,这就是层叠(cascading)。
1、样式规则(选择符 {声明})
样式表包含了一系列的样式规则,一个样式规则由一个选择符(selector)和一个声明(declaration)组成。选择符指定了哪些窗口部件受规则影响;声明指定了这个部件上要设置哪些属性。例:
QPushButton { color:red }
在这个样式规则中,QPushButton是选择符,{ color:red }是声明,而color是属性,red是值。这个规则指定了QPushButton和它的子类应该使用红色作为它们的前景色。Qt样式表中一般不区分大小写,例如color、Color、COLOR表示相同的属性。只有类名,对象名和Qt属性名是区分大小写的。一些选择符可以指定相同的声明,只需要使用逗号隔开,例如:
QPushButton, QLineEdit, QComboBox { color:red }
//前景色和背景色的区别:
背景色:把整个画布都用一种颜色填充,画板的底色
前景色:工具如画笔、画刷使用的颜色就是前景色,画笔或画刷描绘的图片的颜色
一个样式规则的声明部分是一些属性:值对组成的列表,它们包含在大括号中,使用分号隔开。例如:
QPushButton { color:red; background-color:white }
2.选择符类型
Qt支持CSS2中所有的选择符,如下图:
这里写图片描述
3、子控件(Sub-Controls)
对一些复杂的部件修改样式,可能需要访问它们的子控件,例如QComboBox的下拉按钮,还有QSpinBox的向上和向下的箭头等。选择符可以包含子控件来对部件的特定子控件应用规则,例如:
QComboBox::drop-down { image:url( dropdown.png ) }
这样的规则可以改变所有的QComboBox部件的下拉按钮。
4、伪状态(Pseudo-States)
选择符可以包含伪状态来表示窗口部件的状态。伪状态出现在选择符之后,用冒号隔离,例如:
QPushButton::hover { color:white }
这个规则表明当鼠标悬停在一个QPushButton部件上时才被应用。伪状态可以使用感叹号来表示否定,例如:要当鼠标没有悬停在一个QRadioButton上时才应用规则,那么这个规则可以写为:
QRadioButton:: !hover { color:red }
伪状态还可以多个连用,达到逻辑与效果。例如:当鼠标悬停在一个被选中的QCheckBox部件上时才应用规则,那么这个规则可以写为:
QCheckBox: hover : checked { color:white }
如果有需要,也可以使用逗号来表示逻辑或操作,例如:
QCheckBox: hover, QCheckBox: checked { color:white }
5、冲突解决
当不同的规则应用到相同的属性时,样式表舅产生了冲突。在这种情况下,特定的规则比通用的规则优先;伪状态比没有伪状态优先;如果级别相同,则最后一个规则优先。冲突解决按照CSS2规则进行。
6、层叠
样式表可以在Qapplication级别设置,也可以在父窗口部件,子窗口部件级别设置。实际应用样式表时,则合并这几个级别的样式。当有冲突时,窗口部件自身的样式优先使用,接下来是父窗口部件,祖先窗口部件,以此类推。
7、盒子模型(The Box Model)
当使用样式表时,每一个部件都看作是拥有4个同心矩形的盒子。这4个矩形分别是内容(content)、填衬(padding)、边框(border)、边距(margin)。边距、边框宽度和填衬等属性的默认值都是0,这样4个矩形恰好重合。如下图:
这里写图片描述
可以使用background-image属性来为部件指定一个背景,默认的background-image只在边框以内的区域进行绘制,这个可以使用background-clip属性来进行更改。可以使用background-repeat和background-origin来控制背景图片的重复方式以及原点。
一个background-image无法随着部件的大小来自动缩放,如果想要背景随着部件的大小变化,那就需要使用border-imgae。如果同时指定了background-image和border-image,那么border-image会绘制在background-image之上。image属性可以用来在border-image之上绘制一个图片。如果使用image指定的图片大小部件的大小不匹配,那么它不会平铺或者拉伸。图片的对齐方式可以使用image-position属性设置。
8、代码例子
设置样式表例子:来源自《Qt Creator快速入门》

/****************主界面背景*******************/QMainWindow{        background-image: url(:/image/beijing01.png);/*背景图片*/}/****************按钮部件*******************/QPushButton{     background-color: rgba(100, 225, 100, 30);/*背景色*/     border-style: outset; /*边框样式*/     border-width: 4px;  /*边框宽度为4像素*/     border-radius: 10px; /*边框圆角半径*/     border-color: rgba(255, 225, 255, 30);/*边框颜色*/     font: bold 14px;/*字体*/         color:rgba(0, 0, 0, 100);/*字体颜色*/     padding: 6px; /*填衬*/}QPushButton:hover{ /*鼠标悬停在按钮上时*/        background-color:rgba(100,255,100, 100);        border-color: rgba(255, 225, 255, 200);        color:rgba(0, 0, 0, 200);}QPushButton:pressed { /*按钮被按下时*/     background-color:rgba(100,255,100, 200);         border-color: rgba(255, 225, 255, 30);     border-style: inset;        color:rgba(0, 0, 0, 100);}

9、加载样式表文件
使用资源源文件添加到工程

    QFile file(":/qss/my.qss");    // 只读方式打开该文件    file.open(QFile::ReadOnly);     // 读取文件全部内容,使用tr()函数将其转换为QString类型    QString styleSheet = tr(file.readAll());    //QString styleSheet = QLatin1String(file.readAll());   //使用这种方式也可以     // 为QApplication设置样式表    qApp->setStyleSheet(styleSheet);     file.close();

//先大概整理这么多,有时间在后续整理

0 0
原创粉丝点击