meego中css主题文件的使用方法

转载时请注明出处和作者联系方式
文章出处：http://blog.csdn.net/jack0106
作者联系方式：冯牮 fengjian0106@yahoo.com.cn

 

 

1. qtwidget里面有stylesheet（CSS）的概念，而原始的qtgraphicsview里面，并没有stylesheet概念，到了mtf 里面，又引入了stylesheet，但是文档不是很多，我只能参照qtwidget里面关于stylesheet的介绍，在猜测验证的基础 上，做出一些总结。肯定会有不准确的地方，以后会随时修改。因此，建议先看一下qtwidget中的stylesheet的相关介绍文档。

有一份mtf中stylesheet的介绍文档，见 http://apidocs.meego.com/mtf/styling_stylesheets.html

后面的描述有不准确的地方，待修改完善。

2. qt中stylesheet使用的CSS标记语言，灵感是来自于html中的css，但是，仅仅是灵感，细节上还是有一些差别，建议学习一下html中css的概念和基本用法。后面所有的介绍，将不会讨论这些基础知识。

3. 基本语法（可以参考示例程序/code-example/layout/layout_inside_layout ，建议修改目录里面的css文件，看看效果，挺有意思的）
选择器 {属性: 属性值;属性: 属性值;...}

3.1 选择器语法。
中括号内的属性-属性值，很好理解（需要介绍的是mtf中，都有哪些属性，这个在后面部分详细描述），重点在于 选择器 的一般语法（qt中选择器的语法，和html中选择器的语法是不一样的），下面给出一些例子：
<1>
MLabelStyle {
font: "Nokia Sans Wide" 21px;
background-color: #eeeeee;
preferred-size: 85 85;
maximum-size: 80 30;
background-opacity: 0.5
}
选择器匹配的是所有 MLabel和其子类 的对象实例。

<2>
MLabelStyle #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>
. MLabelStyle {
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 marginLeft
int marginTop
int marginRight
int marginBottom
int paddingLeft
int paddingTop
int paddingRight
int paddingBottom
int reactiveMarginLeft
int reactiveMarginTop
int reactiveMarginRight
int reactiveMarginBottom
int backgroundBoxedPercent
MBackgroundTiles backgroundTiles
QColor backgroundColor
qreal backgroundOpacity
QSize preferredSize
QSize minimumSize
QSize maximumSize
MFeedback pressFeedback
MFeedback releaseFeedback
MFeedback cancelFeedback

<3>注意，前面列出了MWdiget中style的定义，但是，在css文件中，对应到 属性-属性值 中的时候，属性名字的写法，有小的差别，比如：
上面<2>中的 backgroundColor，对应到css中，就应该写成background-color。（详细的对照，还没有找到，先照猫画虎吧）

<4>MLabelStyle，包括：
QColor color
QFont font
QColor highlightColor
QColor activeHighlightColor

<5>还是看上面给出的一个例子：
MLabelStyle {
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，也可以控制实际的显示效果