QML语法
QML语言是一种描述用户界面的声明式语言，属于脚本语言，文件格式以“.qml”结尾。语法格式非常像CSS或者HTML，支持javascript形式的编程控制，它将用户界面分解成若干个元素，每个元素又包含多个属性，多个元素结合成一个组件，共同组成了用户界面。
QML元素
UI界面由若干个元素组成，元素是构成QML的UI界面的基本单位，每一个元素可以显示特定的内容，完成特定的功能，例如显示一个图片，需要使用Image元素，显示文本内容，需要使用Text元素。
QML属性
每个元素都包含多个属性，属性用来描述各元素的形状、大小、颜色、位置、按键区域、字体和行为等等具体信息，每个元素所拥有的属性不同，需要结合具体的元素进行设置和使用。
通过一个简单的QML例子详细说明QML语法。
文件名：rectangle.qml
import QtQuick 2.0
//“Rectangle”是矩形框元素，可以显示一个矩形框
Rectangle {
// 根元素id：id名为root
id: root
// QML的属性：width表示宽，height表示高，设置矩形框的显示范围
width:500
height:260
// 设置颜色属性
color: "#D8D8D8"
// 声明一个嵌套的元素(根元素的一个分支，即子元素)
// 图像元素Image，用来显示图片
Image {
id: rocket
//设置图片的显示范围
width:400
height:130
/* 通过“parent.width”可以使用“Image”元素的父元素“Rectangle”的属性，得到“Rectangle”宽度的值 */
/* x表示水平方向的坐标可以实现图片水平居中显示 */
/* y表示竖直方向的坐标 */
x:(parent.width - width)/2
y: 40
source:"../../images/rocket.png" //指定图片的路径
}
// 声明另一个嵌套的元素(子元素)
// 文本元素Text ，用来显示文本内容
Text {
// 通过id“rocket”访问“Image”元素的属性
y: rocket.y + rocket.height + 20
// 通过id“root”访问“Rectangle”元素的属性
width: root.width
//设置文字对齐方式为：居中对齐
horizontalAlignment: Text.AlignHCenter
//设置文字的显示内容为“Rocket”
text:"Rocket"
}
}
以上代码的详细说明：
1、import声明导入了一个指定的模块版本。
2、使用//可以单行注释，使用/**/可以多行注释，就像C/C++和JavaScript一样。
3、每一个QML文件都需要一个根元素，就像HTML一样，在这里Rectangle就是跟元素。
4、一个元素使用它的类型声明，然后使用{}进行包含。
5、元素拥有属性，他们按照name:value的格式来赋值。
6、任何在QML文档中的元素都可以使用它们的id进行访问（id是一个任意的标识符），每一个元素可以指定id，也可以不指定id，例如“Text”元素就没有指定id。
7、元素可以嵌套，这意味着一个父元素可以拥有多个子元素。子元素可以通过访问parent关键字来访问它们的父元素。例子中“Rectangle”是父元素，“Image”和“Text”为子元素。
8、子元素从父元素上继承了坐标系统，它的x,y坐标总是相对应于它的父元素坐标系统。
运行的效果
建议：
你会经常使用id或者关键字parent来访问你的父对象。有一个比较好的方法是命名 你的根元素对象id为root（id:root），这样比较容易记忆。