# Qt Creator配合Qt Design Studio

## 一、环境注意事项

1. 安装 `git` 软件  <https://git-scm.com/>
2. 安装 `visual studio enterprise` <https://visualstudio.microsoft.com/zh-hans/vs/enterprise/>
3. 实测版本：`Qt Creator 14.0.2 + Qt 6.8 + Qt Design Studio 4.1.1`&#x20;

## 二、如何使用 **Qt Creator** 打开 **Qt Design Studio** 创建的项目

### 示例背景

假设你在 **Qt Design Studio** 中创建了一个简单的 QML 项目，名称为 **"HRClient"**，该项目包含一个主界面 `main.qml` 和一个按钮组件 `Button.qml`。

1\. **在 Qt Design Studio 中创建项目**

**（1）创建一个新项目**

1. 打开 **Qt Design Studio**。
2. 点击 **File > New Project**。
3. 选择 **Qt Quick Application - Empty**。
4. 输入项目名称：`HRClient`。
5. 设置存放路径（例如 `D:/QtProjects/HRClient`）。
6. 点击 **Finish**，完成项目创建。

**（2）设计简单的界面**

* 在 `main.qml` 中添加一个按钮：

```
import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello Design Studio")

    Button {
        text: "Click Me"
        anchors.centerIn: parent
    }
}

```

* 保存项目（`Ctrl + S`）。

#### 2. **在 Qt Creator 中打开项目**

**（1）打开项目**

1. 启动 **Qt Creator**。
2. 点击 **File > Open File or Project**。
3. 找到 Design Studio 项目文件夹 `D:/QtProjects/HRClient`。
4. 选择 `.qmlproject` 文件（例如：`HRClient.qmlproject`）。
5. 点击 **Open**。

**（2）配置项目环境**

* 如果项目缺少配置文件，Qt Creator 会自动检测并询问是否添加支持，点击 **Configure Project**。
* 确保 Qt Creator 的目标环境（Qt 版本、工具链）与 Design Studio 使用的 Qt 版本一致。

**（3）运行项目**

1. 确保项目已经正确加载，`main.qml` 可以正常预览。
2. 点击运行按钮 ▶，启动项目。如果项目正常运行，会弹出一个窗口显示按钮界面。

#### 3. **扩展项目功能（可选）**

**（1）在 Qt Creator 中添加 C++ 支持**

如果需要将逻辑扩展为 C++ 项目，可以手动创建 `main.cpp` 文件：

1. 在 Qt Creator 的 **Projects** 面板右键单击项目，选择 **Add New**。
2. 选择 **C++ Source File**，命名为 `main.cpp`。
3. 添加以下内容：

```
#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();
}

```

4. 确保项目文件中包含必要的构建信息（如 `CMakeLists.txt` 或 `.pro` 文件）。

   **（2）生成构建文件**

   如果项目没有构建文件，可以选择：

   * 使用 `qmake`：生成 `.pro` 文件。
   * 使用 `CMake`：创建 `CMakeLists.txt` 文件。

#### 4. **验证设计文件在 Qt Creator 中是否可用**

1. 确保 `main.qml` 中的设计和逻辑没有问题。
2. 如果界面需要调整，可以返回 Qt Design Studio，修改 `.qml` 文件，保存后重新加载到 Qt Creator 中运行。


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://peiyafei.gitbook.io/qt/chang-yong-zhi-shi-dian-zong-jie/qt-creator-pei-he-qt-design-studio.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.