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，三种布局可以嵌套