1. 创建第一个QML界面

任务目标

创建一个最小可运行的Qt Quick QML界面，在窗口中显示文本“Hello, Qt Quick!”。通过该案例验证Qt开发环境可用，并掌握QML应用的基本结构。

环境要求

• Qt 5.15+ 或 Qt 6.x（含Qt Quick模块）
• 支持C++11的编译器（MSVC、GCC或Clang）
• CMake 3.16+ 或 qmake

完整实现

创建两个文件：main.cpp（C++入口）和 main.qml（界面定义）。这是Qt Quick应用的最小闭环。

// 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")));
    if (engine.rootObjects().isEmpty())
        return -1;
    return app.exec();
}

// main.qml
import QtQuick

Window {
    width: 400
    height: 300
    visible: true
    title: qsTr("第一个QML界面")

    Text {
        anchors.centerIn: parent
        text: "Hello, Qt Quick!"
        font.pixelSize: 24
        color: "#2c3e50"
    }
}

若使用Qt 5，将 import QtQuick 改为 import QtQuick 2.15 即可。

工程配置与运行

方式一：CMake（推荐）

# CMakeLists.txt
cmake_minimum_required(VERSION 3.16)
project(HelloQtQuick)

set(CMAKE_CXX_STANDARD 11)
set(CMAKE_AUTOMOC ON)

find_package(Qt6 REQUIRED COMPONENTS Quick)
# Qt5 改为: find_package(Qt5 REQUIRED COMPONENTS Quick)

qt_add_executable(appHello main.cpp)
qt_add_qml_module(appHello URI HelloQtQuick VERSION 1.0 QML_FILES main.qml)
target_link_libraries(appHello PRIVATE Qt6::Quick)

构建与运行：

mkdir build && cd build
cmake ..
cmake --build .
./appHello   # Windows 下为 appHello.exe

方式二：qmake

# HelloQtQuick.pro
QT += quick
SOURCES += main.cpp
RESOURCES += qml.qrc

其中 qml.qrc 需将 main.qml 注册为资源：

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

运行：qmake && make（或 nmake）&& ./HelloQtQuick

验证方法

• 程序启动后弹出400×300窗口，标题栏显示“第一个QML界面”。
• 窗口中央显示深灰色文本“Hello, Qt Quick!”，字号24像素。
• 窗口可正常关闭，进程退出码为0。

满足以上三点即判定案例通过。

常见问题

• 窗口一闪而过：检查 engine.rootObjects().isEmpty() 是否返回true，通常是QML文件路径错误或模块导入失败。
• Qt5/Qt6导入差异：Qt6直接使用 import QtQuick；Qt5需指定版本号 import QtQuick 2.15。
• CMake找不到Qt：确认 CMAKE_PREFIX_PATH 指向Qt安装目录。