QT使用教程：如何从设计工具中导入Qt Bridge

---

Qt是目前最先进、最完整的跨平台C++开发工具。它不仅完全实现了一次编写，所有平台无差别运行，更提供了几乎所有开发过程中需要用到的工具。如今，Qt已被运用于超过70个行业、数千家企业，支持数百万设备及应用。

点击下载QT最新试用版

为了在使用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会将它们部署到设备上。有关更多信息，请参见使用自定义字体。

使用画板

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

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

如果您打算在UI中将作品的一部分用作单独的图像，请在画板上将它们作为单独的图层进行分组。然后，您可以将组导出为组件，并将其中的每个层导出为子级。子级将作为单独的PNG文件导入Qt Design Studio，您可以将其用作图像源。

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

将UI的不同部分（例如菜单和弹出窗口）放置在单独的画板上，以便能够将它们导出为组件或子代并将其导入为QML和PNG文件，您可以将其拖放到Qt Design中的“ 表单编辑器”中创建UI时使用Studio设计模式。

Qt Design Studio提供了预定义的UI控件集，您可以根据需要进行修改。您可以将自己的控件导出为QML类型，Qt快速控件或Studio组件。控件的位置和尺寸被保留。

但是，如果希望UI控件（如复选框）看起来像在Photoshop中一样，则必须在Artboard中创建控件，并在要创建控件实例的图层中使用Artboard。Qt Bridge将控件导出为可在Qt Design Studio中编程的自定义QML组件。

导出作品

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

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

• 一级组图层被导出为画板的子项。
• 二级组图层将合并到其父级。
• 作品层将作为合并导出。
• 文本层始终导出为子项。

Qt Bridge for Adobe Photoshop会自动为所有组和图层提议标识符（QML id）。这些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按钮类型。

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

在Qt Design Studio 设计模式下，“ 库”的“ QML类型”选项卡中列出了Qt Design Studio支持的QML类型。有关更多信息，请参见创建组件。

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

指定导出的设置

要使用Qt Bridge for Adobe Photoshop导出设计，请执行以下操作：

1. Qt Bridge for Adobe Photoshop会自动为您可以在QML ID字段中更改的所有组和图层建议标识符。ID必须是唯一的，它们必须以小写字母或下划线开头，并且只能包含字母，数字和下划线字符。有关更多信息，请参见id属性。
2. 在“ 导出为”字段中，选择组或图层的导出类型：
   • 组件为选定的画板，组或其中包含所有图稿的图层创建一个单独的QML文件，但被设置为跳过或导出为子项的图层除外。
   • 子级为选定组或图层的每个作品创建一个单独的PNG文件，并引用了组件文件中的图像。
   • 合并将选定的组和图层作为一项合并到父级中。
   • 跳过完全跳过选定的图层。

1. 在“ As Artboard”字段中，选择要重复使用的画板。例如，您可以使用画板定义一个组件（例如按钮），然后在其他画板上重用它。
2. 在“ QML类型”字段中，指定要将此层变形为的QML类型或Studio组件。生成的组件将属于这种类型。例如，如果绘制了矩形，则可以将其导出为Rectangle Studio组件。您可以提供在“ Add Imports”字段中定义了QML类型的模块的导入语句。
   
3. 在“ Add Imports”字段中，输入其他导入语句，再将其添加到生成的QML文件中。例如，要使用Qt Quick Controls 2.3，则需要import语句QtQuick.Controls 2.3，要使用Qt Studio Components 1.0，则需要import语句QtQuick.Studio.Components 1.0。您也可以将模块作为别名导入。
4. 在“ QML属性”字段中，指定QML类型的属性。您可以在Qt Design Studio中添加和修改属性。
5. 选中“ 剪辑内容”复选框以启用从图层生成的类型中的剪辑。生成的类型会将其自己的绘画以及其子代的绘画剪裁到其边界矩形。
6. 选中“ Create Alias”复选框，以将从该层生成的项目导出为父组件中的别名。
7. 选择“ Cascade properties”以将当前属性集应用于所选层的所有子级。
8. 选择导出将资产复制到指定的导出路径。
9. 导出完成后，选择确定。

所有资产和元数据都将复制到您指定的目录中。这可能需要一些时间，具体取决于项目的复杂性。

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

清理文件

Qt Bridge for Adobe Photoshop允许从活动文档中删除所有Qt Bridge for Adobe Photoshop相关的元数据。在“ Qt Bridge for Adobe Photoshop 设置”对话框中，选择“ 清理文档”以清理活动文档。清理成功后，文档将不包含用于Adobe Photoshop的Qt Bridge相关元数据，并且用于Adobe Photoshop的Qt Bridge图层设置将恢复为默认值。

注意：清理是在内存中完成的，必须保存文档以保持清理状态。

扩展Qt Bridge for Adobe Photoshop

您可以借助JSX脚本更改Qt Bridge for Adobe Photoshop的默认行为。可以在脚本中编写特定功能，这些功能由Qt Bridge for Adobe Photoshop调用，并带有有用的参数。

可覆盖的JSX函数

您可以在替代JSX中定义以下函数。

• preExport（document）在导出文档之前调用此函数。参数文档是PSD文档实例。此功能可用于在导出之前对文档进行临时更改。
• postExport（document）导出文档后调用此函数。参数文档是PSD文档实例。您可以撤消在功能preExport（...）中完成的临时更改。
• customDefaultQmlId（name，instance）调用此函数以设置图层的默认QML ID。返回的值用于QML id。返回Falsey改用自动生成的QML ID。参数名称是插件自动生成的QML ID，实例是PSD层实例。

注意：请参考Adobe Photoshop CC Javascript>脚本指南以了解对象模型以及Document和Layer>实例。

在“ Qt Bridge for Adobe Photoshop 设置”对话框中，选择“ 替代JSX脚本”以设置替代JSX脚本。