《Qt5 Cadaques》学习笔记（一）：邂逅 QT 5

本书作者：jryannel@LinkedIn

提示：本章的源代码可以在 assets 文件夹中找到。

本书为您提供了使用 Qt 5.12 进行应用程序开发的不同方面的演练。 它侧重于新的 Qt Quick 技术，但也提供了有关为 Qt Quick 编写 C++ 后端和扩展的必要信息。

本章提供了 Qt 5 的高级概述。它展示了可供开发人员使用的不同应用程序模型，以及一个 Qt 5 展示应用程序，作为对即将发生的事情的预览。 此外，本章旨在提供对 Qt 5 内容的广泛概述以及如何与 Qt 5 的制造商取得联系。

1.1 前言

历史

Qt 4 自 2005 年以来不断发展，为成千上万的应用程序甚至完整的桌面和移动系统提供了坚实的基础。近年来，计算机用户的使用模式发生了变化。从固定式 PC 到便携式笔记本电脑和如今的移动计算机。经典的桌面越来越多地被基于移动触摸的始终连接的屏幕所取代。有了它，桌面用户体验范式也发生了变化。而在过去，Windows UI 主导了世界，而现在我们将更多的时间花在使用另一种 UI 语言的其他屏幕上。
Qt 4 旨在满足桌面世界的需求，在所有主要平台上都提供一组连贯的 UI 小部件。今天 Qt 用户面临的挑战已经改变，它更多地在于为客户驱动的用户界面提供基于触摸的用户界面并在所有主要桌面和移动系统上启用现代用户界面。 Qt 4.7 开始引入 Qt Quick 技术，该技术允许用户从简单的元素创建一组用户界面组件，以实现全新的用户界面，由客户需求驱动。

1.1.1 Qt 5 Focus

Qt 5 完全更新了非常成功的 Qt 4 版本。 在 Qt 4.8 中，Qt 4 发布已经快 7 年了。 是时候让一个令人惊叹的工具包更加令人惊叹了。 Qt 5 专注于以下方面：

• 出色的图形：Qt Quick 2 是基于 OpenGL (ES)使用场景图形实现的。重新组合的图形堆栈允许新级别的该领域前所未见的易用性相结合的图形效果。
• 开发人员生产力：QML 和 JavaScript 是创建 UI 的主要手段。后端将由 C++ 驱动。 JavaScript 和 C++ 之间的分离允许专注于创建漂亮用户界面的前端开发人员和专注于稳定性、性能和扩展运行时的后端 C++ 开发人员的快速迭代。
• 跨平台可移植性：通过整合的 Qt Platform Abstraction，现在可以更轻松、更快速地将 Qt 移植到更广泛的平台。Qt 5 围绕 Qt Essentials 和 Add-ons 的概念构建，允许操作系统开发人员专注于基本模块并导致整个运行时间更小。
• 开放式开发：Qt 现在是一个真正的开放式管理项目，托管在 qt.io。开发是开放的和社区驱动的。

1.2 Qt 5 简介

1.2.1 Qt Quick

Qt Quick 是 Qt 5 中使用的用户界面技术的总称。Qt Quick 本身是多种技术的集合：

• QML - 用户界面的标记语言
• JavaScript - 动态脚本语言
• Qt C++ - 高度可移植的增强型 C++ 库

与 HTML 类似，QML 是一种标记语言。它由标记组成，在 Qt Quick 中称为类型，用大括号括起来：Item {}。它是从头开始设计的，旨在为开发人员创建用户界面、速度和更容易阅读。可以使用 JavaScript 代码进一步增强用户界面。 Qt Quick 可以使用 Qt C++ 轻松扩展您自己的本机功能。简而言之，声明式 UI 称为前端，原生部分称为后端。这使您可以将应用程序的计算密集型和本机操作与用户界面部分分开。

在一个典型的项目中，前端是用 QML/JavaScript 开发的。与使用 Qt C++ 开发的后端代码的系统交互并完成繁重工作。这允许在更面向设计的开发人员和功能开发人员之间自然分离。通常，后端使用 Qt 单元测试框架 Qt Test 进行测试，并导出以供前端开发人员使用。

1.2.2 设计一个用户界面

让我们使用 Qt Quick 创建一个简单的用户界面，该界面展示了 QML 语言的某些方面。最后，我们将有一个带有旋转叶片的纸风车。

 我们从一个名为 main.qml 的空文档开始。 我们所有的 QML 文件都将具有后缀 .qml。 作为一种标记语言（如 HTML），QML 文档需要有一个且只有一个根类型。 在我们的例子中，这是具有基于背景图像几何的宽度和高度的 Image 类型：

import QtQuick 2.12

Image {
    id: root
    source: "images/background.png"
}

由于 QML 不限制根类型的类型选择，我们使用 Image 类型，并将源属性设置为我们的背景图像作为根。

