分享

Qt

 QomoIT 2016-08-01
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快速入门》

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多