创建第一个Qt Quick项目

刚开始接触qml，发现在开发View层时功能确实很强大。本人也是初学者，可能有描述或者理解错误的地方，欢迎指正交流。

环境

Ubuntu16.04+Qt5.9.1

步骤

1. 打开Qt后，创建一个新的项目：选择Qt QuickApplication，点击“Choose”；如下图所示：
2. 与创建Qt Widgets Application项目相同，选择此项目的路径并键入新项目的名称，点击“下一步”；
3. 出现选择“Build system”的选项，默认是“qmake”，点击“下一步”；
4. 选择构建套件，使用默认的“Desktop Qt xxx……”即可，点击“下一步”；
5. 此时会出现选择Qt版本的下拉框，使用默认，并且需要注意的是，会有一个默认是打勾的选项“With ui.qml file”；(记得有这样一个文件的出现)，点击“下一步”，如下图：
6. 点击“完成”即可，可以看到这个项目中会生成哪些文件；到此为止，一个Qt Quick项目就创建成功了。

运行程序

运行程序后，我们可以看到如下的效果：

理解代码

1. 首先看到main.cpp文件中：程序通过QQmlApplicationEngine的load()函数加载main.qml文件；

#include <QGuiApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));//加载qml文件的一种方式
    if (engine.rootObjects().isEmpty())
        return -1;

    return app.exec();
}

2. 再看main.qml文件中：

import QtQuick 2.6  
import QtQuick.Window 2.2  //加载所需要的模块

Window { //可以理解为主窗体
    visible: true //可见性
    width: 640    //窗体的宽
    height: 480   //窗体的高
    title: qsTr("Hello World")//窗体的标题

    MainForm { //这个名称与MainForm.ui.qml文件的主名称相同，可以理解为一个自定义组件
        anchors.fill: parent  //填充父亲，即填充满Window
        mouseArea.onClicked: {//鼠标点击时的动作
            console.log(qsTr('Clicked on background. Text: "' + textEdit.text + '"'))
        }
    }
}

3. 双击MainForm.ui.qml文件时，会发现这个界面是图形化界面，内容正好跟程序运行时看到的界面差不多。

总体思路

程序从main.cpp开始运行，通过QQmlApplicationEngine加载qml文件后进入main.qml文件中，main.qml文件中描述了一个Window(父)和一个MainForm(子)，最终呈现出的即是我们所看到的效果。

Ps

在上面的代码注释中提到QQmlApplicationEngine只是加载qml文件的一种方法，还有另一种方法，即QQuickView，这个类同样也可以加载qml文件。