1、QML提供了很多定義好的界面元素，包括：Item，Rectangle，Image，Text，MouseArea，WebView，ListView。。。其中一些元素可以作爲其他元素（children）的容器（parent），被稱爲QML items。所有用於創建UI的元素都是從Item繼承而來。
2、用來描述應用程序行爲的元素，包括：State，PropertyAnimation，Transition，Timer，Connection。。。被稱爲QML declarative elements。
3、Item元素
這些元素不會顯示，但使用上和一般的UI元素一樣（As mentioned, allUI elements inherit the Item element）
基本屬性：
x,y,z position, width and height, anchors, opacity, rotation, scale, visibility(true / false), parent and children, key event handling
4、屬性的例子
1）Standard properties標準屬性可以直接用值初始化
Text {
text : "Hello World!"
height : 50
}
2）Grouped properties分組屬性將相關的屬性放在一起
Text {
font.family : "Helvetica"
font.pixelSize : 24
}
3）Identity property 標誌屬性用於唯一的表示一個元素
Text {
id : label
text : "Hello World"
}
5、屬性——顏色
元素的顏色定義方法：
1）用字符串表示（使用SVG顏色名字）：“red”，“green”，“blue”。。。
2）用字符串表示顏色的組成：紅、綠和藍 #<rr><gg><bb> #ff0000 #008000
3）使用內建3函數（紅、綠、藍、透明度）Qt.rgba(0, 0.5, 0, 1)
4）使用opacity屬性：從0.0（透明）到1.0（不透明）
6、屬性——圖片
1）source指定了圖片的相對路徑“../”指代父文件夾，也可以是URL、本地文件或資源中的文件
2）高度和寬度默認是從圖片文件中獲得
<a>如果直接設置，根據設置的值圖片將會自動播放
<b>使用屬性fillmode來設置縮放時的長寬比例
3）設置scale縮放圖片，設置rotate旋轉圖片（度是旋轉的單位）
<a>旋轉是圍繞圖片的中心的
<b>通過transforOrigin屬性來設置旋轉的圍繞點
7、QML提供的佈局管理工具：anchors佈局管理、佈局器（Grid、Row、Column）
1）anchors（錨）
A）每個QML元素都可以認爲有6個方位和4個邊緣，如下：
方位有left、right、top、bottom、horizontalCenter、verticalCenter
邊緣有leftMargin、rightMargin、topMargin、bottomMargin
B）方位用來說明不同組件間的位置信息，僞代碼如下：
a）Rectangle {id: rect1; ... }
Rectangle {id: rect2; anchors.left: rect1.right; ... }
效果：
|
rect1
|
rect2 |
b）Rectangle {id: rect1; ... }
Rectangle {id: rect2; anchors.left: rect1.right; anchors.leftMargin: 5; ... }
效果：rect1與rect2之間距離爲5
C）可以指定多個方位，甚至可以用來控制元素的大小（所有元素必須設定寬和高）
a）Rectangle {id: rect1; ...}
Rectangle {id: rect2; anchors.left: rect1.right; anchors.top: rect1.bottom; ... }
b）Rectangle {id: rect1; x = 0; ... }
Rectangle {id: rect2; anchors.left: rect1.right; anchors.right: rect3.left; ... }
D）處於運行效率考慮，只能在兄弟元素之間或者父子元素之間使用anchor
8、網格佈局
在QML中的網格佈局關鍵字爲Grid，縱向佈局關鍵字爲Row，橫向佈局關鍵字爲Column，三種佈局可以嵌套