QML程序的源文件又叫“QML文档”，以.qml为文件名后缀，例如，一般项目的“main.qml”就是一个QML文档。每个QML文档都由两部分构成：import和对象声明。

1. import 部分

此部分导入需要使用的QtQuick库，这些库由Qt5提供，包含了用户界面最通用的类和功能，如文件开头的两句：

import QtQuick 2.12 //导入 Qt Quick 2.12 库
import QtQuick.Window 2.12 //导入 Qt Quick 窗体库

导入这些库后，用户就可以在自己编写的程序中访问QtQuick所有的QML类型、接口和功能。

2. 对象声明

这是一个QML程序代码的主体部分，它以层次化的结构定义了可视场景中将要显示的元素，如矩形、图像、文本及获取用户输入的对象……它们都是Qt Quick为用户界面开发提供的基本构件。例如，对象声明部分：

Window { //根对象
  width: 640
  height: 480
  visible: true
  title: qsTr ("Hello World")
  Rectangle { //对象
  	……
  }
}

QML规定了一个Window对象作为根对象，程序中声明的其他所有对象都必须位于根对象的内部。

3. 对象和属性

对象可以嵌套，即一个QML对象可以没有、也可以有一个或多个子对象，比如如下代码：

Rectangle { //对象：Rectangle
  ……
  MouseArea { //子对象 1: MouseArea
  	……
  }
  TextEdit { //子对象 2: TextEdit
  	……
    Rectangle { //子对象2的子对象：Rectangle
    	……
    }
  }
}

上面声明的Rectangle (矩形）对象就有两个子对象（MouseArea和TextEdit),而子对象TextEdit本身又拥有一个子对象Rectangle。

对象由它们的类型指定，以大写字母开头，后面跟一对大括号{}，{}之中是该对象的属性，属性以键值对“属性名:值”的形式给出，比如在代码中：

Rectangle {
  width: 360 //属性（宽度）
  height: 360 //属性（高度）
}

定义了一个宽度和高度都是360像素的矩形。QML允许将多个属性写在一行，但它们之间必须用分号隔开，所以以上代码也可以写为：

Rectangle {
  width: 360; height: 360 //属性（宽度和高度）
  ……
}

对象MouseArea是可以响应鼠标事件的区域：

MouseArea {
  id: mouseArea
  anchors.fill: parent
  onClicked: {
  	console.log(qsTr(textEdit.text))
  }
}

作为子对象，它可以使用parent关键字访问其父对象Rectangle。其属性anchors.fill起到布局作用，它会使MouseArea充满一个对象的内部，这里设值为parent表示MouseArea充满整个矩形，即整个窗口内部都是鼠标响应区。

TextEdit是一个文本编辑对象：

TextEdit {
  id: textEdit
  text: qsTr("Enter some text***")
  verticalAlignment: Text.AlignVCenter
  anchors.top: parent.top
  anchors.horizontalCenter: parent.horizontalCenter
  anchors.topMargin: 20
  Rectangle {
    anchors.fill: parent
    anchors.margins: -10
    color: "transparent"
    border.width: 1
  }
}

属性text是其默认要输出显示的文本（Enter some text...)，属性anchors.top、anchors.horizontalCenter和anchors.topMargin都是布局用的，这里设为使TextEdit处于矩形窗口的上部水平居中的位置，距窗口顶部有20个像素的边距。

QML文档中的各种对象及其子对象以这种层次结构组织在一起，共同描述一个可显示的用户界面。

4. 对象标识符

每个对象都可以指定一个唯一的id值，这样便可以在其他对象中识别并引用该对象。例如,

MouseArea {
  id: mouseArea
  ……
}

就给MouseArea指定了id为mouseArea。可以在一个对象所在的QML文档中的任何地方，通过使用该对象的id来引用该对象。因此，id值在一个QML文档中必须是唯一的。对于一个QML对象而言，id值是一个特殊的值，不要把它看成一个普通的属性，例如，无法使用mouseArea.id来进行访问。一旦一个对象被创建，它的id就无法被改变了。

id必须以小写字母或下画线开头，并且不能使用除字母、数字和下画线外的字符。

5. 注释

QML文档的注释同C/C++、JavaScript代码的注释一样:

• (1) 单行注释使用“//”开始，在行的末尾结束。
• (2) 多行注释使用“/*”开始，使用“*/”结尾。

————————————————

觉得有用的话请关注点赞，谢谢您的支持！

对于本系列文章相关示例完整代码有需要的朋友，可关注并在评论区留言！