QML入门教程之——QML入门简介（一）

目录

一.QML简介

二.从"Hellow Word"浅谈我们第一个QML程序

---

一.QML简介

QML（Qt Meta Language 或者 Qt Modeling Language），从Qt4.7之后，Qt引入了一种声明式脚本语言，类似解释型语言，方便使用，不在是之前C++那样的编译型语言，极大的改变了传统的Qt 使用。将所有界面相关的都写入到一个qml文件中，QML 文件描述了一个对象树。其包含了构造块、图形元素（矩形、图片等）和行为（例如动画、切换等）。这些 QML 元素按照一定的嵌套关系构成复杂的组件，供用户交互，极大的方便了开发的过程，此语法同时具有简单易学的优点。

二.从"Hellow Word"浅谈我们第一个QML程序

我所使用的Qt版本为5.9.0,新建一个QML工程如下：

选择“Qt Quick Application”，其他选择默认就好，创建好之后我们会看到程序为我们生成了一个main.qml文件，其他主函数main.cpp也与C++混合编程有些小变化，如下所示：

主函数很简单，主要是通过定义一个“QQmlApplicationEngine”对象去加载我们的main.qml文件，我们更关注的是main.qml文件，如下：

如上述代码所示，直观感受就是此main.qml包括了两部分，一个import引入组件部分和一个Window 界面部分。前者用于引入文档中所需要的组件（有可能是类库，也可以是一个 JS文件或者另外的 QML 文件）；后者用于声明本文档中的 QML 元素。
每一个 QML 文件有且只有一个Root根元素，类似于 XML 文档。这个根元素就是这个 QML 文档中定义的 QML 元素，在这个例子中就是一个 Window 对象。QML文件的语法极其简单，类似于 JSON文件 的定义，使用键值对的形式区分元素属性。所以我们能够很清楚看到，我们定义了一个窗口，可见性设置为真，宽度为 640 像素，高度为 480 像素，窗体的标题为“Hello Word”,除此之外，我们还嵌套了一个Text文本元素，文本的值为“Hello Word”。这个字符串是由 qsTr()函数返回的。qsTr()函数就是 QObject::tr()函数的 QML 版本，用于返回可翻译的字符串。Text 的位置是由锚点（anchor）定义。示例中的 Text 位置定义为 parent 中心，其中 parent 属性就是这个元素所在的外部的元素。anchors.centerIn: parent同理，我们可以看到MouseArea 是充满父元素的，我们运行后的界面显如下：

QML语法是一种解释型语言，我们可以实时修改qml文件，不用进行编译就可以直接运行，显示我们所需要的界面，比如我们将刚刚我们的文本字符串进行修改为“您好，中国！”，不进行编译，直接运行显示如下：

下一篇：QML入门教程之——QML模块基础语法（二）