Qt 文档

概念

以下是一些有助于理解 QML Live 的概念。

实时重载

在典型的用户界面（UI）设计阶段，设计师创建了大量的图形文件来描述他们理想的 UI。将这些图形愿景转移到可以运行的源代码是一项具有挑战性和耗时的工作。

此任务还涉及到设计师和开发者之间的妥协。有时，设计师的愿景无法完全通过底层技术来复制。因此，这个任务需要很多次迭代才能达到最佳解决方案。

需要大量的耗时编辑工作，以达到一个既满足设计师的愿景又使开发者能够在代码中实现它妥协。每次迭代都是朝着期望的用户体验目标迈出的小小一步。Qt，通过 Qt Quick 技术，已经通过 QML（一种更注重设计的语言）缩短了愿景与产品之间的差距。QML Live 旨在关闭这个差距。

QML Live 支持以下两个基本功能进行实时编码

允许您分发源代码修改，无需重新部署应用程序来查看更改的效果。QML Live 监视文件系统中的更改。只要您保存文件，它就会按需预处理，并刷新实时视图。
加载所需组件的特定 QML 文件而不是主组件，因此每个组件都可以独立工作。

每次代码更改后，QML Live 都在几秒钟内重新加载每台连接的设备上的项目。

QML Live Bench 与 QML Live Runtime 的对比

QML Live 由一个中央 Bench 管理，它监视项目的工作区。工作区内的文件更改会自动检测并立即反映到一个或多个本地区域或连接的远程客户端。一个团队可以在一台机器上快速而精确地开发界面，并同时将它显示在一个或多个本地和/或远程客户端上。这些客户端可以运行在任何支持 Qt5 和 QML Live 的桌面或网络嵌入式设备上。

对于草案或独立 UI 元素的制作，QML Live Bench 就足够了；您可以在本地计算机上看到实时预览。

功能	描述
QML Live Bench	一个 GUI 服务器应用程序，为每个本地或远程客户端提供工作区更新的填充。
QML Live Runtime	一个客户端应用程序，它监听 QML Live Bench 的工作区更新。

如果开发的应用程序应该运行在任何嵌入式设备或具有不同显示分辨率的设备上，那么必须在每个嵌入式设备上启动 QML Live Runtime。但是，您只需要在开发机器上启动 QML Live Bench。

QML Live Bench 支持以下功能

实时重载 main.qml 文件或选定的组件
监视工作区以获取更新
提供图形用户界面，用于设置工作区或项目设置、配置主机连接、导入路径等
将每个文件更改发布到嵌入式设备上的所有本地和远程 QML Live 运行时
允许用户在不同连接的设备上为特定的 QML Live 运行时实例选择不同的要监视的文件
在连接的设备上跟随当前监视的文件
从所有连接的 QML Live 运行时捕获日志消息，以实现更方便的调试过程
通过工作区导航器让用户选择要监视的文件
控制对所有设备的连接
允许用户通过平行的窗口预览活动文件之外的几个组件或文件

QML Live 运行时支持以下功能

实时重载 main.qml 文件或选定的组件
监听来自 QML Live Bench 的工作区更新

本地会话

对于本地会话，您只需要 QML Live Bench。它包含所有必要组件，并具有易于使用的界面。您输入和保存时，输出将在您机器上瞬间显示。本地会话最适合多显示器设置，您可以在一个显示上看到代码，在另一个显示上看到更改的实时结果。此用例非常适合绘制场景或对动画行为进行最后的润色。本地会话也鼓励您以元素为导向思考；您不必开发整个场景，而可以将其分解成更小的元素。您可以在这些小元素上工作，并看到它们作为独立元素或在更大场景中嵌入时的外观。

远程会话

在机器显示上渲染的场景很少与嵌入式设备的目标显示看起来相同。在颜色外观、像素密度、字体渲染和比例上都有微妙的差异。因此，确保在机器上设计的用户体验与嵌入式设备上看起来一致至关重要。过去，这通常是一个繁琐的过程，需要您将代码复制到嵌入式设备上，并重新启动应用程序。有了 QML Live Bench 和 QML Live 运行时，您可以连接到设备，传播您的 workspace，并且从这个地方开始，所有更改都会反映在设备显示上。您始终可以连接更多设备，或不同尺寸的设备。

创建您自己的 QML Live 运行时

某些项目包含自定义 C++ 或本地代码。这些语言需要编译步骤，无法直接使用 QML Live 重新加载。在这种情况下，您可以根据 QML Live 库开发自己的 QML Live 运行时。有关更多详细信息，请参阅自定义运行时。

为实时编码结构化 QML 应用程序

随着时间的推移，在 QML 中开发应用程序可能会变得复杂，尤其是如果元素如何隔离不清楚；这也适用于设计 UI。要将设计师的愿景转化为开发人员的代码，需要将愿景分解为 UI 元素，例如display、screen、panel、component和fragment。

+- Display
  |
  +- Panel
  |
  +- Screen
     |
     +- Panel
        |
        +- Component
           |
           +- Fragment

这些元素从大 UI 元素到较小的实体和内部结构，形成了一个层次结构。这种层次结构的最大好处是，它使设计和开发团队能够与客户共享一个共同的词汇表，并确保产品的设计始终与这个共同定义保持一致。

以下是对这些元素的定义

Display - 包含一组屏幕或面板的根元素，其中每个屏幕覆盖整个物理显示。
Screen - 由设计团队定义的多个面板组成，提供了视觉结构。
Panel - 每个面板由一组组件组成。
Components - 包含片段的可重用 UI 元素。
Fragments - 一个内部结构 UI 元素，不向 UI 开发人员公开。

设计用户界面需要了解初始显示布局、屏幕导航结构，以及单个屏幕和它们的面板结构。还需要定义一组通用的组件供面板内部使用；然而，片段是针对特定实现的。