QtCreator和QtDesignStudio最佳实践

一、QTC和QDS工作流概述

很多初学者对 QDS(Qt Design Studio) 和 QTC(Qt Creator)如何配合经常存有疑问，本文介绍具体的工作流程。

工作流程

1.产品设计：通过PS、Figma、XD等专业工具设计页面视觉和原型。
2.QDS 原型制作：导入设计源文件、制作控件、页面和原型设计，并且定义所须的后端接口。
3.QTC 后端实现：平替QDS声明的后端接口，用代码实现实际的逻辑。

人员职责

• 设计人员：
  • 使用QDS导入素材，生成前端QML页面。
  • 提交后端接口需求，经确认声明所需的后端属性。
  • 页面绑定后端接口，完成原型，并且可演示原型效果。
  • 导出 CMakeLists
• 开发人员：
  • 打开工程，根据沟通的后端属性进行逻辑实现。
  • 发布安装包，测试运行。

如下图蓝色部分是QDS负责完成，绿色部分是QTC负责完成。设计师完成前端UI和后端的接口定义。工程师则只需要集成前端UI并实现真实的逻辑后端即可。两者接口一致。

二、产品设计

使用三方的设计工具设计软件视觉效果。

三、QDS原型制作

通过QDS提供的Bridge插件，导入素材，直接生成QML代码。工程结构如下：

进一步制作页面原型，做好每个页面。并且自定义一个Backend模块，用来模拟后端提供的接口。里面声明好依赖的属性。这个模块为了支持原型演示，因为没有真实的逻辑。

使用后端提供的属性。

四、QTC后端实现

点击 QDS的导出 CMake文件，生成CMake后，使用QTC打开工程。
开发 Backend模块，根据前端指定的接口，进行实现。最终用真实的逻辑代码完成接口实现。最终完成Backend模块平替。这是包含真实逻辑的后端模块，在程序运行的时候会真正的加载此模块。

五、QDS常见问题

QDS点击工程运行，没有任何反应？

通常是qml中引入了不存在的模块或找不到的模块。点击View->Views->Output。打开输出窗口。然后再点击VIew->Output->应用程序输出。观察输出日志，检查运行时的错误。

QDS版本选择？

QDS不同版本内置的Qt版本不同，而且不能随意添加Qt kits版本。所以要根据开发者使用的Qt版本来确定应该使用的QDS版本。否则QDS里Qt的版本过高，导致开发者的环境不支持。比如开发工程师选了Qt 5.15.15开发，而设计师用的QDS带的Qt版本是6.5。

推荐关注

欢迎关注《每周Qt》，学习最新的Qt知识。