QML自学笔记 第一章 QT初探

Qt Quick

Qt Quick是Qt 5中使用的用户界面技术的总称。Qt Quick本身就是几种技术的集合:
• QML - 用户界面的标记语言
• JavaScript - 动态脚本语言
• Qt C++ - 高度可移植的增强型c++库

• QML由括起来的标签组成，在Qt Quick中称为类型 在大括号中: Item {}。
• 使用JavaScript代码可以进一步增强用户界面。
• Qt Quick很容易使用Qt C++可以扩展您自己的本机功能。
  简而言之，声明式UI称为前端，本机部分称为后端。

QT QUICK初体验

用户界面

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

我们从名为main.qml的空文档开始。
QML文档需要且只能有一个根类型。在我们的例子中，这是图像键入基于背景图像的宽度和高度:

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

由于QML没有限制根类型的类型选择，我们使用一个带有source属性集的图像类型以我们的背景图像为根。

每种类型都有属性。例如，一个图像具有宽度和高度属性，每个属性保存一个像素数。它还有其他属性，比如source。因为图像类型的大小是自动的从图像大小导出，我们不需要自己设置宽度和高度属性。
最标准的类型位于QtQuick模块中，该模块在qml文件的开始导入。
id是一个特殊的可选属性，它包含一个可用于在文档的任何地方引用其关联的对象。

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"
	}
	...
}

为了将风车放在中间，我们使用了一个叫做anchor的复杂属性。锚允许您指定父对象和同级对象之间的几何关系。

例如，把我放在另一个的中心类型(anchors.centerIn: parent)。有左、右、上、下、居中、填充、垂直居中和横向居中等。
有时您会想要做一些小的调整，例如，将文字稍微移离中心。这 可通过anchors.horizontalCenterOffset或anchors.verticalCenterOffset完成。 类似的调整属性也可用于所有其他锚点。有关完整列表，请参考文档锚属性。

事件

为了让展示更加有趣，让我们让场景互动起来。这个想法是当 用户在场景中的某个地方按下鼠标。

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

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

这种技术适用于每一种信号，命名约定是大写+ SignalName。
此外，所有属性在其值更改时都会发出信号。对于这些信号，命名惯例是: on+ PropertyName +Changed。
例如，如果一个宽度属性被更改，您可以使用onWidthChanged: print(width)来观察它。

动画

现在，每当用户点击时，滚轮就会旋转，但旋转是一次性的，而不是流畅的。我们可以使用动画来实现流畅的移动。动画定义了属性变化发生在一段时间内。为此，我们使用动画类型的属性Behavior。该行为为已定义的属性指定动画，以显示应用于该属性的每个更改。在其他方面，每当属性改变时，动画就运行。这只是在中制作动画的多种方式之一 QML。

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

现在，每当轮子的旋转属性改变时，它将使用NumberAnimation持续时间为250毫秒，所以每个90度的转弯需要250毫秒，产生一个漂亮平滑的转弯。

现在，轮子看起来更好了，表现也很好，并且提供了对 Qt快速编程的工作原理。

Qt构建模块

Qt 5由大量模块组成。通常，模块是供开发人员使用的库。一些对于支持Qt的平台，模块是必需的，它们构成了Qt Essentials Modules。许多模块是可选的，并形成Qt Add-On Modules。大多数开发人员可能不需要使用后者，但是为了解它们很有好处，因为它们为常见挑战提供了宝贵的解决方案。

Qt Essentials 模块

Qt Essentials模块对于任何支持Qt的平台都是必需的。它们提供了使用Qt Quick 2开发的基础。Qt文档模块中提供了模块的完整列表。
核心-基本模块
开始QML编程的最小Qt 5模块集。

Module	描述
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的items的items。
Qt Quick Test	QML应用程序的单元测试框架，其中的测试用例是作为JavaScript函数编写的。
Qt SQL	使用SQL进行数据库集成的类。
Qt Test	单元测试Qt应用程序和库的类。
Qt Widgets	用C++小部件扩展Qt GUI的类。

Qt Add-On 模块

除了基本模块之外，Qt还提供了针对特定目的的附加模块。许多附加模块要么是功能完整且向后兼容，要么只适用于某些平台。Qt文档模块中提供了模块的完整列表。
这里列出了一些可用的附加模块。

Module	描述
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	提供了一个开发道路合成器的框架。(仅适用于Linux)。
Qt Virtual Keyboard	一个实现不同输入法的框架以及一个QML虚拟键盘。支持本地化的键盘布局和自定义视觉主题。