《细说 QML》

置顶 已于 2024-05-09 00:08:12 修改
阅读量4.7w 收藏 391
点赞数 152
分类专栏： 细说 QML 文章标签： Qt QML Qt教程 QML教程 QML资料
于 2017-02-27 19:07:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liang19890820/article/details/58064240
版权

作者： 一去、二三里
QQ 技术交流群： 242790253
个人微信： iwaleon（加我微信，邀请入 500 人微信群）
微信公众号： 高效程序员

关于命名

在写本系列文章时，原想起一个“很屌”的名字，无奈语言匮乏，绞尽脑汁也想不出一个好点儿的，就凑合用这个吧 - 《细说 QML》。关于“细说”，新华词典中有记载：

细说 [xì shuō]：详细地解说，也叫“细谈”。

果然，不仅意美、音美、而且形更美，简直 perfect ❤️。后面，我们就朝着这个目标进发吧，尽可能让所有的文章详尽、透彻，即使刚入门的小白，也能让他看得懂，学的会！

在这里插入图片描述

系列说明

Qt 6 已经发布一段时间了，除了新的语法结构之外，工具链也逐步从 QMake 转向了 CMake，加上市面上很少有 Qt 6 的文章，因此我们的教程就基于该版本，跟上时代的步伐，一起去探索学习新特性吧！

本系列特色：

  • 全新的 QML
  • 基于 Qt6 + CMake
  • 清晰的思维导图（帮助快速记忆，更加易于学习）
  • 透彻的示例程序（图文并茂，每篇文章都有完整的示例源码，且解释详细）
  • 超全面的章节（涉及语法、常见元素、模型视图、画布与绘图、动画效果、粒子系统、着色器、多媒体、Web 开发、网络编程、JavaScript、C++ 交互等）

好了，从现在开始，我们将携手走进 QML 的世界。在这里，你不仅能够体验到 QML 的魅力，感受到编程的快乐，还可以顺便学习一门语言，成为一名合格的 Qter。

Ready, Let’s go go go !

资料大全

教程目录

漫谈 QML

  1. 初识 QML
  2. Qt Widgets、QML、Qt Quick 的区别
  3. 将 QML 与 Qt Widgets 相结合

环境搭建

  1. Qt6 for Windows 环境搭建（MinGW）
  2. Qt6 for Windows 环境搭建（MSVC）
  3. Qt6 for Windows 环境搭建（Visual Studio）
  4. Qt6 for Android 环境搭建
  5. Qt6 for Android（HarmonyOS）真机调试

QML 基础

  1. 创建 Qt Quick 项目
  2. Hello, QML!
  3. QML 语法基础
  4. QML 运行环境
  5. QML 使用资源系统
  6. QML 静态值与属性绑定
  7. QML 信号和信号处理器程序
  8. QML 编码约定

QML 核心

  1. QML 中的 5 大布局
  2. QML 颜色表示法
  3. QML 鼠标事件
  4. QML 键盘事件
  5. QML 定时器
  6. QML 中的 z-order
  7. QML 可重用组件
  8. QML 单例组件
  9. QML 国际化

基础元素

  1. QML Rectangle 元素
  2. QML Text 元素
  3. QML Image 元素

动画效果

  1. QML 状态、过渡和动画
  2. QML 状态

模型视图

  1. QML 模型视图
  2. QML Repeater 重复器
  3. QML ListView 列表视图
  4. QML GridView 网格视图
  5. QML Path 路径
  6. QML PathView 路径视图

画布与绘图

  1. QML Canvas 绘制基础形状
  2. QML Canvas 绘制图像
  3. QML Canvas 绘制文本
  4. QML Canvas 渐变和阴影
  5. QML Canvas 像素处理
  6. QML Canvas 裁剪
  7. QML Canvas 保存画布内容
  8. QML Canvas 几何变换（平移/旋转/缩放）
  9. QML Canvas 制作动画

数据存储

  1. QML 保存用户配置
  2. QML 数据库存储

