QML基礎——基本語法

QML 的基本語法
QML看起來像這樣

import Qt 4.7

 Rectangle {
     width: 200
     height: 200
     color: "blue"

     Image {
         source: "pics/logo.png"
         anchors.centerIn: parent
     }
 }

對象是通過類型而直接被指定的，緊隨其後的是一對大括號。對象類型總是以大寫字母開頭。在上面的例子中，存在兩個對象Rectangle和Image。在大括號之間，我們可以指定對象的相關信息，例如它的屬性。屬性是通過“property: value”這樣的方式被呈現的。在上面的例子中，我們可以看到Image擁有一個屬性叫做source，它被分配了一個值叫做"pics/logo.png"。屬性和值被冒號分隔。

屬性可以被一行行指定：

Rectangle {
     width: 100
     height: 100
 }

或單行輸寫多個屬性：

Rectangle { width: 100; height: 100 }

當單行輸寫多屬性/值時，必須由分號來分隔開來。

Import語句導入Qt模塊，它包含所有標準的QML元素。如果沒有Import語句；那麼Rectangle與Image元素將無效。

表達式

除了賦值屬性外；你也可以用JavaScript編寫的表達式來指定。

Rotation {
     angle: 360 * 3
 }

這些表達式可以包含其它的對象與屬性的引用，在這種情況下就會建立約束關聯：當該表達式改變值時；該屬性值將自動更新。

Item {
     Text {
         id: text1
         text: "Hello World"
     }
     Text {
         id: text2
         text: text1.text
     }
 }

在上面的示例中，text2對象將顯示與text1相同的文本。如果text1改變值；那麼text2也將自動更新爲相同的值。

注意這裏我們通過使用id值引用其它的對象。（詳情請參見id屬性信息）

QML註釋

在QML中的註釋類似於JavaScript。

單選註釋以 // 開始。

多行註釋以 /* 開始，以 */ 結束。

import Qt 4.7

註釋是不被執行的，添加註釋可對代碼進行解釋或者提高其可讀性。

註釋同樣還可用於防止代碼執行，這對跟蹤問題是非常有用的。

Text {
     text: "Hello world!"
//opacity: 0.5
 }

在上面的示例中，這個Text對象將正常顯示，一旦opacity: 0.5這行關掉註釋，這是以半透明方式顯示文本。

屬性

屬性命名

屬性命名以首字母爲小字（附加屬性除外）。

屬性類型

QML支持許多類型的屬性（參閱QML基本類型）。基本類型包括整型、實數型、布爾、字符串、顏色以及列表。

Item {
     x: 10.5             // a 'real' property
     ...
     state: "details"    // a 'string' property
     focus: true         // a 'bool' property
 }

QML屬性是有類型安全檢測的。也就是說，它們只允許你指定一個與屬性類型相匹配的值。例如，項目x屬性類型是實數，如果你賦值一個字符串；那麼將會得到錯誤的信息。

Item {
    x: “hello” // illegal!
}

id屬性

每個對象可給予一個特定唯一的屬性稱之爲id。在同一個QML文件中不可能擁有與其它對象同名的id值。指定一個id可以允許該對象可以被其它的對象與腳本引用。

下面的示例中，第一個矩形元素的id名爲”myRect”。第二個矩形元素的寬度是引用的myRect.widtch，這意味着它將與第一矩形具有相同的width值。

Item {
     Rectangle {
         id: myRect
         width: 100
         height: 100
     }
     Rectangle {
         width: myRect.width
         height: 200
     }
 }

請注意，一個id首字符必須是小寫字母或下劃線並且不能包含字母，數字和下劃線以外的字符。

列表屬性

列表屬性類似於下面這樣：

Item {
     children: [
         Image {},
         Text {}
     ]
 }

列表是包含在方括號內，以逗號分隔的列表元素。在你只分配單一項目列表的情況下，是可以省略方括號：

Image {
     children: Rectangle {}
 }

默認屬性

每個對象類型可以指定列表或對象屬性之一作爲其默認屬性。如果一屬性已被聲明爲默認屬性，該屬性標記可以被省略。例如該代碼：

State {
     changes: [
         PropertyChanges {},
         PropertyChanges {}
     ]
 }

可以簡化成這樣：

State {
         PropertyChanges {},
         PropertyChanges {}
 }

因爲changes是State類型的默認屬性。

分組屬性

在某些情況下使用一個‘.’符號或分組符號形成一個邏輯組。

分組屬性可寫以下這樣：

Text {
     font.pixelSize: 12
     font.bold: true
 }

或者這樣：

Text {
     font { pixelSize: 12; bold: true }
 }

在元素文件分組屬性使用‘.‘符號顯示。

附加屬性

有些對象的屬性附加到另一個對象。附加屬性的形式爲Type.property其中Type是附加property元素的類型。

例如：

Component {
     id: myDelegate
     Text {
         text: "Hello"
         color: ListView.isCurrentItem ? "red" : "blue"
     }
 }
 ListView {
delegate: myDelegate
 }

ListView元素附加ListView.isCurrentItem屬性到每個它創建的代理上。

另一個附加屬性的例子就是Keys元素，它用於處理任意可視項目上的按鍵，例如：

Item {
     focus: true
     Keys.onSelectPressed: console.log("Selected")
 }

信號處理器

信號處理器允許響應事件時處理動作。例如，MouseArea元素有信號處理器來處理鼠標按下，釋放以及單擊：

MouseArea {
     onPressed: console.log("mouse button pressed")
 }

所有信號處理器開始都是啓用的。

有一些信號處理器包含一個可選的參數，例如MouseArea onPressed信號處理程序有鼠標參數：

 MouseArea {
     acceptedButtons: Qt.LeftButton | Qt.RightButton
     onPressed: if (mouse.button == Qt.RightButton) console.log("Right mouse button pressed")
 }