1. qtwidget里面有stylesheet(CSS)的概念,而原始的qtgraphicsview里面,并没有stylesheet概念,到了mtf里面,又引入了stylesheet,但是没有专门的文档进行介绍,我只能参照qtwidget里面关于stylesheet的介绍,在猜测验证的基础上,做出一些总结。也许会有不准确的地方,以后会随时修改。因此,建议先看一下qtwidget中的stylesheet的相关介绍文档。
2. qt中stylesheet使用的CSS标记语言,灵感是来自于html中的css,但是,仅仅是灵感,细节上还是有一些差别,建议学习一下html中css的概念和基本用法。后面所有的介绍,将不会讨论这些基础知识。
3.基本语法(可以参考源码目录中的示例程序/code-example/layout/layout_inside_layout ,建议修改目录里面的css文件,看看效果)
选择器{属性: 属性值;属性: 属性值;…}
3.1 选择器语法。
中括号内的属性-属性值,很好理解(需要介绍的是mtf中,都有哪些属性,这个在后面部分详细描述),重点在于选择器的一般语法(qt中选择器的语法,和html中选择器的语法是不一样的),下面给出一些例子:
<1>
MLabel { font: "Nokia Sans Wide" 21px; background-color: #eeeeee; preferred-size: 85 85; maximum-size: 80 30; background-opacity: 0.5}选择器匹配的是所有 MLabel和其子类的对象实例。
<2>
MLabel#item { font: "Nokia Sans Wide" 21px; background-color: #eeeeee; preferred-size: 85 85; maximum-size: 80 30; background-opacity: 0.5}
选择器匹配的是所有 MLabel 的对象实例,并且该对象的object name是item(不确定是否包括MLabel的子类的对象实例,待补充)。
<3>
.MLabel { font: "Nokia Sans Wide" 21px; background-color: #eeeeee; preferred-size: 85 85; maximum-size: 80 30; background-opacity: 0.5}
选择器匹配的是所有 MLabel 的对象实例(不包括它的子类对象实例)。
<4>
#item { font: "Nokia Sans Wide" 21px; background-color: #eeeeee; preferred-size: 85 85; maximum-size: 80 30; background-opacity: 0.5}
选择器匹配的是所有 object name 为item的对象实例。
<5>qtwidget里面,还有其他几种选择器语法,目前还没有验证,可以先只使用上面几种。
3.2 属性-属性值介绍。
在mtf里面,属性-属性值也是有继承关系的。一MLabel为例,它的style的继承关系是 MStyle-->MWidgetStyle-->MLabelStyle。
<1>MStyle只是定义了共同的一些接口,没有实际的style,所以,从MWidgetStyle开始。
<2>MWidgetStyle是所有MWidget共有的style,包括:
代码
int marginLeftint marginTopint marginRightint marginBottomint paddingLeftint paddingTopint paddingRightint paddingBottomint reactiveMarginLeftint reactiveMarginTopint reactiveMarginRightint reactiveMarginBottomint backgroundBoxedPercentMBackgroundTiles backgroundTilesQColor backgroundColorqreal backgroundOpacityQSize preferredSizeQSize minimumSizeQSize maximumSizeMFeedback pressFeedbackMFeedback releaseFeedbackMFeedback cancelFeedback
<3>注意,前面列出了MWdiget中style的定义,但是,在css文件中,对应到属性-属性值中的时候,属性名字的写法,有小的差别,比如:
上面<2>中的 backgroundColor,对应到css中,就应该写成background-color。(详细的对照,还没有找到,先照猫画虎用"小写"加"-"吧)
<4>MLabelStyle,包括:
QColor colorQFont fontQColor highlightColorQColor activeHighlightColor
<5>还是看上面给出的一个例子:
MLabel { font: "Nokia Sans Wide" 21px; background-color: #eeeeee; preferred-size: 85 85; maximum-size: 80 30; background-opacity: 0.5}在这个例子里面,设置了5个属性,其中font是MLabelStyle,而另外4个,都是MWidgetStyle。
<6>如果使用其他的widget,设置style的方法都类似,共有的属性就是MWidgetStyle,然后就是各自定义的style,查询对应的style文档即可。
<7>补充说明一点,widget的大小,可以用css来控制,比如MWidgetStyle中的maximumSize,要体会style的含义。
另外,MSceneWindowStyle有个style是int disappearTimeout,可见,style的灵活性。
<8>mtf中的MVC模式,看似复杂,但是有它的灵活性和优势,尤其是style,也可以控制实际的显示效果。