网络研讨会演示

网络研讨会演示 包含了 利用 Qt 设计工作室从 Photoshop 到原型 网络研讨会的水源文件，该网络研讨会演示了如何将 Adobe Photoshop 中的设计导出至 Qt 设计工作室并对其进行编辑以创建 UI。

以下各节描述了网络研讨会的一些主要内容。选择教程标签可以观看网络研讨会视频，获取全部细节。

从 Adobe Photoshop 导出

我们使用 Adobe Photoshop 进行应用设计，并使用 Qt 桥接器将我们的设计导出为 Qt 设计工作室的 PNG 图像和自定义组件。

在我们开始之前，必须根据 从 Adobe Photoshop 导出设计 中的说明设置 Qt 桥接器。

我们根据 组织资产 中的说明在 Photoshop 中组织我们的设计。

Qt 桥接器自动为所有组和分层提出标识符。这些标识符将作为 Qt 设计工作室中的文件名。我们想在 ID 字段中更改其中一些，以便我们可以在 Qt 设计工作室中轻松找到它们。我们必须牢记，这些标识符必须是唯一的，必须以小写字母或下划线字符开头，并且只允许字母、数字和下划线字符。

每个画布将被自动导出为一个组件。也就是说，一个包含画布上所有艺术作品的单独文件。我们确定每个组或分层是作为组件还是作为子项导出。子项将导出为 PNG 文件，并在包含它们的组件文件中对其引用。

我们可以将某些组件导出为提供我们所需功能的组件。要在 Qt 设计工作室中使用组件，我们需要添加导入语句来引入包含组件的模块。我们甚至可以为导出的组件指定属性，这样我们就不需要在 Qt 设计工作室中这么做了。

创建参考图像

我们希望创建一个无功能但显示所有UI控件（如我们在Adobe Photoshop中设计的那样）的参考图像。我们将在其他画布上单独设计在layoutReference上可见的所有控件，因此可以在导出为字段中选择合并，以便在导出此画布时将它们合并成一个图像。

创建UI主页面

我们希望使用backgroundGradient画布作为UI的主页面。最初，它将包含一个渐变图像，我们将在Qt Design Studio上基于此图像构建UI。

我们在画布上设置渐变图像，将其在导出为字段中设置为子项，以将其导出为PNG文件，该文件在主页面中引用。

使用堆叠布局

对于stackLayoutFrame层，我们希望使用StackLayout组件，它提供了一次只能看到一个项目的项目堆栈。在组件字段中，我们输入StackLayout。

为了能够使用此组件，我们在导入字段中输入导入Qt Quick Layouts模块的语句，该模块包含组件：QtQuick.Layouts 1.3。

我们将使用Qt Design Studio在堆叠布局中添加内容。

使用Qt Studio效果

我们希望将快速模糊效果应用于UI控制smallPopup。在画布上，我们有一个blurEffect层，我们希望将其导出为FastBlurItem组件。在组件字段中，我们输入FastBlurItem。

为了能够使用组件，我们添加了导入Qt Quick Studio Effects模块的语句：QtQuick.Studio.Effects 1.0。

我们指定了我们想要应用效果的组件是效果的子项。然后我们指定效果的半径属性，在属性字段中。我们可以在Qt Design Studio中通过打开SmallPopup.ui.qml文件并选择导航器中的Fast Blur Item组件实例来修改属性。我们可以在属性 > 几何图形- 2D > 半径中找到该属性。

创建带有可重复使用按钮的菜单

miniMenu画布包含我们将用于在UI中切换弹出对话框的菜单按钮。我们希望能够重复使用这些按钮并根据它们是开启还是关闭来更改它们的外观。因此，对于每个按钮，我们在导出为字段中选择组件，以便将它们导出为可以单独在Qt Design Studio中修改的单独组件。

在画布内部，我们将每个图标导出为子项，将背景导出为合并。这合并了背景画布，同时保持图标单独，因此我们可以根据按钮的状态切换图标。我们将在这个Qt Design Studio中实现此功能。

准备动画

我们希望在Qt Design Studio中动画化largePopup画布的内容，因此我们将每个组和图层作为子项导出。

导出我们的设计

当我们将所有画布、组和图层都设置完之后，选择 导出，以便将资产和元数据复制到指定的导出路径。

导入我们的设计

在Adobe Photoshop中用Qt桥接导出我们的设计后，根据导入设计的说明，将其导入我们在Qt Design Studio中创建的项目。

如果我们以后需要在Photoshop中修改并重新导出设计，Qt Design Studio将在导入时尝试合并我们的更改，以确保我们之前在Qt Design Studio中做出的所有更改都不会丢失。

使用导入组件

LayoutReference.ui.qml 文件包含了我们将要创建的用户界面的参考图像。我们使用导入的组件在 MainApp.ui.qml 文件中创建用户界面。导入的组件列在 组件 > 我的组件 中，我们可以将它们拖放到 2D 视图中。

要查看特定组件的结构，我们可以右键单击 2D 视图中的组件，并在上下文菜单中选择 进入组件。我们对组件所做的任何更改都会立即显示在包含此组件的所有其他组件中。

我们可以在 代码 视图中查看每个组件的代码。

现在我们可以使用状态和计时线来在用户界面中动画化组件。

动画组件

我们以 Design 模式打开 Largepopup.ui.qml 文件，向其中添加动画。在 状态 视图中，我们为弹出窗口添加 打开、打开、关闭 和 关闭 状态。

有关使用状态的更多信息，请参阅创建状态。

然后我们使用 计时线 视图添加从一种状态到另一种状态移动时运行的动画。

有关使用计时线的更多信息，请参阅创建计时线动画。