在CLion中开发QML

图片来源: Rabbit - v1.4 Showcase

在CLion中开发QML需要正确配置Qt环境和CMake文件，以支持QML语法和Qt Quick功能。以下是详细的步骤指导：

安装和准备工作#

安装CLion 确保安装最新版本的CLion。
安装Qt库从Qt官网下载并安装Qt库。选择与开发环境匹配的编译器（如MSVC或MinGW）。记下Qt安装路径（如D:/Qt/6.6.2/msvc2019_64）。
启用QML支持在CLion中，进入 Settings | Languages & Frameworks | QML。勾选 Enable QML language server 以启用QML语法检查和代码补全。

配置CMakeLists.txt#

在项目根目录下创建或编辑 CMakeLists.txt 文件，添加以下内容：

1
cmake_minimum_required(VERSION 3.26)
2
project(MyQmlApp)
3

4
set(CMAKE_CXX_STANDARD 17)
5
set(CMAKE_AUTOMOC ON)
6
set(CMAKE_AUTORCC ON)
7
set(CMAKE_PREFIX_PATH "D:/Qt/6.6.2/msvc2019_64") # 替换为你的Qt路径
8

9
find_package(Qt6 COMPONENTS Core Qml Quick REQUIRED)
10

11
add_executable(${PROJECT_NAME} main.cpp resources.qrc)
12
target_link_libraries(${PROJECT_NAME} Qt6::Core Qt6::Qml Qt6::Quick)

配置QML文件路径#

set(QML_DIR "${CMAKE_CURRENT_SOURCE_DIR}/qml" CACHE PATH "Path to Qml")

创建主程序#

在 main.cpp 中初始化QML引擎并加载主界面：

1
#include <QGuiApplication>
2
#include <QQmlApplicationEngine>
3

4
int main(int argc, char *argv[]) {
5
QGuiApplication app(argc, argv);
6
QQmlApplicationEngine engine;
7

8
const QUrl url(QStringLiteral("qrc:/qml/Main.qml"));
9
QObject::connect(&engine, &QQmlApplicationEngine::objectCreationFailed,
10
&app, []() { QCoreApplication::exit(-1); }, Qt::QueuedConnection);
11
engine.load(url);
12

13
return app.exec();
14
}

添加资源文件#

创建 resources.qrc 文件，定义QML文件路径：

1
<RCC>
2
<qresource prefix="/">
3
<file>qml/Main.qml</file>
4
</qresource>
5
</RCC>

在项目目录中创建 qml/Main.qml 文件，编写简单的界面：

1
import QtQuick 2.15
2
import QtQuick.Controls 2.15
3

4
ApplicationWindow {
5
    visible: true
6
    width: 640
7
    height: 480
8
    title: "Hello QML"
9

10
    Button {
11
        text: "Click Me"
12
        anchors.centerIn: parent
13
        onClicked: console.log("Button clicked!")
14
    }
15
}

在CLion运行配置中添加PATH环境变量#

这是最适合开发阶段的解决方案，不需要每次编译后手动复制文件。

在CLion中，点击右上角的运行配置下拉菜单，选择 “Edit Configurations…”

在打开的对话框中，找到 “Environment variables” 字段

添加以下内容（请确认你的Qt路径是否正确）：

text PATH=D:\Qt\6.6.2\msvc2019_64\bin;${PATH} 点击 “OK” 保存

重新点击 Run 按钮运行程序

这样设置后，CLion在运行你的程序时会临时将Qt的bin目录添加到PATH中，程序就能找到所需的DLL了。

使用windeployqt自动部署DLL#

果你想生成一个可以独立运行的程序（不依赖CLion），可以使用Qt官方提供的部署工具。

打开Qt自带的命令行工具（重要！）：

在Windows开始菜单中找到 “Qt 6.6.2 (MSVC 2019 64-bit)” 并打开

这个命令行已经配置好了Qt的相关环境变量

切换到你的构建输出目录（包含.exe的文件夹）：

1
cd D:\path\to\your\project\build\Debug

运行windeployqt命令（注意指定QML路径）：

1
windeployqt --qmldir D:\path\to\your\project\qml MyQmlApp.exe

例如：

1
windeployqt --qmldir D:\MyQmlApp\qml MyQmlApp.exe

运行后，所有需要的DLL和QML模块都会被复制到exe所在目录。之后你就可以直接从文件管理器双击运行程序了。