文章目录

QML开发笔记(二)：创建QML项目

QML开发笔记(二)：创建QML项目

方法一：直接创建Qt Quick模板

打开Qt Creator，选择文件，新建文件或项目，选择Application，Qt Quick Application - Empty。
在这里插入图片描述

注：Qt Quick是编写QML应用的标准库。Qt Quick模块提供了两种接口：使用QML语言创建应用的QML接口和使
用C++语言扩展QML的C++接口。

模板名称	说明
Qt Quick-Application - Empty	一个空的Qt Quick模板项目工程
Qt Quick-Application - Scroll	一个 ScrollView类型/可滚动列表视图的Qt Quick模板项目工程 (需要 Qt 5.9 或者更高版本)。
Qt Quick-Application - Stack	一个 StackView类型/基于堆的导航模型页面的Qt Quick模板项目工程(需要 Qt 5.7 或者更高版本)。
Qt Quick-Application - Swipe	一个 SwipeView 类型/基于堆的导航模型页面的Qt Quick模板项目工程(需要 Qt 5.7 或者更高版本)。

一路下一步，到Kits时注意，选择一个Kits，下一步。
在这里插入图片描述

有些同学会出现如下提示：

Add a kit in the options or via the maintenance tool of the SDK.

在这里插入图片描述
具体原因笔者也没找到，但是可以用第二种创建项目的方法解决。

创建好的项目如下：
在这里插入图片描述

方法二：创建Qt Widget模板后，更改为Qt Quick模板

打开Qt Creator，选择文件，新建文件或项目，选择Application，Qt Widgets Application。
在这里插入图片描述

一路下一步到Kits的时候，发现又可以选择了。在这里插入图片描述
那么我们先创建出Widgets。

我们下面要做的是把一个Qt Widgets 工程改成 Qt Quick 工程。

1、添加QML资源文件

右键项目目录，选择Add New…（我删除了多余资源，删除资源的步骤往下看）

在这里插入图片描述
选择Qt>Qt Resource File

创建名为qrc的资源文件

右键新创建的资源文件qrc，选择Add New（我删除了多余资源，删除资源的步骤往下看）

在这里插入图片描述

选择Qt->QML File（Qt Quick 2）

在这里插入图片描述

创建一个名为main的文件（名称可自定义）

在这里插入图片描述
创建好后如下：（我删除了多余资源，删除资源的步骤往下看）

在这里插入图片描述

2、创建qml窗口界面

更改main.qml里面的代码为基础窗口代码

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
}

在这里插入图片描述

3、更改pro文件的配置

在这里插入图片描述

把Qt += core gui更改为如下

TEMPLATE = app

QT += qml quick

在这里插入图片描述

4、更改main.cpp调用界面的方式

（1）、包含QML的支持库

#include <QQmlEngine>
#include <QQmlContext>
#include <QQmlApplicationEngine>

在这里插入图片描述
（2）、创建界面引擎

QQmlApplicationEngine engine;

在这里插入图片描述
（3）、更改窗口的调用方式

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

    if (engine.rootObjects().isEmpty())
        return -1;
    return a.exec();
}

在这里插入图片描述