青春不老，奋斗不止！

全新的 QML，基于 Qt6 + CMake，清晰的思维导图，透彻的示例程序，超全面的章节。

QML 基本动画的引入，不仅能够帮助我们轻松地为应用程序添加动态效果，还能显著提升用户体验，使得界面更加生动和直观。

在 QML 中，动画是通过 Animation 类型实现的，所有动画类型都继承自它。它提供了一组通用的属性（例如：paused 和 running）和方法（例如：start() 和 stop()），以帮助我们管理动画的状态和运行。

在设计用户界面时，经常会用到状态驱动的方式，使界面根据当前的状态的不同而呈现不同的内容。以交通信号灯为例，它有行驶、警示和停止三种状态。在行驶状态下，绿灯亮起，指示所有车辆可以通行；在警示状态下，黄灯亮起，提示司机注意并准备停车；而在停止状态下，红灯亮起，提示所有车辆停止前行。这种状态驱动的设计使用户能够清晰地了解当前情况，从而更好地作出相应的行动。

当我们使用 QML 创建用户界面时，不仅要关心界面的静态外观，还需要注重一些动态交互效果。在之前的章节中，我们已经学习了图形元素的创建和布局，现在是时候赋予这些元素动态性了。

PathView 是 QML 中一个功能强大、极其灵活的组件。它允许我们基于路径 Path 创建动态且多样化的视图效果，这条路径可以是直线、曲线，甚至是任意复杂的形状。

在 QML 中，Path 是一种用于定义和描述路径的元素，通常需要和 Canvas、PathView、Shape 等元素结合一起使用，用于生成复杂的图形或动画效果。

和 ListView 一样，GridView 也是基于 Flickable 的视图组件，它们的用法非常相似。不同的是，ListView 中的元素被存储在线性链表中，并以单列（或单行）的形式进行展示的，因此适用于垂直（或水平）列表的场景；而 GridView 中的元素则被存储在一个二维数组中，并以网格的形式进行展示的，因此更适用于具有二维结构或以网格方式呈现的场景，如相册图库、视频列表、工具导航等。

虽然 Repeater 在重复创建多个相似项的时候很方便，但是通常只适用于有限的简单元素，并且它还无法滚动浏览。而基于 Flickable 的视图组件（如 GridView、ListView、TableView、TreeView 等）则弥补了这些缺点，它们不但能够显示大量数据，而且还支持滚动浏览，尤其是针对复杂的布局和交互场景，可以通过分页显示、懒加载、动态更新等手段来提高性能。

Repeater 是一种用于创建大量相似项的视图组件，通常被包含在定位器类型中（例如：Row、Column 等），以直观地定位它所创建的委托项。

对于 GUI 应用程序来说，我们通常需要格式化数据并进行显示，而 QML 提供了一种很便利的显示方式 - Model-View-Delegate（简称：MVD）。该模式是 Model-View-Controller（简称：MVC）的一种变体，常被用于分层开发，其优点在于可以很好地将数据模型和用户界面分离，使得数据的改变能够自动反映在界面上。

在使用浏览器时，我们经常会用到全屏模式，最常见的场景有：观看视频、阅读文章、在线演示等。全屏模式的优点在于，它可以让用户充分地利用有限的屏幕空间，更好地专注于内容本身，从而提供丰富的沉浸式视觉体验。

对于 QML 和 Web 混合应用来说，使用场景非常广泛，特别是像 HTML5 这样的东西，我们经常会用到。虽然 WebEngineView 使得在 QML 中嵌入 Web 页面变得非常简单，但是如何在它们之间架起一座桥梁，让彼此之间能够相互通信呢？这时就需要用到 WebChannel。

在 QML 与 Web 混合开发时，除了使用 WebEngineView 加载网页之外，我们还可以在 QML 层运行 JavaScript 代码，这样就能更灵活地操作浏览器窗口和网页内容，从而实现丰富的交互功能了。例如：获取网页标题、通过点击按钮实现页面数据刷新等。

随着互联网的快速发展，Web 应用在各个领域中变得越来越流行。为了满足用户对多样化功能的需求，我们经常需要将 Web 技术和原生应用相结合，来创建混合应用程序。

这是一份史上最强、最高清、最好用的 QML 思维导图

想必大家都知道，亮哥一直深耕于 CSDN，坚持了好很多年，目前为止，原创已经 500 多篇了，一路走来相当不易。

