QML是什么？
QML 是一中聲明式語(yǔ)言，用來(lái)描述應(yīng)用程序接口的――是什么樣，有怎樣的行為。在QML中，一個(gè)用戶接口被指定為帶有屬性的對(duì)象是。 這個(gè)介紹主要面向只有很少或者沒(méi)有編碼經(jīng)驗(yàn)的人。在QML中，JavaScript作為一種腳本語(yǔ)言被使用。因此在深入學(xué)習(xí)QML之前，也許你會(huì)想要去學(xué)一些關(guān)于JavaScript的知識(shí)（JavaScript: The Definitive Guide）。另外，對(duì)像HTML和CSS這樣的網(wǎng)頁(yè)技術(shù)有一些基礎(chǔ)的了解也是相當(dāng)有幫助的，但這些都不是必須的。 QML 的基本語(yǔ)法
QML看起來(lái)像這樣- import Qt 4.7
- Rectangle {
- width: 200
- height: 200
- color: "blue"
- Image {
- source: "pics/logo.png"
- anchors.centerIn: parent
- }
- }
對(duì)象是通過(guò)類型而直接被指定的，緊隨其后的是一對(duì)大括號(hào)。對(duì)象類型總是以大寫(xiě)字母開(kāi)頭。在上面的例子中，存在兩個(gè)對(duì)象Rectangle和Image。在大括號(hào)之間，我們可以指定對(duì)象的相關(guān)信息，例如它的屬性。屬性是通過(guò)“property: value”這樣的方式被呈現(xiàn)的。在上面的例子中，我們可以看到Image擁有一個(gè)屬性叫做source，它被分配了一個(gè)值叫做"pics/logo.png"。屬性和值被冒號(hào)分隔。 屬性可以被一行行指定： - Rectangle {
- width: 100
- height: 100
- }
同時(shí)也可以在一個(gè)單行上指定多個(gè)屬性： - Rectangle { width: 100; height: 100 }
當(dāng)多個(gè)property/value對(duì)被指定在一個(gè)單行上時(shí)，他們需要通過(guò)分號(hào)來(lái)分隔。 import聲明是為了導(dǎo)入包含所有標(biāo)準(zhǔn)的QML元素的Qt模塊。沒(méi)有這個(gè)導(dǎo)入聲明，Rectangle和Image元素都將不能被使用。 表達(dá)式
除了直接給屬性指定值之外，你也可以像在JavaScript中一樣通過(guò)表達(dá)式來(lái)指定。 - Rotation {
- angle: 360 * 3
- }
這些表達(dá)式可以包含其他對(duì)象和屬性，這樣子的操作將會(huì)產(chǎn)生一個(gè)綁定關(guān)系，當(dāng)這個(gè)表達(dá)式的值發(fā)生改變時(shí)，已經(jīng)通過(guò)表達(dá)式指定了的屬性的值也會(huì)自動(dòng)更新到那個(gè)值。 - Item {
- Text {
- id: text1
- text: "Hello World"
- }
- Text {
- id: text2
- text: text1.text
- }
- }
在上面的這個(gè)例子中，text2對(duì)象將會(huì)顯示和text1一樣的文字.如果text1改變了，text2也會(huì)自動(dòng)變化為相同的值。 在引用其他對(duì)象時(shí)，可以通過(guò)對(duì)象的id 值，來(lái)進(jìn)行引用。
QML注釋
QML中的注釋方式和Javascript 的相同。 單行注釋使用//； 多行注釋使用 /* … */ 。 - Text {
- text: "Hello world!"/*print text*/
- //opacity: 0.5
- }
屬性命名
屬性通常以小寫(xiě)字符開(kāi)頭（附加屬性除外） 屬性類型
QML支持多種屬性(具體參看QML Basic Types)。基本的屬性包括 int, real, bool, string, color和lists。 - Item {
- x: 10.5 // a 'real' property
- ...
- state: "details" // a 'string' property
- focus: true // a 'bool' property
- }
QML的屬性是屬于類型安全的，也就是說(shuō)屬性的類型必須和所分配的值是相同的。例如，Item的x屬性是一個(gè)real，如果你想要給他分配一個(gè)string值，就會(huì)得到一個(gè)錯(cuò)誤。 - Item {
- x: "hello" // illegal!
- }
每個(gè)對(duì)象都可以指定一個(gè)專門的屬性叫做id，這個(gè)屬性的值必須是唯一的。在同一個(gè)QML文檔中不能有相同的id值。通過(guò)指定一個(gè)唯一可用的id，對(duì)象就可以被其他對(duì)象和腳本引用。 - Item {
- Rectangle {
- id: myRect
- width: 100
- height: 100
- }
- Rectangle {
- width: myRect.width
- height: 200
- }
- }
ps:id必須以小寫(xiě)字母或者下劃線開(kāi)頭，并且不能包含除字母、數(shù)字和下劃線以外的其他字符。 List屬性
List屬性看起來(lái)像這樣 - Item {
- children: [
- Image {},
- Text {}
- ]
- }
list有包含在方括號(hào)，list中的屬性以逗號(hào)來(lái)分隔。如果只有一個(gè)屬性，可以省略方括號(hào)。 - Image {
- children: Rectangle {}
- }
每個(gè)對(duì)象類型可以指定一個(gè)list或者或者對(duì)象屬性作為缺省屬性。如果一個(gè)屬性已經(jīng)被聲明為缺省屬性，那么該屬性的標(biāo)簽就可以被省略。
示例代碼- State {
- changes: [
- PropertyChanges {},
- PropertyChanges {}
- ]
- }
- State {
- PropertyChanges {}
- PropertyChanges {}
- }
組屬性
在一些示例中屬性會(huì)構(gòu)成一個(gè)邏輯上的小組，并且通過(guò)點(diǎn)（“.”）或者組標(biāo)記去使用它。
組屬性可以被寫(xiě)成以下形式：
- Text {
- font.pixelSize: 12
- font.bold: true
- }
- Text {
- font { pixelSize: 12; bold: true }
- }
附加屬性的意思就是通過(guò)一些對(duì)象附加一些屬性到另一個(gè)對(duì)象上。附加屬性的格式如Type.property ，在這里Type是這個(gè)附加屬性元素的類型。 - Component {
- id: myDelegate
- Text {
- text: "Hello"
- color: ListView.isCurrentItem ? "red" : "blue"
- }
- }
- ListView {
- delegate: myDelegate
- }
ListView元素附加ListView.isCurrentItem這個(gè)屬性到它創(chuàng)建的每一個(gè)對(duì)象中。 另一個(gè)附加屬性的例子是Keys元素通過(guò)附加屬性來(lái)處理任何可見(jiàn)Item的key press事件，例如： - Item {
- focus: true
- Keys.onSelectPressed: console.log("Selected")
- }
信號(hào)處理器允許通過(guò)事件來(lái)響應(yīng)動(dòng)作。舉個(gè)例子來(lái)說(shuō)，MouseArea元素?fù)碛行盘?hào)處理器來(lái)處理鼠標(biāo)press、release和click： - MouseArea {
- onPressed: console.log("mouse button pressed")
- }
所有的信號(hào)處理器都是以“on”開(kāi)頭的。 一些信號(hào)處理器還包含有選項(xiàng)參數(shù)，例如MouseArea onPressed這個(gè)信號(hào)處理器就有mouse這個(gè)參數(shù)： - MouseArea {
- acceptedButtons: Qt.LeftButton | Qt.RightButton
- onPressed: if (mouse.button == Qt.RightButton) console.log("Right mouse button pressed")
- }
|