MeeGo中css主題文件的使用方法

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，也可以控制實際的顯示效果。

 

原文轉自：http://dotnet.cnblogs.com/page/75301/