网络编程

  1. QML HTTP 请求
  2. QML WebSocket 客户端
  3. QML WebSocket 服务器

Web 开发

  1. QML 创建 Web 混合应用
  2. QML WebEngineView 调用 JavaScript
  3. 利用 WebChannel 实现 QML 和 Web 双向通信
  4. QML WebEngineView 全屏和退出

QML 与 C++ 交互

  1. 将 C++ 对象嵌入到带有上下文属性的 QML 中
  2. 在 C++ 中与 QML 对象交互
  3. 将 C++ 对象暴露给 QML

文档与示例

文档，一个神奇的东西。六脉神剑的剑谱、独孤九剑的剑诀、辟邪剑谱的袈裟 … 无一例外，都是大佬的必备之物，有了这些文档，他们才可以独步于天下，笑傲于江湖！

在这里插入图片描述

所以呢，文档很重要，要想在编程的道路上有所升华，看文档是必须的。

QML 最好的文档就是 Qt Assistant（助手），里面包含了所有的 QML 相关类 API，以及各种示例。毫不夸张的说，它胜过所有的教程、老师、以及大佬们。为什么呢？其中原因，得等各位看懂了之后，有了体会感悟方能明白。

还有，很多人整天吼吼着要源码，岂不知最经典的就是 Qt 中自带的示例，既全面又详细。进入 Qt Creator，选择：欢迎 -> 示例，输入关键字“QML”，就会出现大量 QML 相关的示例。

希望各位看完之后能有所收获，Good luck – I’m rooting for you !

最后的话

如果觉得写得不错、认为对你有那么一丝丝帮助，可以把本系列文章珍藏起来。

如果它可以给予你一定的引导，欢迎动一动手指，把它顶（赞）起来，同时分享给更多的 Qter。

当你成为 Qt 大佬时，最应该感谢的是自己，如果也顺便感谢一下本系列文章，那是我的福分，感激不尽！

一去丶二三里
关注
  • 152
    点赞
  • 踩
  • 391
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 27
    评论
