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

轉載時請註明出處和作者聯繫方式
文章出處:http://blog.csdn.net/jack0106
作者聯繫方式:馮牮 [email protected]

 

 

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章