第11章 Qml快速入门
好文章，来自【福优学苑@音视频+流媒体】
第11章 Qml快速入门
11.1 Qml简介
从 Qt 4.7 开始，Qt 引入了一种声明式脚本语言，称为 QML（Qt Meta Language 或者 Qt Modeling Language），作为 C++ 语言的一种替代。
而 Qt Quick 就是使用 QML 构建的一套类库。
QML 是一种基于 JavaScript 的声明式语言。
在 Qt 5 中， QML 有了长足进步，并且同 C++ 并列成为 Qt 的首选编程语言。
也就是说，使用 Qt 5，我们不仅可以使用 C++ 开发 Qt 程序，而且可以使用 QML。
虽然 QML 是解释型语言，性能要比 C++ 低一些，但是新版 QML 使用 V8，Qt 5.2 又引入了专为 QML 优化的 V4 引擎，使得其性能不再有明显降低。
在 Nokia 发布 Qt 4.7 的时候，QML 被用于开发手机应用程序，全面支持触摸操作、流畅的动画效果等。但是在 Qt 5 中，QML 已经不仅限于开发手机应用，也可以用户开发传统的桌面程序。
QML 文档描述了一个对象树。
QML 元素包含了其构造块、图形元素（矩形、图片等）和行为（例如动画、切换等）。这些 QML 元素按照一定的嵌套关系构成复杂的组件，供用户交互。
Qt QML模块为QML语言开发应用程序和库提供了一个框架。
它定义并实现了语言及其引擎架构，并且提供了一个接口，允许应用开发者以自定义类型和集成JavaScript与C++代码的方式来扩展QML语言。
Qt QML模块提供了QML和C++两套接口。
QML（Qt Meta-Object Language，Qt元对象语言）是一种用于描述应用程序用户界面的声明式编程语言。
QML是一种高可读性的语言，可以使组件以动态方式进行交互，并且允许组件在用户界面中很容易地实现复用和自定义。
QML允许开发者和设计者以类似的方式创建高性能的、具有流畅的动画效果的、极具视觉吸引力的应用程序。
QML提供了一个具有高可读性的类似JSON的声明式语法，并提供了必要的JavaScript语句和动态属性绑定的支持。
QML语言和引擎框架由Qt QML模块提供。
11.2 创建一个Qt Quick应用
如上述代码所示，一个 QML 文档分为 import 和 declaration 两部分。
前者用于引入文档中所需要的组件（有可能是类库，也可以是一个 JavaScript 文件或者另外的 QML 文件）；后者用于声明本文档中的 QML 元素。
每一个 QML 有且只有一个根元素，类似于 XML 文档。这个根元素就是这个 QML 文档中定义的 QML 元素，在这个例子中就是一个 Window 对象。
注意一下这个 QML 文档的具体语法，非常类似于 JSON 的定义，使用键值对的形式区分元素属性。所以我们能够很清楚看到，我们定义了一个窗口，可见性为真，宽度为 360 像素，高度为 360 像素。
记得我们说过，QML 文档定义了一个对象树，所以 QML 文档中元素是可以嵌套的。 在这个窗口中，我们又增加了一个 Text 元素，顾名思义，就是一个文本。Text 显示的是 Hello World 字符串，而这个字符串是由 qsTr()函数返回的。
qsTr()函数就是 QObject::tr()函数的 QML 版本，用于返回可翻译的字符串。
Text 的位置则是由锚点（anchor）定义。示例中的 Text 位置定义为 parent 中心，其中 parent 属性就是这个元素所在的外部的元素。
11.3 MouseArea元素的介绍
MouseArea
是一个处理鼠标事件的元素，需要和其他可见元素进行组合使用。
MouseArea 还有一个 onClicked 属性。
这是一个回调，也就是鼠标点击事件。
注意我们的 MouseArea充满整个矩形anchors.fill: parent，所以整个区域都可以接受鼠标事件。
属性
acceptedButtons :
Qt::MouseButtons
表示MouseArea响应的鼠标按键。可取的值有：
Qt.LeftButton
Qt.RightButton
Qt.MiddleButton
默认值是Qt.LeftButton
MouseArea元素的一个很典型的用法是和一个可视的item一起用，处理这个item的鼠标响应。
在下例中我们将MouseArea放到Rectangle中，当单击Rectangle区域中时，Rectangle颜色会变成红色。
MouseArea {
anchors.fill: parent
onClicked: { parent.color = 'red' }
}
很多时候，MouseArea区域会传递一个鼠标事件作为参数，这个参数中包含了很多鼠标事件信息，例如，单击的位置，具体按下的一个鼠标左键还是右键，以及一些键盘按键信息。
在下面的例子中，当Rectangle
区域被右键单击时会触发改变颜色。
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.LeftButton | Qt.RightButton
onClicked: {
if (mouse.button == Qt.RightButton)
parent.color = 'blue';
else
parent.color = 'red';
}
}
// 根对象是一个矩形
Rectangle {
//声明一个新的mouseArea属性，作为子对象MouseArea的id属性的属性别名
property alias mouseArea: mouseArea
// 定义矩形的宽和高
width: 360
height: 360
// MouseArea是一个不可见项目，为它覆盖的可见项目提供鼠标处理
MouseArea {
//id属性作为该对象的标识，在其他地方可以通过id来引用该对象
id: mouseArea
// 这个属性起到布局的作用，这里就是填充整个父项目
anchors.fill: parent
}
//Text是文本项目，用来显示文本内容
Text {
// 使文本项目处于父项目的中心位置
anchors.centerIn: parent
// 文本内容是“text.area”
text: "text.area"
}
}
这段代码定义了一个矩形，然后在矩形上面遮了一个鼠标区域MouseArea，这样整个矩形都可以接受鼠标操作了，最后在矩形的中间放了一个文本框，显示了text.area字符串。
11.4 main函数和pro文件
int main(int argc, char *argv[])
{
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
QGuiApplication app(argc, argv);
// QML.Application.Engine：引擎类
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
if (engine.rootObjects().isEmpty())
return -1;
return app.exec();
}
这个文件内容很简单，主要就是在主函数中定义了一个QQmlApplicationEngine对象，并用其加载了main.qml文件。
QQmlApplicationEngine类结合了QQmlEngine和QQmlComponent两个类的功能，提供了一个便捷的方式来加载一个QML文件，但这个QML文件的所有可视内容必须放在Window对象中才能最终显示出来。
然后是myquick.pro项目文件，其中就是简单指明了程序的模板、使用的模块、源文件、资源文件等，这个与C++项目类似。
好文章，来自【福优学苑@音视频+流媒体】
***【在线视频教程】***
