如何将Qt Design Studio项目导入到Qt Creator的Qt Quick QML应用中

前期准备 #

• 确认Qt Design Studio项目和目标Qt Quick QML应用使用的Qt大版本一致，避免QML语法、控件接口不兼容问题
• 提前备份Qt DS项目和目标Qt Quick项目的全部文件，防止操作失误丢失内容

第一步：迁移Qt DS项目核心文件 #

• 打开Qt DS Hello World项目的根目录，将以下完整目录/文件整体复制到目标Qt Quick QML应用的根目录下：
  • qml/ 目录：存储所有Qt DS中创建的QML页面、自定义控件、页面逻辑代码
  • content/ 目录：如果项目用到图片、音频、字体等静态资源，Qt DS默认会存在该目录下
  • imports/ 目录：包含Qt DS项目的自定义导入规则、控件注册配置
  • 项目根目录下后缀为 .qmlproject 的配置文件，后续需要参考它的参数配置

第二步：修改目标项目的构建配置 #

打开目标Qt Quick项目的构建配置文件，添加迁移过来的文件路径到项目扫描规则：

• 若使用qmake构建，在.pro文件中添加如下内容：

  RESOURCES += \
      qml/qml.qrc \
      content/content.qrc
  IMPORT_PATH += $$PWD/imports
  

• 若使用CMake构建，在CMakeLists.txt中添加如下内容：

  qt_add_resources(QT_RESOURCES
      qml/qml.qrc
      content/content.qrc
  )
  list(APPEND QML_IMPORT_PATH ${CMAKE_CURRENT_SOURCE_DIR}/imports)
  

第三步：调整QML入口加载逻辑 #

打开目标Qt Quick项目的主入口文件（通常是main.qml，或者main.cpp中绑定的加载QML路径），将Qt DS项目的入口接入现有项目：

• Qt DS项目的默认入口文件为 qml/Main.qml，你可以直接在现有项目的main.qml中引入并实例化，示例如下：

  import "imports"
  import "qml"
  
  Window {
      width: 640
      height: 480
      visible: true
      title: qsTr("Qt DS项目导入示例")
  
      // 实例化Qt DS的主页面
      Main {}
  }
  

第四步：修复兼容问题并验证 #

• 重新构建目标Qt Quick项目，如果出现找不到控件的报错，检查imports目录是否已正确加入QML导入路径
• 如果出现UI样式不匹配的问题，将Qt DS项目.qmlproject文件中声明的Qt Quick Controls样式配置，复制到目标项目的main.cpp中，示例如下：

  QQuickStyle::setStyle("QtQuick.Controls.Fusion");
  

• 构建成功后运行项目，确认Qt DS中设计的界面正常展示、交互逻辑无异常即可

内容的提问来源于stack exchange，提问作者taimoor1990