QML基本語法
QML是什么？
QML 是一中聲明式語言，用來描述應用程序接口的――是什么樣，有怎樣的行為。在QML中，一個用戶接口被指定為帶有屬性的對象是。
這個介紹主要面向只有很少或者沒有編碼經驗的人。在QML中，JavaScript作為一種腳本語言被使用。因此在深入學習QML之前，也許你會想要去學一些關于JavaScript的知識（JavaScript: The Definitive Guide）。另外，對像HTML和CSS這樣的網頁技術有一些基礎的了解也是相當有幫助的，但這些都不是必須的。
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 }
當多個property/value對被指定在一個單行上時，他們需要通過分號來分隔。
import聲明是為了導入包含所有標準的QML元素的Qt模塊。沒有這個導入聲明，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 值，來進行引用。
QML注釋
QML中的注釋方式和Javascript 的相同。
單行注釋使用//；
多行注釋使用 /* … */ 。
Text {
text: "Hello world!"/*print text*/
//opacity: 0.5
}
屬性
屬性命名
屬性通常以小寫字符開頭（附加屬性除外）
屬性類型
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的屬性是屬于類型安全的，也就是說屬性的類型必須和所分配的值是相同的。例如，Item的x屬性是一個real，如果你想要給他分配一個string值，就會得到一個錯誤。
Item {
x: "hello" // illegal!
}
id屬性
每個對象都可以指定一個專門的屬性叫做id，這個屬性的值必須是唯一的。在同一個QML文檔中不能有相同的id值。通過指定一個唯一可用的id，對象就可以被其他對象和腳本引用。
Item {
Rectangle {
id: myRect
width: 100
height: 100
}
Rectangle {
width: myRect.width
height: 200
}
}
ps:id必須以小寫字母或者下劃線開頭，并且不能包含除字母、數字和下劃線以外的其他字符。
List屬性
List屬性看起來像這樣
Item {
children: [
Image {},
Text {}
]
}
缺省屬性
每個對象類型可以指定一個list或者或者對象屬性作為缺省屬性。如果一個屬性已經被聲明為缺省屬性，那么該屬性的標簽就可以被省略。
示例代碼
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是這個附加屬性元素的類型。
Component {
id: myDelegate
Text {
text: "Hello"
color: ListView.isCurrentItem ? "red" : "blue"
}
}
ListView {
delegate: myDelegate
}
ListView元素附加ListView.isCurrentItem這個屬性到它創建的每一個對象中。
另一個附加屬性的例子是Keys元素通過附加屬性來處理任何可見Item的key press事件，例如：
Item {
focus: true
Keys.onSelectPressed: console.log("Selected")
}
信號處理器
信號處理器允許通過事件來響應動作。舉個例子來說，MouseArea元素擁有信號處理器來處理鼠標press、release和click：
MouseArea {
onPressed: console.log("mouse button pressed")
}
所有的信號處理器都是以“on”開頭的。
一些信號處理器還包含有選項參數，例如MouseArea onPressed這個信號處理器就有mouse這個參數：
MouseArea {
acceptedButtons: Qt.LeftButton | Qt.RightButton
onPressed: if (mouse.button == Qt.RightButton) console.log("Right mouse button pressed")
}
留言列表
