Qt5初见笔记（一）使用单个.pro文件创建Hello World工程（参考Sherriff, Nicholas《Learn Qt5》）

参考书目：

Sherriff, Nicholas.Learn Qt5: Build Modern, Responsive Cross-platform Desktop Applications with Qt, C++, and QML

OS: Windows 10

IDE: Qt Creator

Qt version: 5.9.2

本想在VS 2017平台上学习Qt，却一直没找到合适的教程参考。后来在Amazon上偶然看到这本书的电子版比较便宜就买了下来，虽然它是在Qt Creator平台上实现，但我大体看了一下感觉不错，而且这本书比较新（首次出版于2018年2月，出书时Qt的最新版本是5.10），就打算用它学下去。这里写一下学习笔记，更新进度与看书进度同步。

 

这篇文章讲的是不使用IDE提供的工程模板，而是自己通过先创建一个.pro工程文件，然后在此基础上一步步实现简单的Hello World工程。这样有助于初学者理解Qt工程的结构，并对工程中各种繁杂后缀名（.qml、.qrc、.user等）的文件和它们之间的关系建立初步的理解——它们只是简单的文本文件而已。

 

Qt下载地址：http://download.qt.io/ （打开后找archive -> qt，找到相应的版本文件夹后，选择qt-opensource-windows-x86-x.x.x.exe下载）

1.新建一个专门用来练习Qt的文件夹；

2.在刚刚创建的文件夹中，新建这次的项目文件夹scratchpad；

3.在scratchpad文件夹中，创建文本文件scratchpad.pro，并打开（默认用Qt Creator打开了）。这个文件就是Qt的工程文件，在你获取到别人做的Qt工程时，也是通过打开这个.pro文件来进入工程（pro就是指project）；

4.单击Configure Project之后，Qt Creator会自动关闭，然后就可以看到scratchpad文件夹下多了个scratchpad.pro.user，这实际上是个包含工程各种配置信息的XML文件，如果你删除了这个文件再打开scratchpad.pro的话，又会重复刚才的操作；

5.在scratchpad文件夹下继续新建三个文本文件：main.cpp、main.qml、qml.qrc，然后再次打开scratchpad.pro文件；

6.我们的.pro文件是被一个叫qmake的工具进行解释的。在刚才打开的Qt Creator中打开scratchpad.pro进行编辑：

TEMPLATE = app

QT += qml quick

CONFIG += c++14
SOURCES += main.cpp
RESOURCES += qml.qrc

下面来解释这段代码的含义：

TEMPLATE变量告诉qmake这个工程的类型，在本例，这是个可执行的应用程序，用app来代表。其他的值比如lib表示的是二进制库，subdirs表示多项目解决方案中的一个；

Qt可以看作是一个模块化框架，我们可以按照实际需求向其中添加需要的部分。QT指出了我们想用的Qt模块，Qt的核心模块和gui模块已经默认被包含到项目中了；

CONFIG用来添加项目配置和编译器选项。在本例中，我们指出我们想使用C++14的特性；

SOURCE用来添加我们想包含到工程里的.cpp文件，在这里添加的是main.cpp，不过目前这个文件还是空的，以后main函数就写在这里。而且以后还会多写一个HEADERS用来指出我们要使用的头文件；

RESOURCES指出了所有要包含进工程的.qrc资源文件(resources collection files)，这种文件用来管理我们工程用到的各种资源文件，比如图片、字体、qml文件等。

写好了这些之后，按快捷键Ctrl+S保存会自动调用qmake解释这个.pro文件。然后就可以在左上角的项目面板中看到了我们刚才添加的.cpp文件和.qrc文件。

7.接下来双击main.cpp来编辑我们的源文件：

#include <QGuiApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);
    QQmlApplicationEngine engine;
    
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    
    return app.exec();
}

以上写的这些代码是创建了QtGUIApplition对象的一个实例，然后让它去加载我们的main.qml文件。这段代码看起来巨简单（觉得不简单的可以了解一下MFC的代码），因为Qt框架已经为我们做好了那些复杂层级的操作，而且不用担心平台问题，也不用操作窗口句柄或者OpenGL。

值得一提的是，我们可以通过【点击代码中的Qt类名（属性和方法也可以），然后按F1】来查看该类的官方说明。

8.接下来需要编辑的文件是qml.qrc，在Qt Creator中右键点击该文件，然后选择Open with中的Plain Text Editor，然后输入以下代码：

<RCC>
    <qresource prefix="/">
        <file>main.qml</file>
    </qresource>
</RCC>

然后回到main.cpp，注意这一段：qrc:/main.qml，这个qrc:/main.qml的意思就是“在qrc文件中找到这个在/目录下，名字叫main.qml的文件”。这里解释一下为什么要在qrc文件中找qml文件，我们可以把.qrc文件看成是一个简单的文件管理器，这里面保存着所有我们工程需要用到的资源文件，而这些资源文件和我们操作系统中的资源文件是一一对应的，看上面写好的.qrc文件里，包含在<qresource>标签中的main.qml就是我们目前声明要用到的唯一的资源文件了。注意，在这里因为.qml文件和.qrc文件处在同一目录下，而如果这个.qml文件在同级的一个叫views的文件夹下的话，main.cpp的相应部分就应该写成这样了：

engine.load(QUrl(QStringLiteral("qrc:/views/main.qml")));

而在.qrc文件中则应该写成这样：

<file>views/main.qml</file>

9.保存了这些文件后，就会在项目面板中的qml.qrc下看到main.qml了：

双击打开并编辑main.qml：

import QtQuick 2.9
import QtQuick.Window 2.3

Window {
    visible: true
    width: 1024
    height: 768
    title: qsTr("Scratchpad")
    color: "#ffffff"

    Text {
        id: message
        anchors.centerIn: parent
        font.pixelSize: 44
        text: qsTr("Hello Qt Scratchpad!")
        color: "#008000"
    }
}

 这个文件指出了应用程序启动时，呈现给用户的视觉样式。

这里的import语句类似于C++的#import语句，只是它引用的是整个模块而不是什么头文件。在本例中，我们想通过这个QtQuick模块获取所有QML支持的类型，通过QtQuick的子模块Window获取控制Window组件的权限。模块的版本号可以在Qt的官方文档中查看到。

Window模块可以让我们获取到整个窗口，所有组件的渲染都是在窗口中进行的。在本例中，我们设置了窗口的尺寸为1024×768像素，名称为“Scratchpad”，背景色为RGB表示的白色。

我们还在Text组件中添加了欢迎信息，并把这个欢迎信息居中、设置字体大小和颜色。

10.编译和运行我们的工程。先单击IDE左下角的小电视选择要使用的工具包和编译配置

然后右击项目面板上的工程名， 点选“执行qmake”

最后单击左下角的绿色三角运行：