Qt Design Studio使用场景

使用场景

创建UI线框图

合理规划UI。了解使用者需要哪些元素，比如屏幕、组件和状态。在使用者开始让创建UI的过程更有效率之前，创建一个描述性的线框图，并获得一个详细的UI规范。Qt Design Studio可以让使用者把他的UI概念变成一个线框图，它具有可伸缩的布局，所有的屏幕和控件都在合适的位置。在继续原型开发阶段之前，使用者可以向开发人员和其他涉众展示线框图以供讨论、审查和批准。

在Qt Design Studio中，围绕组件的行为以及它们如何相互连接来构建ui。使用者可以使用Library视图中可用的预置组件，或者将它们组合起来创建自己的组件。可以为组件的属性指定值，以更改其外观和行为。所有组件都有一组预定义的属性，其中一些属性控制用户可见的内容，而另一些则在幕后使用。

使用者可以将预置组件从Library视图拖放到Form Editor、3D Editor或Navigator视图中，以创建它们的实例。然后，使用者可以通过在properties视图中修改实例的属性来根据自己的喜好更改实例。应用程序代码将相应地生成。

• 设计应用程序流程 使用者可以以原理图的形式设计应用程序，该原理图通过符号显示应用程序UI的所有重要组件及其相互之间的连接。这将产生一个交互式原型，可以单击它来模拟应用程序的用户体验。
• 组件 Qt Design Studio提供了预置组件，使用者可以通过创建它们的实例在线框图和原型中使用它们。要构建自己的组件，可以修改组件实例的属性并组合它们。可以从其他工具中导入设计和资源作为组件。
• 指定组件属性 为组件的属性指定值来改变它的外观和行为。所有组件都有一组预定义的属性。一些属性，如位置、大小和可见性，对所有组件都是通用的，而其他属性则特定于组件。使用者可以在properties视图中为组件实例的属性指定值。
• 可伸缩布局 组件在UI中的位置可以是绝对的，也可以是相对于其他组件的。虽然手动定位对于静态UI是有效的，但请考虑其他可用的方法，例如用于动态UI的锚、布局、定位器和属性绑定。
• 注释设计 通过注释设计，为审查人员或开发人员提供关于它们的额外信息。

创建用户界面原型

在你的UI线框图通过审核后，可以把它变成一个交互原型，以确保你和开发人员对UI外观和功能有共同的看法。使用者可以创建UI逻辑来模拟复杂的体验并添加动态行为。然后可以在桌面、嵌入式和移动设备平台上验证自己的设计。在原型创建阶段，还可以从2D和3D内容创建工具中导入资产，使创作的原型更接近最终的UI。

• 创建UI逻辑 使用者可以通过添加逻辑将线框变成一个交互原型，使组件能够应用动作或对后端系统的模拟数据做出反应，以模拟复杂的体验。
• 模拟复杂的体验 使用者可以将ui连接到来自不同来源的不同形式的数据，例如基于qml的数据模型、JavaScript文件和后端服务。也可以将UI连接到Simulink来加载来自Simulink模拟的实时数据。
• 动态行为 可以在组件之间创建连接，使它们能够相互通信。组件属性值或UI状态的变化可以触发连接。
• 使用目标硬件进行验证 使用者可以使用实时预览功能在桌面上预览UI文件或整个UI，也可以在Android和嵌入式Linux设备上预览。所有对UI所做的更改在预览中立即可见。
• 使用其他工具创建资源 描述如何将包含2D和3D资产的设计导出到可以导入Qt Design Studio中的项目的文件中，如何导入它们，以及如何将它们从Qt Design Studio导出回元数据格式。

融合2D和3D资源

通常，作为设计师会使用图像和设计工具(如Adobe Photoshop、Sketch、Figma、Blender或Maya)设计一个UI，然后将设计发送给开发人员实现。使用者可以使用Qt Bridge导出工具将2D资源转换为Qt Design Studio支持的元数据格式。使用者可以使用3D图形工具的导出功能，以可导入Qt Design Studio的格式保存3D资源。

在向开发人员提交UI以向应用程序添加功能之前，使用者可以将2D和3D资产导入Qt Design Studio进行编辑。

如果想对设计工具中的组件做进一步的更改，可以将UI文件导出回元数据格式，然后使用者可以使用Qt Bridge将其导入回设计工具。例如，你可以在设计工具中创建组件，并在开始创建它们的实例之前将它们导出到Qt design Studio。在Qt Design Studio中，也可以向组件添加功能，例如按钮状态，然后将它们作为资源返回到设计工具。如果你在设计工具中使用功能性的Qt Design Studio组件，你会发现合并新的迭代器会更容易.

下图描述了在Adobe Photoshop和Qt Design Studio中使用Qt Bridge的工作流程:

工作流程包括以下步骤:

1. 将设计工具中的设计导出为元数据格式。
2. 在Qt Design Studio中创建一个项目，并将元数据文件导入其中。
3. 编辑导入的组件，并在表单编辑器和3D编辑器中创建更多的组件。
4. 在过渡编辑器或时间线和曲线编辑器中将自己的设计制作成动画。
5. 在状态和连接视图中创建交互。
6. 在桌面、移动设备或嵌入式设备上实时预览自己的设计。
7. 可以选择将组件导出为元数据格式，以便使用Qt Bridge将其导入到设计工具中。使用者可以继续以这种方式迭代自己的设计，直到它准备好。

与开发人员的配合

Qt Design Studio尝试满足使用者的需求，无论使用者是否有使用QML和编码的经验。当使用者安装Qt Design Studio时，默认配置允许使用者开始绘制线框图、原型和验证ui。使用者可以使用Text Editor视图来编辑组件文件(.qml)。如果使用者使用JavaScript，可以调试和配置自己的ui，以发现和修复其中的问题。

• 开发者工作流 在Qt Design Studio项目中，使用者处理UI文件(.ui.qml)，而开发人员在Qt Creator中处理.qml和c++源文件，以创建可以在目标硬件上构建和运行的应用程序。
• 编码 使用者可以使用文本编辑器视图中的代码编辑器或在Edit模式中修改QML代码。代码编辑器将QML语言理解为代码，而不仅仅是纯文本。这使它能够为使用者提供有用的特性，例如语义高亮显示、检查代码语法、代码完成和重构操作。
• 调试和分析工具 Qt Design Studio提供了一个JavaScript调试器。在Debug模式中，使用者可以在调试时检查UI的状态。

设备上可用的内存和CPU功率是有限的，应该谨慎使用。QML分析器使使用者能够分析Qt Quick UIs。