注意：每种类型都有属性。 例如，图像具有宽度和高度属性，每个都包含一个像素数。 它还具有其他属性，例如源。 由于图片类型的大小是从图片大小自动推导出来的，所以我们不需要自己设置宽度和高度属性。
大多数标准类型位于 QtQuick 模块中，该模块由 .qml 文件开头的 import 语句提供。
id 是一个特殊且可选的属性，它包含一个标识符，可用于在文档中的其他位置引用其关联类型。 重要提示： id 属性在设置后无法更改，也无法在运行时设置。 使用 root 作为 root 类型的 id 是本书中使用的约定，以使在较大的 QML 文档中可以预测最顶层的类型。

前景元素，代表用户界面中的杆和风车，作为单独的图像包含在内。
我们希望将杆水平放置在背景的中心，但垂直向底部偏移。
我们想把风车放在背景的中间。
尽管此初学者示例仅使用图像类型，但随着我们的进展，您将创建由许多不同类型组成的更复杂的用户界面。

 

Image {
    id: root
    ...
    Image {
        id: pole
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: parent.bottom
        source: "images/pole.png"
        }
    Image {
        id: wheel
        anchors.centerIn: parent
        source: "images/pinwheel.png"
    }
    ...
}

为了将风车放置在中间，我们使用了一个称为锚点的复杂属性。 锚定允许您指定父对象和兄弟对象之间的几何关系。 例如，将我放在另一种类型的中心（anchors.centerIn: parent）。 两端有left、right、top、bottom、centerIn、fill、verticalCenter和horizontalCenter关系。 自然，当两个或多个锚点一起使用时，它们应该相互补充：例如，将一个类型的左侧锚定到另一个类型的顶部是没有意义的。
对于风车，锚固只需要一个简单的锚。

注意：有时您需要进行一些小的调整，例如，将字体稍微偏离中心。 这可以通过 anchors.horizontalCenterOffset 或 anchors.verticalCenterOffset 来完成。
类似的调整属性也可用于所有其他锚。 有关锚属性的完整列表，请参阅文档。

注意：将图像放置为我们的根类型（图像）的子类型说明了声明性语言的一个重要概念。 您按照图层和分组的顺序描述用户界面的视觉外观，其中最顶层（我们的背景图像）首先绘制，子层在包含类型的本地坐标系中绘制在其顶部。

为了让展示更有趣，让我们让场景互动。 这个想法是当用户在场景中的某个地方按下鼠标时旋转滚轮。
我们使用 MouseArea 类型并使其覆盖我们根类型的整个区域。

Image {
    id: root
    ...
    MouseArea {
        anchors.fill: parent
        onClicked: wheel.rotation += 90
    }
    ...
}

当用户在其覆盖的区域内单击时，鼠标区域会发出信号。 您可以通过覆盖 onClicked 函数来连接到此信号。 当一个信号被连接时，这意味着它对应的函数（或多个函数）在信号发出时被调用。 在这种情况下，我们说当鼠标在鼠标区域点击时，id为wheel的类型（即风车图像）应该旋转+90度。

注意：此技术适用于每个信号，命名约定为 + SignalName 在标题中。
此外，所有属性在其值发生变化时都会发出信号。 对于这些信号，命名约定是：
                                        on + PropertyName + Changed
例如，如果一个宽度属性发生了变化，你可以通过 onWidthChanged: print(width) 观察它。

现在，只要用户单击，滚轮就会旋转，但旋转发生在一次跳跃中，而不是随着时间的推移而流畅地移动。 我们可以使用动画来实现平滑的运动。 动画定义了属性更改如何在一段时间内发生。 为了实现这一点，我们使用 Animation 类型的名为 Behavior 的属性。
Behavior 为应用到该属性的每个更改指定一个已定义属性的动画。 换句话说，只要属性发生变化，动画就会运行。 这只是在 QML 中制作动画的众多方法中的一种。

Image {
    id: root
    Image {
        id: wheel
        Behavior on rotation {
            NumberAnimation {
                duration: 250
            }
        }
    }
}

现在，每当风车的旋转属性发生变化时，它都会使用持续时间为 250 毫秒的 NumberAnimation 进行动画处理。 所以每个 90 度转弯需要 250 毫秒，从而产生一个非常平滑的转弯。

 注意：您实际上不会看到车轮模糊。 这只是为了指示旋转。 （资源文件夹中有一个模糊的轮子，以防您想尝试一下。）

现在风车看起来好多了，表现也很好，并且提供了一个非常简短的关于 Qt Quick 编程如何工作的基础知识。

1.3 Qt 组件块

Qt 5 由大量模块组成。 通常，模块是供开发人员使用的库。 某些模块对于启用 Qt 的平台是必需的，并形成称为 Qt Essentials Modules 的集合。 许多模块是可选的，并且形成了 Qt 附加模块。 大多数开发人员可能不需要使用后者，但了解它们是很好的，因为它们为常见的挑战提供了宝贵的解决方案。

