QML学习(五) 做出第一个简单的应用程序

通过前面四篇对QML已经有了基本的了解，今天先尝试做出第一个单页面的桌面应用程序。
1.首先打开Qt,创建项目，选择“QtQuick Application - Empty” 空工程。
在这里插入图片描述
2.设置项目名称和项目代码存储路径

3.这里要注意选择你的编译器类型，以及输出的程序时32位还是64位。

4.然后一路下一步生成项目框架，这时候发现，项目工程中生成了这些文件：

“TestItem.pro”是项目的工程文件；
“main.cpp”是主main的cpp文件;
“qml.qrc”其实算是资源文件，以后添加图片什么的，也可以直接修改这个文件；
“main.qml”就是设计界面的QML文件；

5.先直接编译尝试，可以直接编译通过，并且能Run运行程序，真是一个空的窗体：
在这里插入图片描述

6.虽然你编译能通过，但打开“main.qml”发现第二行提示导入模块报错“QML module not found (QtQuick.window)”
在这里插入图片描述
这种情况通常是由于QML_IMPORT_PATH没有设置好。在电脑的系统环境变量里添加或者直接在项目的pro文件中添加，如下所示

7.为“QML_IMPORT_PATH”添加Qt安装时实际的qml的安装路径

添加完成后，回过头来看“main.qml”的报错提示已经消失了。
在这里插入图片描述
至此，我们没有写一行代码，完成了一个空工程，主要是为了验证我们的开发环境，确保开发环境正常。

我们先简单解读一下main.cpp文件

#include <QGuiApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    const QUrl url(QStringLiteral("qrc:/main.qml"));
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
    engine.load(url);

    return app.exec();
}

在代码中，第二行包含头文件“#include ”。QQmlApplicationEngine 是 Qt 框架中用于加载 QML 应用程序的一个类，它是 QQmlEngine 的一个子类。它提供了一种方便的方式来加载和运行 QML 应用程序，这里就是为了加载和运行 QML 应用程序。
所以，在main()函数中创建了“QQmlApplicationEngine ”对象“engine”。调用“engine.load”方法来加载qml设计的界面，以及连接engine对象的objectCreated信号用以退出程序。

接下来，要做一些简单的页面，只需修改“main.qml”文件，我们尝试添加一些元素。
（1）改掉标题
在这里插入图片描述
（2）加一个矩形

（3）添加一行文字

（4）添加一个按钮
在这里插入图片描述
出现错误提醒"Unknown component.(M300)"，这是由于没有引入“QtQuick.Controls”，import导入该模块后即正常。

Ok，按钮和文字都能展示出来，一个QML的程序演示完成，但这代码里边存在的几个问题，比如设置的按钮位置显示不对，在下一篇文章中，详细研究这些具体界面开发的问题。