QmlBook#ch2——遇见Qt
核心必备模块
开始QML编程所需的最小Qt 6模块集。
Qt Core - 其他模块使用的核心非图形类。
Qt GUI - 图形用户界面（GUI）组件的基类。包括OpenGL。
Qt Network - 使网络编程更简单，更便携的类。
Qt QML - 用于QML和JavaScript语言的类。
Qt Quick - 一种声明式框架，用于构建具有自定义用户界面的高度动态应用程序。
Qt Quick Controls - 提供轻量级QML类型，用于为桌面，嵌入式和移动设备创建高性能用户界面。这些类型采用简单的样式架构，效率非常高。
Qt Quick Layouts - 布局是用于在用户界面中排列基于Qt Quick 2的项目的项目。
Qt Widgets - 用C++小部件扩展Qt GUI的类。
Qt D-BUS - 用于在linux上通过D-Bus协议进行进程间通信的类。
Qt Quick Test - QML应用程序的单元测试框架，其中测试用例以JavaScript函数的形式编写。
Qt Test - 用于对Qt应用程序和库进行单元测试的类。
Qt Quick 是 Qt 6 中用于用户界面技术的总称。它在 Qt 4 中引入，现在扩展到 Qt 6。Qt Quick 本身是几种技术的集合：
• QML - 用户界面的标记语言
• JavaScript - 动态脚本语言
• Qt C++ - 高度可移植的增强型 c++ 库。
在典型的项目中，前端是用 QML/JavaScript 开发的。与系统接口并进行繁重工作的后端代码是使用 Qt C++ 开发的。
旋转风车示例
background.png、pinwheel.png、pole.png
======>Step➊. 组装风车
import QtQuick
Item {
id: root
width: background.width
height: background.height
Image {
id: background
source: "images/background.png"
}
Image {
id: pole
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom
source: "images/pole.png"
}
Image {
id: pinwheel
anchors.centerIn: parent
source: "images/pinwheel.png"
}
}
代码解读：
每个类型都有系列属性(properties)，对于QML类型Image，它有width、height、source等属性。
通过官方文档：Qt Quick QML Types，我们查看一下QML类型Image的属性列表，如下：
可以看到，它继承自根QML类型Item，我们用到的width、height属性就是从Item继承而来的。
绝大部分的标准QML类型都坐落在QtQuick模块，所以我们在使用时导入此模块即可：import QtQuick，不加版本号即代表当前环境的最新版本。
id 是一个特殊的可选属性，它包含一个标识符，可以用来在文档的其他地方引用其关联类型。重要提示：id 属性在设置后不能更改，也不能在运行时设置。
要将风车放在中间，我们使用一种复杂的属性，称为锚点(anchor)。锚定允许您指定父对象和兄弟对象之间的几何关系。QML提供了一种灵活的方法来使用锚点布局项目。锚定的概念是Item的基础，并且对所有视觉QML元素都可用。锚点就像一份合同(contract)，比竞争的几何变化更强大。锚点是相对性的表达；您总是需要一个相关元素来锚定。
有时您可能希望进行小的调整，例如，将类型稍微偏离中心。这可以通过anchors.horizontalCenterOffset或anchors.verticalCenterOffset来完成。类似的调整属性也适用于所有其他锚点。锚点属性的完整列表，如下：
您按照图层和分组的顺序描述用户界面的视觉外观，其中最上层（我们的背景图像）首先绘制，子图层在其上方绘制在包含类型的本地坐标系中。即风轮遮挡杆子，杆子遮挡背景。默认z属性值为0，z是real类型，即它是实数，所以 取值是z∈(-∞,+∞)，z值越大就在越上层。这里风轮 、杆子、背景的z值都是默认值0(即相等)。但在代码结构里面，它们的放置顺序决定了先放置QML类型先绘制，后放置的后绘制，这也就产生了堆叠层次效果。
======>Step➋. 风轮旋转
Image {
id: root
...
MouseArea {
anchors.fill: parent
onClicked: wheel.rotation += 45
}
...
}
代码解读：
我们使用MouseArea类型并使其覆盖根类型的整个区域。鼠标区域在用户单击其覆盖区域内时发出信号(signals)。您可以通过重写 onClicked 函数来连接此信号。当信号连接时，意味着每当发出信号时，都会调用它对应的函数（或函数组）。在这种情况下，我们说当鼠标区域中有鼠标单击时，id为wheel的类型（即风轮图像）应该旋转+45度。
这种技术适用于每个信号(signal)，命名约定为on + SignalName。此外，所有属性在其值更改(value changed)时都会发出信号。对于这些信号，命名约定是：on${property}Changed。例如，如果更改了width属性，则可以使用onWidthChanged: print(width)来观察它。
======>Step➌. 风轮流畅旋转
上面，当用户单击时，轮子会旋转，但旋转是一次性完成的，而不是随着时间流动而流畅地运动。
Image {
id: root
Image {
id: wheel
Behavior on rotation {
NumberAnimation {
duration: 125
}
}
}
}
代码解读：
我们可以使用动画来实现平滑运动。动画定义了属性如何在一段时间内发生变化。行为(Behavior)为定义的属性指定了每次对该属性(这里是rotation)应用更改时的动画。换句话说，每当属性发生变化时，都会运行动画。这只是在QML中进行动画的众多方法之一。Behavior使用格式：Behavior on ${property}。
现在，每当轮子的旋转属性发生变化时，它都会使用持续时间为125毫秒的NumberAnimation进行动画处理。因此，每个45度的转弯都将花费125毫秒，产生一个漂亮流畅的旋转。
请注意，一个属性不能有多个分配的行为。要在行为中提供多个动画，请使用ParallelAnimation或SequentialAnimation。
如果状态更改(state change)具有与行为(Behavior)匹配相同属性的过渡(Transition)，则过渡动画(Transition animation)将覆盖该状态更改(state change)的行为(Behavior)。后面文章会有介绍，或参见官方文档: Behavior example。
下面截图来自：Animation and Transitions in Qt Quick，展示了 动画(Animation) 和 过渡(Transitions) 的所有类型：
======>Step➍. 风轮旋转视觉模糊效果
Image {
id: blur
opacity: 0// 完全透明(默认值为1.0)
anchors.centerIn: parent
source: "images/blur.png"
Behavior on rotation {
NumberAnimation { duration: 125 }
}
Behavior on opacity {
NumberAnimation { duration: 125 }
}
}
======>Step➎. 控制风车的顺向和逆向旋转
Item {
...
focus: true
Keys.onLeftPressed: {
blur.opacity = 1
pinwheel.rotation -= root.rotationStep
blur.rotation -= root.rotationStep
}
Keys.onRightPressed: {
blur.opacity = 0.5
pinwheel.rotation += root.rotationStep
blur.rotation += root.rotationStep
}
Keys.onReleased: {
blur.opacity = 0
}
}
前文有讲到，对于每个信号(signal)，按命名约定为on + SignalName，通过重写 onSignalName 函数来连接此信号。所有属性在其值更改时都会发出信号。当信号连接时，意味着每当发出信号时，都会调用它对应的函数（或函数组）。
我们通过触发键盘按键来发送信号，以完成对风车的控制。先来看看QML类型Keys有哪些信号，如下图所求：
从上图可以看到，所有Keys信号函数都具有一个名为 event 的KeyEvent类型参数，其中包含事件的详细信息。如果按键被处理，则应将event.accepted设置为true，以防止事件在项目层次结构中传播。
上图中的黄色线标明的两个信号，根据命名规则，连接这两信号对应的要重写的函数分别为：onLeftPressed和onRightPressed。
/** 如果带参数，写法如下：*/
Keys.onPressed: function(event) {
if (event.key == Qt.Key_Left) {
console.log("move left");
event.accepted = true;
}
}
/* 或：*/
Key.onPressed: (event)=> {
if (event.key == Qt.Key_Right) {...}
}
/** 如果用不到参数，写法如下：*/
Keys.onPressed: { ... }
我们看到，有句代码很重要：focus: true，它表明Item将获取活动的焦点，这样才能捕获键盘事件，否则按键对风车不起作用。
按下键盘的左方向键时，风车逆向旋转45°，模糊风轮图像从完全透明变为完全不透明，逐渐覆盖正常的风轮，即表明旋转速度变快，然后模糊风轮图像总是opacity=1，保持覆盖状态，形成正常人类眼睛视觉残留效果。当按下右方向键时，风车顺向旋转45°，模糊风轮图像从完全透明变为半透明，逐渐叠加到正常的风轮，也表明旋转速度变快，然后模糊风轮图像总是opacity=0.5，保持叠加状态，顺风方向并没有严重残影。松开按键，重置opacity=0。
最终的效果图及完整QML代码如下：
import QtQuick
Item {
id: root
width: background.width
height: background.height
property int rotationStep: 45
Image {
id: background
source: "images/background.png"
}
Image {
id: pole
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom
source: "images/pole.png"
}
Image {
id: pinwheel
anchors.centerIn: parent
source: "images/pinwheel.png"
Behavior on rotation {
NumberAnimation { duration: 125 }
}
}
Image {
id: blur
opacity: 0
anchors.centerIn: parent
source: "images/blur.png"
Behavior on rotation {
NumberAnimation { duration: 125 }
}
Behavior on opacity {
NumberAnimation { duration: 125 }
}
}
/********************************/
focus: true
Keys.onLeftPressed: {
blur.opacity = 1
pinwheel.rotation -= root.rotationStep
blur.rotation -= root.rotationStep
}
Keys.onRightPressed: {
blur.opacity = 0.5
pinwheel.rotation += root.rotationStep
blur.rotation += root.rotationStep
}
Keys.onReleased: {
blur.opacity = 0
}
}