1.3.1 Qt 模块

Qt Essentials 模块对于任何支持 Qt 的平台都是必需的。 它们为使用 Qt Quick 2 开发现代 Qt 5 应用程序奠定了基础。完整的模块列表可在 Qt 文档模块列表中找到。

核心基本模块

启动 QML 编程的最小 Qt 5 模块集。

模块	描述
Qt Core	其他模块使用的核心非图形类。
Qt GUI	图形用户界面 (GUI) 组件的基类。 包括 OpenGL。
Qt Multimedia	音频、视频、收音机和相机功能的类。
Qt Multimedia Widgets	用于实现多媒体功能的基于小部件的类。
Qt Network	使网络编程更容易和更便携的类。
Qt QML	QML 和 JavaScript 语言的类。
Qt Quick	用于构建具有自定义用户界面的高度动态应用程序的声明性框架。
Qt Quick Controls 2	提供轻量级 QML 类型，用于为桌面设备、嵌入式设备和移动设备创建高性能用户界面。 这些类型采用简单的样式架构并且非常有效。
Qt Quick Dialogs	用于从 Qt Quick 应用程序创建系统对话框并与之交互的类型。
Qt Quick Layouts	布局是用于在用户界面中排列基于 Qt Quick 2 的项目的项目。
Qt Quick Test	QML 应用程序的单元测试框架，其中测试用例被编写为 JavaScript 函数。
Qt SQL	使用 SQL 进行数据库集成的类。
Qt Test	用于单元测试 Qt 应用程序和库的类。
Qt Widgets	使用 C++ 小部件扩展 Qt GUI 的类。

Qt 附加模块

除了基本模块之外，Qt 还提供了针对特定目的的附加模块。 许多附加模块要么功能完整并且存在向后兼容性，要么仅适用于某些平台。 以下是一些可用的附加模块的列表，但请确保您熟悉 Qt 文档附加模块列表和下面的列表中的所有模块。

模块	描述
Qt 3D	一组 API，使 3D 图形编程变得简单和声明性。
Qt Bluetooth	用于使用蓝牙无线技术的平台的 C++ 和 QML API。
Qt Canvas 3D	使用 JavaScript 从 Qt Quick 应用程序启用类似 OpenGL 的 3D 绘图调用。
Qt Graphical Effects	用于 Qt Quick 2 的图形效果。
Qt Location	在 QML 应用程序中显示地图、导航和放置内容。
Qt Network Authorization	提供对基于 OAuth 的在线服务授权的支持。
Qt Positioning	提供对位置、卫星和区域监控类的访问。
Qt Purchasing	在 Qt 应用程序中启用应用程序内购买产品。 （仅适用于 Android、iOS 和 MacOS）。
Qt Sensors	提供对传感器和运动手势识别的访问。
Qt Wayland Compositor	提供开发 Wayland 合成器的框架。 （仅适用于 Linux）。
Qt Virtual Keyboard	用于实现不同输入法以及 QML 虚拟键盘的框架。 支持本地化键盘布局和自定义视觉主题。

注意：由于这些模块不是发布的一部分，每个模块的状态可能会有所不同，具体取决于活跃的贡献者数量和测试的好坏。

1.3.2 支持平台

Qt 支持各种平台，包括所有主要的桌面和嵌入式平台。 通过 Qt 应用程序抽象，如果需要，现在可以比以往更轻松地将 Qt 移植到您自己的平台上。
在一个平台上测试 Qt 5 是很耗时的。 Qt 项目选择了一个平台子集来构建参考平台集。 这些平台通过系统测试进行了彻底的测试，以确保最佳质量。 但是，请记住，没有任何代码是没有错误的。

1.4 Qt 项目

来自 Qt 项目 wiki：

“Qt 项目是一个对 Qt 感兴趣的精英共识社区。 任何与此有共同兴趣的人都可以加入社区，参与其决策过程，并为 Qt 的发展做出贡献。”

Qt Project 是一个进一步开发 Qt 的开源部分的组织。 它构成了其他用户贡献的基础。 最大的贡献者是 Qt 公司，它也拥有 Qt 的商业权利。
Qt 具有面向公司的开源方面和商业方面。 商业方面适用于不能或不会遵守开源许可证的公司。 如果没有商业方面，这些公司将无法使用 Qt，也不允许 Qt 公司为 Qt 项目贡献如此多的代码。
全球有许多公司在各种平台上使用 Qt 进行咨询和产品开发。 有很多开源项目和开源开发者都依赖 Qt 作为他们的主要开发库。 成为这个充满活力的社区的一员，并使用这些很棒的工具和库工作感觉很好。 它会让你成为一个更好的人吗？ 可能是：-）

在这里投稿：http://wiki.qt.io/