# qml-mind **Repository Path**: waleon/qml-mind ## Basic Information - **Project Name**: qml-mind - **Description**: QML 思维导图 - **Primary Language**: QML - **License**: GPL-3.0 - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 6 - **Forks**: 3 - **Created**: 2023-08-15 - **Last Updated**: 2024-04-07 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 基本介绍 这是一份史上最强、最高清、最好用的 QML 思维导图，所有内容均来自专栏 [《细说 QML》](https://waleon.blog.csdn.net/article/details/58064240)： - 全新的 QML - 基于 Qt6 + CMake - 清晰的思维导图（帮助快速记忆，更加易于学习） - 透彻的示例程序（图文并茂，每篇文章都有完整的示例源码，且解释详细） - 超全面的章节（涉及语法、常见元素、模型视图、画布与绘图、动画效果、粒子系统、着色器、多媒体、JavaScript、C++ 交互等） ## QML 核心 1. [QML 中的 5 大布局](https://waleon.blog.csdn.net/article/details/129222151) ![输入图片说明](assets/core/QML%20%E4%B8%AD%E7%9A%84%205%20%E5%A4%A7%E5%B8%83%E5%B1%80.png) 2. [QML 颜色表示法](https://waleon.blog.csdn.net/article/details/129230582) ![输入图片说明](assets/core/QML%20%E9%A2%9C%E8%89%B2%E8%A1%A8%E7%A4%BA%E6%B3%95.png) 3. [QML 鼠标事件](https://waleon.blog.csdn.net/article/details/129252688) ![输入图片说明](assets/core/QML%20%E9%BC%A0%E6%A0%87%E4%BA%8B%E4%BB%B6.png) 4. [QML 键盘事件](https://waleon.blog.csdn.net/article/details/129309600) ![输入图片说明](assets/core/QML%20%E9%94%AE%E7%9B%98%E4%BA%8B%E4%BB%B6.png) 5. [QML 定时器](https://waleon.blog.csdn.net/article/details/129340128) ![输入图片说明](assets/core/QML%20%E5%AE%9A%E6%97%B6%E5%99%A8.png) 6. [QML 中的 z-order](https://waleon.blog.csdn.net/article/details/129351643) ![输入图片说明](assets/core/QML%20%E4%B8%AD%E7%9A%84%20z-order.png) 7. [QML 可重用组件](https://waleon.blog.csdn.net/article/details/129456882) ![输入图片说明](assets/core/QML%20%E5%8F%AF%E9%87%8D%E7%94%A8%E7%BB%84%E4%BB%B6.png) 8. [QML 单例组件](https://waleon.blog.csdn.net/article/details/132052748) ![输入图片说明](assets/core/QML%20%E5%8D%95%E4%BE%8B%E7%BB%84%E4%BB%B6.png) 9. [QML 国际化](https://waleon.blog.csdn.net/article/details/129705799) ![输入图片说明](assets/core/QML%20%E5%9B%BD%E9%99%85%E5%8C%96.png) ## 基础元素 1. [QML Rectangle 元素](https://waleon.blog.csdn.net/article/details/129814075) ![输入图片说明](assets/item/QML%20Rectangle%20%E5%85%83%E7%B4%A0.png) 2. [QML Text 元素](https://waleon.blog.csdn.net/article/details/130977326) ![输入图片说明](assets/item/QML%20Text%20%E5%85%83%E7%B4%A0.png) 3. [QML Image 元素](https://waleon.blog.csdn.net/article/details/131197531) ![输入图片说明](assets/item/QML%20Image%20%E5%85%83%E7%B4%A0.png) ## 画布与绘图 1. [QML Canvas 绘制基础形状](https://waleon.blog.csdn.net/article/details/131254637) ![输入图片说明](assets/canvas/QML%20Canvas%20%E7%BB%98%E5%88%B6%E5%9F%BA%E7%A1%80%E5%BD%A2%E7%8A%B6.png) 2. [QML Canvas 绘制图像](https://waleon.blog.csdn.net/article/details/131317973) ![输入图片说明](assets/canvas/QML%20Canvas%20%E7%BB%98%E5%88%B6%E5%9B%BE%E5%83%8F.png) 3. [QML Canvas 绘制文本](https://waleon.blog.csdn.net/article/details/131344711) ![输入图片说明](assets/canvas/QML%20Canvas%20%E7%BB%98%E5%88%B6%E6%96%87%E6%9C%AC.png) 4. [QML Canvas 渐变和阴影](https://waleon.blog.csdn.net/article/details/131394488) ![输入图片说明](assets/canvas/QML%20Canvas%20%E6%B8%90%E5%8F%98%E5%92%8C%E9%98%B4%E5%BD%B1.png) 5. [QML Canvas 像素处理](https://waleon.blog.csdn.net/article/details/131435731) ![输入图片说明](assets/canvas/QML%20Canvas%20%E5%83%8F%E7%B4%A0%E5%A4%84%E7%90%86.png) 6. [QML Canvas 裁剪](https://waleon.blog.csdn.net/article/details/131472181) ![输入图片说明](assets/canvas/QML%20Canvas%20%E8%A3%81%E5%89%AA.png) 7. [QML Canvas 保存画布内容](https://waleon.blog.csdn.net/article/details/131537197) ![输入图片说明](assets/canvas/QML%20Canvas%20%E4%BF%9D%E5%AD%98%E7%94%BB%E5%B8%83%E5%86%85%E5%AE%B9.png) 8. [QML Canvas 几何变换（平移/旋转/缩放）](https://waleon.blog.csdn.net/article/details/131655394) ![输入图片说明](assets/canvas/QML%20Canvas%20%E5%87%A0%E4%BD%95%E5%8F%98%E6%8D%A2%EF%BC%88%E5%B9%B3%E7%A7%BB_%E6%97%8B%E8%BD%AC_%E7%BC%A9%E6%94%BE%EF%BC%89.png) 9. [QML Canvas 制作动画](https://waleon.blog.csdn.net/article/details/131581909) ![输入图片说明](assets/canvas/QML%20Canvas%20%E5%88%B6%E4%BD%9C%E5%8A%A8%E7%94%BB.png) ## 数据存储 1. [QML 保存用户配置](https://waleon.blog.csdn.net/article/details/132073943) ![输入图片说明](assets/storage/QML%20%E4%BF%9D%E5%AD%98%E7%94%A8%E6%88%B7%E9%85%8D%E7%BD%AE.png) 2. [QML 数据库存储](https://waleon.blog.csdn.net/article/details/132156646) ![输入图片说明](assets/storage/QML%20%E6%95%B0%E6%8D%AE%E5%BA%93%E5%AD%98%E5%82%A8.png) ## 网络编程 1. [QML HTTP 请求](https://waleon.blog.csdn.net/article/details/132235514) ![输入图片说明](assets/network/QML%20HTTP%20%E8%AF%B7%E6%B1%82.png) 2. [QML WebSocket 客户端](https://waleon.blog.csdn.net/article/details/132344612) ![输入图片说明](assets/network/QML%20WebSocket%20%E5%AE%A2%E6%88%B7%E7%AB%AF.png) 3. [QML WebSocket 服务器](https://waleon.blog.csdn.net/article/details/132361628) ![输入图片说明](assets/network/QML%20WebSocket%20%E6%9C%8D%E5%8A%A1%E5%99%A8.png) ## Web 开发 1. [QML 创建 Web 混合应用](https://waleon.blog.csdn.net/article/details/134142392) ![输入图片说明](assets/web/QML%20%E5%88%9B%E5%BB%BA%20Web%20%E6%B7%B7%E5%90%88%E5%BA%94%E7%94%A8.png) 2. [QML WebEngineView 调用 JavaScript](https://waleon.blog.csdn.net/article/details/134185517) ![输入图片说明](assets/web/QML%20WebEngineView%20%E8%B0%83%E7%94%A8%20JavaScript.png) 3. [利用 WebChannel 实现 QML 和 Web 双向通信](https://waleon.blog.csdn.net/article/details/134600758) ![输入图片说明](assets/web/%E5%88%A9%E7%94%A8%20WebChannel%20%E5%AE%9E%E7%8E%B0%20QML%20%E5%92%8C%20Web%20%E5%8F%8C%E5%90%91%E9%80%9A%E4%BF%A1.png) 4. [QML WebEngineView 全屏和退出](https://waleon.blog.csdn.net/article/details/134861737) ![输入图片说明](assets/web/QML%20WebEngineView%20%E5%85%A8%E5%B1%8F%E5%92%8C%E9%80%80%E5%87%BA.png) # 关于作者 作者：[一去、二三里](https://waleon.blog.csdn.net/)，爱编程、爱学习、爱生活！ - [个人博客](https://waleon.blog.csdn.net/) - 个人微信：iwaleon（加我微信，邀请入 500 人微信群） - 个人 QQ：550755606 - QQ 技术交流群：242790253 更多干货，请扫码关注我的微信公众号，不要太惊喜哦~ ![微信公众号](assets/qrcode.jpg)