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

转载时请注明出处和作者联系方式
文章出处：http://blog.csdn.net/jack0106
作者联系方式：冯牮 fengjian0106@yahoo.com.cn
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   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>还是看上面给出的一个例子：

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，也可以控制实际的显示效果。