Qt Design Studio

Qt Design Studio是一款UI设计和开发工具，它让设计师和开发者可以迅速设计原型，并且开发复杂的可伸缩的UI。简单概括其功能就是让UI设计转换为qml，为工程师所用。本文基本来自于官方文档，在此基础上新增了有指导意义的实操建议，建议关注那些细节。

最新消息

最新在2020年5月25日的更新，qt公司把Qt Design Studio Bridge的许可协议独立出来，卖300刀一年。而之前社区版的Qt Design Studio也有开放出来，意味着我们可以使用独立许可的插件，配合上社区版的Qt Design Studio就可以达到UI设计直接转换为qml的目的。这样的改进还是比较人性化的，300刀一年对一般小公司来说也可以承受了。注意重点，这300刀我还没花，哪位兄弟体验好了来给我分享分享，不胜感激。

安装Qt Design Studio

从https://www.qt.io/cn/ui-framework主页点击获取Qt Design studio，这里会提示输入一些必要信息以申请Qt Design studio的试用。目前Qt Design studio只提供给商业版本用户使用，对于普通用户可以通过这种方式申请到10天的试用时间。

然后可以直接下载Qt Design studio安装文件直接安装了，在安装过程中需要登录账户验证使用权限，商业版本的账户应该是可以之间进入的，而申请试用的用户只能等qt公司发来的允许试用的邮件。这里有个小技巧，建议申请时间选择上班非节假日时段，如果没有反馈可以尝试输入更准确的信息再次申请。试用用户在等到邮件回复后就可以通过验证安装Qt Design studio了。

从Adobe Photoshop导出设计

我们能够使用Qt Bridge for Adobe Photoshop ，导出Adobe Photoshop设计为.ui.qml文件。

如果您更愿意使用Adobe Illustrator创建图稿，则可以将资源作为智能对象复制粘贴到Adobe Photoshop。

为Adobe Photoshop搭建Qt Bridge工具

必须先安装并设置Qt Bridge for Adobe Photoshop导出工具，然后才能使用它将图稿转换为Qt Quick文件，就可以导入Qt Design Studio中的项目。

Qt Bridge for Adobe Photoshop是以一个Adobe拓展包（ZXP）交付的，需要 Adobe Photoshop version 19.1.1及以上才能安装。Qt Bridge for Adobe Photoshop的安装过程根据你是否使用ZXPInstaller工具，安装在Windows还是macOS都会不同。

使用ZXPInstaller工具进行安装

1. 下载并安装ZXPInstaller工具，下载地址https://zxpinstaller.com/
2. 启动ZXPInstaller工具
3. 把Qt Bridge for Adobe Photoshop ZXP包从Qt Design Studio安装目录的photoshop_bridge文件目录通拖放到ZXPInstaller
4. 按照安装程序的说明进行操作

没有ZXPInstaller进行安装

使能Photoshop的远程连接

1. 为Adobe Photoshop配置Qt Bridge。我们安装了当前最新版的Adobe Photoshop CC 2019中文版，这里界面组织和Qt官方文档使用的版本略有差别。
2. 一旦安装完成Qt Bridge安装完成，重启Adobe Photoshop使得Qt Bridge for Adobe Photoshop出现在窗口>拓展功能里
3. 选择**编辑>远程连接…**勾选启动远程连接，在密码栏输入密码，确定
4. Photoshop新建一个文档，启动Qt Bridge for Adobe Photoshop，然后选择其右上角的设置图标
5. 在密码栏输入刚刚在输入的远程连接密码，选择连接
6. 在Export Path组中，选择文件夹图片按钮指定Qt Bridge for Adobe Photoshop复制导出文件的位置
   
   成功创建连接后，即可使用Qt Bridge for Adobe Photoshop。

使用Qt Bridge for Adobe Photoshop

为了在使用Qt Bridge for Adobe Photoshop将设计从Photoshop导出到Qt Quick文件时获得最佳效果，您应该遵循使用Photoshop和组织资源的指导原则。