Widgets、QML、Qt Quick 傻傻分不清楚

Qt6 在 Android（HarmonyOS）中的真机调试，基本步骤以及注意事项

JDK、Android SDK、NDK 安装下载，AVD 的创建，以及环境测试等

Qt6.5 模块介绍、下载、安装、环境配置、运行

MinGW 和 MSVC 的区别，以及 MSVC 下的 Qt 环境搭建。

Visual Studio 下载安装、插件配置、环境测试

在《QML WebSocket 客户端》一节中，我们开发了一个 WebSocket Client，但在测试的时候，连接的是 Postman 提供的 Echo Server。现在，是时候编写一个真正属于自己的服务了。

WebSocket 是一种网络传输协议，用于在客户端和服务器之间进行双向通信（全双工）。

在 Web 开发中，实现与服务器的通信至关重要，其中 HTTP 便是最常用的方式之一。它是一种客户端 - 服务器协议，客户端向服务器发送请求，服务器则返回响应。常被用于在浏览器/客户端和 Web 服务器之间传输消息、图像、音视频和其他类型的文件。

在开发 QML 应用过程中，经常需要处理和存储用户数据。虽然常见的选择是服务器端数据库，但有时也需要一种简单、轻量级的本地存储。在这方面，我们可以依靠 LocalStorage 来满足各种需求。

对于应用程序来说，数据存储是不可或缺的一部分。例如，我们通常需要将用户的偏好设置、应用程序配置等信息保存起来，这样即使程序关闭或设备重启，数据也会得到保留，很方便后续继续使用。

虽然普通的自定义组件很好用，但是并不利于数据共享以及全局状态的管理（如全局主题样式、全局配置、全局数据缓存等）。这时，单例组件了就派上用场了，通过它我们可以很方便地共享和管理应用级别的信息。

几何变换是 Canvas 提供的一项强大的图形处理能力，主要涉及平移、旋转、缩放。通过运用这些功能，我们有了更大的创作自由度，可以很容易的在 QML 中实现一些出色的游戏效果、动态图表、交互式数据可视化等，从而提升用户体验并营造出令人难忘的视觉效果。

终于要介绍动画了，这意味着我们快要把 Canvas 学完了，所以是时候庆祝一下了.....

不知大家想过没有，我们好不容易在 Canvas 上绘制了各种图形，该如何把它保存起来呢？比如，我们实现了一个画板，当用户制作完成自己的作品之后，是不是要将其保存起来，以分享给他人或者供自己后续再次编辑。

在 QML 开发中，Canvas 是一个很强大的绘图元素，可以实现各种复杂的图形效果，其中一个重要的特性就是裁剪。它的原理是使用路径或其他形状定义一个封闭区域，将绘图操作限制在该区域内，并隐藏掉超出该区域的部分。

在之前的章节中，我们虽然学习了 Canvas 的基本绘图，但是却不清楚其背后真实的图像像素原理，因此无法深入地操作像素来实现一些高级的功能（例如：灰度处理）。

经过前面的 Canvas 学习，我们可以很容易地使用 strokeStyle 和 fillStyle 来设置图形的边框色和填充色，例如：“green”、“black” 等。其实除了使用纯色之外，我们还可以使用一些渐变色，如果你想让图形效果变得更加炫酷，甚至还可以为其添加阴影。

关于 QML Canvas，我们已经学习了如何绘制基本图形、应用样式和颜色、绘制图像等，现在来看一下如何在 Canvas 中绘制文本。

对于 QML Canvas 而言，除了前面讲解的点线面的基本绘制之外，它还提供了一项很有意思的特性 - 绘制图像。只要是 Qt 支持的图片格式都可以使用，比如 PNG、JPEG 等，甚至可以将其它 Canvas 元素生成的图片作为图片源。

Canvas 是一个用于在 QML 中绘制图形的元素，它提供了一个依赖于分辨率的位图画布，可用于动画、游戏、数据可视化、图片编辑以及视频处理等方面。

在 QML 中，Image 是用于显示图像的基本元素之一，通过它可以很容易地加载本地或者网络图片。

在 QML 中，Text 和 Label 是两种常用的元素（Label 继承于 Text），用于显示文本内容。虽然它们看起来很相似，但在使用和功能上有一些不同。