申徒嘉的专栏

为简单起见，我们使用2个矩形，半径设为宽度的一半(宽度与高度相同，这意味着它是一个正方形)。此外，这些状态切换可以有一个附加的过渡，它定义了这些变化应该如何动画化，或者应该应用的任何其他动作。状态通过状态名来标识，最简单的形式是由元素上的一系列属性更改组成。在状态中，只需要描述属性将如何从其默认状态更改(而不是从以前的状态更改)。使用鼠标区域触发状态变化，该区域覆盖整个交通灯，并在点击时在行进和停止状态之间切换。状态，其中每一种状态都将交通灯各自的颜色更改为红色或绿色。在go状态下，我们将颜色属性从。

动画本身是一个独立的动画，目标设置为box，并配置为持续时间为2秒的x属性动画。为此，可以使用分组动画。这指定了总动画持续时间的40%是向上动画，60%是向下动画，每个动画依次运行。例如，一个顺序动画可以有两个并行动画作为子动画，以此类推。例如，当一页纸滑出时，这页纸最初应该缓慢地滑出，然后获得动量，最终以高速滑出，类似于翻页一本书。每条缓动曲线都由一个可点击的图像显示，当点击时，将在方形动画上设置一个新的缓动类型，然后触发。在制作更复杂的动画时，有时需要在正在进行的动画中更改属性或运行脚本。

他为各种论文和博客撰写过文章，在许多会议上发表过文章，并就如何构建软件和软件组织提供建议。Jürgen 是 ApiGear 的首席执行官，这是一个协作机器界面设计工具，使团队能够协作设计软件界面与自动监控和模拟解决方案。他是 Pelagicore AG 的联合创始人，并且作为首席用户界面架构师负责 Daimler MBUX 的早期版本。他目前专注于API驱动的工作流，为不同平台设计和创建用户体验和底层服务之间的接口。你可以在领英、他的博客和他的主页找到更多关于约翰的信息。

Qt QML Book 翻译 目录

QML 提供了一种灵活的方法来使用锚来布局项目。锚定的概念是` Item `的基础，并且对所有可视化 QML 元素都可用。锚的作用就像一个契约，比相互竞争的几何变化更强大。锚是相对性的表达; 您总是需要一个相关的元素来锚定。

它可以横向运行，也可以从顶部到底部。当项被添加到流中时，将根据需要对它们进行包装，以形成新的行或列。通过设置rows和columns属性，可以约束行或列的数量。如前所述，JavaScript 是 QtQuick 的核心部分，因此，我们可以使用标准库。在下面的示例中，我们将使用这些助手来使源代码更加紧凑和可读。在最简单的情况下，模型只是一个提供循环数量的值。的例子中，我们使用了一些新的魔法。我们定义自己的 color Array 属性，它是一个颜色数组。属性是一个很好的实践，这样可以简化可读性并帮助工具。

圆圈在每次点击时递增 x 位置，盒子在每次点击时旋转。三角形将旋转和缩放的图像在每次点击，以演示一个组合变换。这带来了一个有用的经验法则——如果您已经复制了一段代码三次，那么将其提取到一个组件中。我们使用我们的可点击的图像呈现三个对象(框，圆，三角形)。每个对象在单击时执行一个简单的转换。通常，QML 项可以被平移、旋转和缩放。这些操作有一种简单的形式和一种更先进的方法。在您自己的工作中，当您看到一些栅格化的边缘在您的图形，那么您可能应该切换平滑。让我们从简单的转换开始。这是我们的场景作为我们的起点。

组件是可重用的元素。QML 提供了创建组件的不同方法。目前，我们只研究最简单的表单——基于文件的组件。基于文件的组件是通过在文件中放置一个 QML 元素并给文件一个元素名称(例如 Button.qml)来创建的。您可以像使用 Qt Quick 模块中的其他元素一样使用该组件。在我们的示例中，您可以在代码中将其用作 Button { ... }。