组织资源

要在使用Qt Bridge for Adobe Photoshop将设计从Adobe Photoshop导出到Qt Design Studio时获得最佳效果，请在使用Photoshop时遵循以下准则：

• 将您的艺术安排到画板中并将其组织成组和层，这些组和图层根据您在导出设计时所做的选择，作为单独的文件导入到Qt Design Studio中。
• 使用“Type”工具确保将所有文本标签导出到“Text”项。
• 以矢量格式存储所有资源，以便能够根据不同的屏幕尺寸和分辨率轻松地重新缩放它们。

如果您更愿意使用Adobe Illustrator创建图稿，则可以将资源作为智能对象复制粘贴到Adobe Photoshop。 然后，您可以双击Photoshop中的智能对象，在Illustrator中打开它们进行编辑。 由于您使用智能对象，因此所有更改都会传播到Photoshop中设计中使用的对象的所有实例。

要在Qt Design Studio中使用Photoshop中使用的字体，您需要将它们加载到Qt Design Studio。 当您预览UI时，Qt Design Studio会将它们部署到设备。 有关更多信息，请参阅使qt官方文档。

使用画板

从Adobe Photoshop导出设计并将其导入Qt Design Studio时，将保留画板上组和图层之间的关系。

当您使用Qt Bridge for Adobe Photoshop导出设计时，您将决定希望如何导出每个组或层：作为Component或Child。组件是可以包含其他资源的单个QML文件。子项是您可以在QML文件中使用的单个PNG文件。

如果您计划在UI中将作品的各个部分用作单独的图像，请将它们组合成单独的图层。然后，您可以将组作为Component导出，并将其中的每个层导出为Child。其中的子项作为单独的PNG文件导入Qt Design Studio，您可以将其用作图像资源。

要将画板的内容用作UI中的单个图像，可以在导出时合并组和图层。导入期间，内容被展平为一个PNG文件。合并的方式允许您更改Photoshop或Adobe Illustrator中的组和图层，然后再次导出和导入画板。例如，这是一种创建最终用户界面应如何显示的参考图像的简便方法。

将UI的不同部分（例如菜单和弹出窗口）放在单独的画板上，以便能够将它们导出为组件或子项，并将它们作为QML和PNG文件导入，在创建UI时，在Qt Design Studio Design 模式下您可以将它们拖放到工作区域。

导出资源

每个画板都作为组件自动导出。 也就是说，一个单独的QML文件包含画板上的所有艺术作品，除了设置为跳过或作为子项目导出的图层。 您可以决定如何导出画板中的每个组或图层：作为组件或子项。 此外，您可以将画板的组和图层合并为父项作为一个项目或完全跳过图层。

默认情况下，图层按如下方式导出：

• 第一级组图层将作为画板的子项导出。
• 第二级组图层合并到其父级。
• 资源图层将以合并的方式导出。
• 文本图层始终作为子项导出。

Qt Bridge for Adobe Photoshop自动为所有组和层建立标识符（QML IDs）。 这些ID将在Qt Design Studio中用作文件名。 您可以更改ID，以便在Qt Design Studio中轻松找到它们。 请记住，id必须是唯一的，并且必须遵循一些命名约定。

您可以使用默认设置导出资源，稍后在Qt Design Studio中进行所有更改。 如果您熟悉QML语法，则可以修改设置以在一定程度上定制生成的QML。 例如，您可以指定要用于组件或图层的QML类型或Studio组件。 如果您绘制了要设置动画的圆弧，则可以将其导出为Arc Studio组件，以避免在Qt Design Studio中使用Arc组件替换圆弧图像，或者您可以将按钮导出为Qt Quick Controls 2 Button类型。

同样，您可以指定要用于组或图层的效果，例如模糊效果。

Qt Design Studio支持的QML类型列在Qt Design Studio Design模式的库中的QML Types选项卡中。有关更多信息。

您还可以为QML类型的属性指定值，或者创建属性别名以从其他属性中获取值。