专栏目录
订阅专栏
qt+qml+vue构建应用程序示例
05-14
一种基于qml加载集成vue构建跨平台应用程序的方法，利用qml作为UI框架的优势，结合vue实现更加灵活和便捷的开发，为开发者提供更多的选择和方便
[QML]事无巨细开始实践QML开发（一）什么是QML，为什么学习QML，先写一个简单的页面
Gefangenes的博客
07-02 1万+
然后比较重要的一点是，QML本身可能对中文的支持有点问题，也就是说QML中如果出现了中文，可能就会出现乱码。当然了，Qt也考虑到了这个问题，当你需要调试这个程序的时候，请右键项目-》属性-》Qt Project Settings->QML->Enable QMl Debugging->改为是，这样之后你在qml文件中打上的断点就可以被命中了，当然了这也带来一个问题，就是当你在之后删掉这个断点后，每次调试或者启动这个程序都会告诉你程序命中了断点但是找不到这个断点，不过这并不是什么首要的问题，不是吗？
QML学习及实战
qq_44891434的博客
06-14 815
QML学习笔记，及其日常用的一些ui实战，以及QML和C++之间的相互通信；
QML了解
热门推荐
weixin_43956958的博客
05-08 2万+
QMl是一种高效的开发UI 的语言。QML（Qt Meta-Object Language，Qt元对象语言）是一种用于描述应用程序用户界面的声明式编程语言，可以使组件以动态方式进行交互，并且允许组件在用户界面中很容易地实现复用和自定义 # view.qml import QtQuick 2.0 Rectangle { width: 200 height: 200 color: "green" Text { text: "Hello World"
qml简介
风起时~微凉的博客
06-09 8442
前言 本文主要对qml语言进行一个基本介绍，主要涉及qml简介、qml基本语法、以及qml与Qt相互调用、qml开发工具等。 qml简介 从Qt4.7版本引入Qt Quick，qml (Qt Meta-Object Language)，是Qt推出的Qt Quick技术的一部分，是一种新增的简便易学的语言。QML是一种陈述性语言，用来描述一个程序的用户界面。文件格式以.qml结尾。语法格式非常像CSS，但又支持javacript形式的编程控制。在QML，一个用户界面被指定为具有属性的对象树。 这使得Q..
[QT编程系列-41]：Qt QML与Qt widget 深入比较，快速了解它们的区别和应用场合
文火冰糖（王文兵）的博客
08-09 1万+
Widgets更适合传统的桌面应用程序开发，对于较复杂的界面和交互需求，以及对细粒度控制更重要的场景，Widgets可能更有优势。综上所述，在选择QML和Widgets之间的Qt技术时，需要综合考虑项目需求、开发团队技能和经验、设计工作流程、跨平台需求和性能要求等因素。同时，QML组件的复用性也更好，可以通过不同的组件和模块来构建和组合复杂的界面。- 有的时候不禁要问，既生widget何生qml，学习成本和选择又多了，其实这正是和这个世界的哲学一样：世界是简单的又是复杂的。为了适应各种需求和满足需要。
qwidget嵌入qml
最新发布
06-15
在Qt开发中，QML（Qt Meta Language）和QWidget是两种不同的UI表示方式。QML以其声明式语法和丰富的动画效果受到青睐，而QWidget则是Qt传统C++编程的基础。将QWidget嵌入到QML中，可以结合两者的优点，实现更灵活、...
QML自定义进度条
08-30
在QML（Qt Quick）中，开发者可以利用其强大的图形化和声明式编程特性来创建自定义组件，比如自定义进度条。QML是Qt框架的一部分，主要用于构建用户界面，它允许通过直观的代码来描述UI元素的外观和行为。在本教程中...
QML,Keyboard
11-19
QML（Qt Meta Language）是Qt框架的一部分，用于构建用户界面。它是一种声明式语言，允许开发者以一种直观、简洁的方式定义UI元素及其行为。在QML中，你可以轻松地创建复杂的用户界面，并且与C++代码进行无缝集成，...
qml TreeView
03-09
在QML（Qt Quick Markup Language）中，`TreeView`组件是一种强大的工具，用于展示层次结构的数据。它在用户界面中以树形结构显示数据，常用于文件管理器、组织架构或者菜单系统等场景。让我们深入了解一下`TreeView...
QML 自定义Button
06-29
QML 中 QtQuick.Controls 模块提供的`Button`组件能购满足我们绝大多数的使用场景，但是很多情况下，尤其是在复杂页面的制作过程中，我们的按钮要保证和界面具有高度的统一性，就需要自己定义按钮的外观及响应动画，...
QML(1)： 什么是QML
读书笔记
09-24 1万+
文章目录前言一、QML 是什么？二、Qt Quick 又是什么?三、简单代码示例四、察看QML视图效果总结 前言   QML 早已经不限于开发手机应用，也可以支持用户开发传统的桌面程序。Qt5 将 QML 脚本编程提到与传统 C++ 部件编程相同的高度，开始力推 QML 界面编程。  使用 QML 开发界面主要有以下几个优点：     1)  QML 非常灵活，可以做出非常炫酷的效果，例如 QQ、360、迅雷等都不在话下。     2) QML 是标记语言，见名知意，非常容易编写
QML学习【一】QML语言基础
qq_51214753的博客
11-07 1万+
QML语言基础
QML基本元素和属性
yang1fei2的博客
04-01 8828
任何知识，都有自己的体系架构，掌握了体系架构，按图索骥的去学习的效率要远高于漫无目的的学习。这里我参照QML的知识框架和一些问题来对QML进行系统的总结。问题列表如下: 1.QML是什么？ 2.为什么使用QML? 3.QML的基本语法？ 4.QML的元素都有哪些？ 1.QML是什么？ QML是Qt推出的Qt Quick技术的一部分，是一种用于描述用户界面的类似html的声明式语言。它将用户界面分解成一些更小的元素，这些元素能够结合成一个组件。这点类似于json结构，每个对象既有自己的行为和属性同
【QML初学者文档】一问读懂QML基础开发（内附大量简单源码）
BenBierBa的博客
04-29 8384
QML是Qt的一大特色，拥有强大的UI制作能力。但是想要学好QML，还需要一些细节和技巧的掌握。本篇文章将为你提供完整的QML知识体系，让你成为Qt的UI魔法师！
QML学习笔记【02】：QML快速入门
hurryddd
12-31 2994
QML语法（QML Syntax） QML是一种描述用户界面的声明式语言。它将用户界面分解成一些更小的元素，这些元素能够结合成一个组件。QML语言描述了用户界面元素的形状和行为。用户界面能够使用JavaScript来提供修饰，或者增加更加复杂的逻辑
Qt 学习之路：QML 基本元素
weixin_30678821的博客
09-15 1207
QML 基本元素可以分为可视元素和不可视元素两类。可视元素（例如前面提到过的Rectangle）具有几何坐标，会在屏幕上占据一块显示区域。不可视元素（例如Timer）通常提供一种功能，这些功能可以作用于可视元素。 本章我们将会集中介绍集中最基本的可视元素：Item、Rectangle、Text、Image和MouseArea。 Item是所有可视元素中最基本的一个。它是所有其它可视元...
QML--概述
贝勒里恩的博客
03-22 3750
QML（Qt Meta Language，Qt元语言）是一个用来描述应用程序界面的声明式脚本语言，自Qt 4.7引入。QML具有良好的易读性，它以可视化组件及其交互和相互关联的方式来描述界面，使组件能在动态行为中互相连接，并支持在一个用户界面上很方便的复用和定制组件。 Qt Quick是Qt为QML提供的一套类库，由QML标准类型和功能组成，包括可视化类型、交互类型、动画类型、模型和视图类型，粒子...
QML的使用
pzs0221的专栏
01-23 3662
生成qml工程，主入口为：main.cpp //main.cpp #include <QGuiApplication> #include <QQmlApplicationEngine> int main(int argc char *argv[]) { QCoreApplication app(argc,argv); QQmlApplicationEngin engin; const QUrl url(QStringLiteral("qrc:/main.qml")); QO
qml调用qml
05-25
在 QML 中，你可以使用 `Qt.include` 关键字来加载其他 QML 文件并将其视为当前文件的一部分。这样，你就可以在其中使用其他 QML 文件中定义的组件。 假设你有两个 QML 文件，分别为 `Main.qml` 和 `Sub.qml`，并且你想在 `Main.qml` 中使用 `Sub.qml` 中定义的组件。你可以按照以下步骤操作： 1. 在 `Main.qml` 中使用 `Qt.include` 加载 `Sub.qml` 文件： ``` // Main.qml import QtQuick 2.0 Item { // 加载 Sub.qml 文件 Qt.include("Sub.qml") // 在此处可以使用 Sub.qml 中定义的组件 SubComponent {} } ``` 2. 在 `Sub.qml` 中定义你想要在 `Main.qml` 中使用的组件： ``` // Sub.qml import QtQuick 2.0 Rectangle { id: subComponent width: 100 height: 100 color: "red" // 在此处定义组件的属性和行为 } ``` 3. 在 `Main.qml` 中使用 `SubComponent` 组件： ``` // Main.qml import QtQuick 2.0 Item { Qt.include("Sub.qml") // 使用 SubComponent 组件 SubComponent {} } ``` 这样，你就可以在 `Main.qml` 中使用 `Sub.qml` 中定义的组件了。注意，你需要在 `Main.qml` 中使用 `Qt.include` 关键字来加载 `Sub.qml` 文件，才能让 `SubComponent` 组件在 `Main.qml` 中得到定义。
评论 27
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一去丶二三里

有收获，再打赏！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值