一种可能性是仅仅使用渐变旋转矩形，但是要注意旋转矩形的几何形状不会改变，因此会导致混淆，因为元素的几何形状与可见区域不同。通常，当您想要布局 Text 元素时，您需要区分对齐 Text 元素边界框中的文本和对齐元素边界框本身。目前，我们将集中在基本的视觉元素，如项目，矩形，文本，图像和鼠标区域。其思想是在每个处理程序实例中处理一个交互方面，而不是将来自给定源的所有事件的处理集中在单个元素中，这在以前是一种情况。请记住，这些基本属性在每个可视元素上都是可用的，并且在这些元素之间也是一样的。

QML 提供了一种称为“动态范围界定”的机制，其中稍后加载的文档会覆盖先前加载的文档中的元素 ID。元素是通过使用它们的元素名称来声明的，但是是通过使用它们的属性或创建自定义属性来定义的。对于图书内容，我们删除这个可选的版本号，正常情况下，您会自动从您选择的 Qt 工具包中选择可用的最新版本。QML: (binding)和 JavaScript = (assignment)之间的区别在于绑定是一个契约，并且在绑定的生命周期内保持为真，而 JavaScript 赋值(=)是一次性的值赋值。

Qt Creator 是 Qt 的默认集成开发环境。它是由 Qt 开发人员为 Qt 开发人员编写的。IDE 适用于所有主要的桌面平台，例如 Windows/Mac/Linux。我们已经看到客户在嵌入式设备上使用 Qt Creator。Qt Creator 有一个精益高效的用户界面，它真正闪耀在使开发人员的生产力。Qt Creator 可用于运行 Qt Quick 用户界面，也可用于编译 c + + 代码，这适用于您的主机系统或使用交叉编译器的其他设备。

本节是一个运行通过不同的应用程序类型，可以用 Qt6编写。它不局限于这里提供的选择，但它会让您更好地了解使用一般Qt 6可以实现的功能

为了测试您的安装，我们将创建一个小的 hello world 应用程序。请打开 Qt Creator 并创建一个 Qt Quick UI 项目(File ‣ New File or Project ‣ Other Project ‣ Qt Quick UI Prototype) ，并将项目命名为 HelloWorld。

本章将向您介绍如何使用 Qt6进行开发。我们将向您展示如何安装 Qt SDK，以及如何使用 Qt Creator IDE 创建和运行一个简单的 hello world 应用程序。

Qt Quick 是 Qt6中使用的用户界面技术的总称。它是在Qt 4引入的，现在扩展到Qt 6。Qt Quick 本身就是几种技术的集合:- QML-用于用户界面的标记语言- JavaScript-动态脚本语言- Qt C + +-高度可移植的增强型 c + + 库

Qt 6由大量模块组成。通常，模块是供开发人员使用的库。一些模块对于启用 Qt 的平台是必需的，并且形成了称为 Qt 基本模块的集合。其他模块是可选的，形成 Qt 附加组件模块。大多数开发人员可能不需要使用后者，但了解它们是有益的，因为它们为常见的挑战提供了宝贵的解决方案。

本书向您提供了使用新的 Qt6进行应用程序开发的不同方面。它侧重于 Qt Quick 技术，但也提供了有关为 Qt Quick 编写 C + + 后端和扩展的必要信息。本章将提供 Qt6的高级概述。它展示了可供开发人员使用的不同应用程序模型，以及一个展示应用程序，作为即将发布的内容的预览。此外，本章的目的是提供一个 Qt 内容的广泛概述，以及如何与 Qt 的制造商接触的 Qt 公司。

但是，Qt 文档将始终提供全面的信息，并且是查找有关所有元素、属性、枚举等详细信息的一个很好的参考。我们的最终目标是，当素材达到我们满意的成熟度水平时，向您呈现一本印刷书籍，但我们想现在就与您分享，并从您的反馈中了解需要改进的地方，以及需要添加的额外内容。本书的其余部分关注更高级的主题，如JavaScript的细节，c++和QML的混合，以及用于Python绑定和QML的Qt。接下来的6-14章，可以看作是介绍独立主题的相当独立的章节，尽管第7章中的模型被用在更多的地方。这本书可以说是被分为三部分。