为导出资源指定设置

要使用Qt Bridge for Adobe Photoshop导出设计：

1. Qt Bridge for Adobe Photoshop会自动为所有组和层建议标识符，您可以在QML ID字段中更改他们。ID必须是唯一的，它们必须以小写字母或下划线开头，并且它们只能包含字母，数字和下划线字符。有关更多信息，请参阅id属性。

2. 在Export As字段中，选择组或图层的导出类型：

   • Component为选定画板、组及图层等创建单独的包含所有图稿的QML文件，除了设置为跳过或导出为子项目的图层除外。
   • Child为所选组或层的每个资源创建单独的PNG文件，并在qml文件中以引用图像的Image展开。此处不建议修改QML的类型一步到位，而是到Qt Designer Studio中修改，不然这会导致最终在Qt Designer Studio中打开没法预览效果，如我把一个引用了图像的Image在QML Type 字段改成了Button，会以为属性不对而不构成有效的qml文件。
   • Merged将选定的组和图层合并到父项作为一个item。
   • Skipped完全跳过所选的图层。

3. 在As Artboard字段，选择要重复使用的画板，在导出的qml文件中以指定的画板名对应的qml文件名展开当前设置的该资源，以达到复用控件的效果。例如，您可以使用画板定义一个组件（如Button），并在其他画板中重复使用。建议的使用方法为——使用一个资源占位并设置该资源为想复用的其他画板的资源（可以在原位置设计好资源，并拖到新建的画板中，原位置使用一个资源占位）。

4. 在QML Type字段，指定QML类型或Studio组件，以将此图层变形为它们。生成的组件将属于此类型。例如，如果绘制了一个矩形，则可以将其导出为Rectangle Studio组件。您可以在Add Imports字段中提供定义QML类型的模块import语句。

5. 在Add Imports字段中，输入其他导入语句以将其添加到生成的QML文件中。例如，要使用Qt Quick Controls 2.3，您需要导入语句QtQuick.Controls 2.3并使用Qt Studio Components 1.0，您需要导入语句QtQuick.Studio.Components 1.0。您还可以将模块导入为别名。

6. 在QML Properties字段中，指定QML类型的属性。您可以在Qt Design Studio中添加和修改属性。

7. 选中Clip Contents复选框以启用在图层生成的类型的裁剪。生成的类型将其自己的绘画以及其子节点绘制裁剪到其边界矩形。

8. 选中Create Alias 复选框，将从此图层生成的item导出为父组件中的别名。

9. 选择Export将资源拷贝到指定的导出路径。

10. 导出完成后，选择OK。

所有资源和元数据都将拷贝到您指定的目录中。 这可能需要一段时间，具体取决于项目的复杂程度。

您现在可以在Qt Design Studio中创建项目并将资源导入其中，如创建项目和导入设计中所述。

清理Qt Bridge for Adobe Photoshop相关元数据文件

Qt Bridge for Adobe Photoshop可以从活动文档中删除所有Qt Bridge for Adobe Photoshop相关元数据。 在Qt Bridge for Adobe Photoshop Settings对话框中，选择Sanitize Document以清理活动文档。 成功完成清理后，文档将不包含用于Adobe Photoshop相关元数据的Qt Bridge，而用于Adobe Photoshop图层设置的Qt Bridge将回退到默认值。

NOTE：清理在内存中完成，并且必须保存文档以保持清理后的状态。

有关更多信息，可以观看使用有关使用Qt Bridge for Adobe Photoshop的视频教程和网络研讨会，官方文档末有链接。

转换UI工程为应用

描述如何在qt应用开发中使用ps导出的qml文件及qt design studio设计后的qml文件，详细见Qt Design Studio帮助文档Converting UI Projects to Applications，如下：

应用

写这篇博文前，我们已经对工程使用该工具进行了比较充分的调研，欢迎大家交流。根据大家的反馈情况，如果有必要会考虑写一篇如何导出qml的操作手册及经验总结。