QML 入门与 QtQuick 学习路线之前言
这一篇是 QML 入门序言,初略的讲解 QML 的历史和其作用领域。
在阅读本系列文章之前,确保您已经了解 Qt 的信号与槽,Qt 的父子树,以及 Qt 的 moc 。
什么是 QML
QML 是当年诺基亚主导下开发的一门陈述性编程语言。语法类似 css
,支持 JavaScript
表达式和方法。主要用于界面描述和交互。例如:
Rectangle {id: rectwidth: 400height: rect.width * 2color: "red" }
以上代码就描述了一个高为宽两倍的红色矩形。
qml中的属性绑定与赋值
qml编程规范–import与as
qml编程规范–名字(命名规范)
什么是 QtQuick
类比 c++
与 stl
,QML
的设计初衷就是界面编程,所以 QtQuick
是 QML
的标准图形库。
import QtQuick 2.0
Rectangle {id: rectwidth: 400height: rect.width * 2color: "red" }
Qt 5 中,添加了更多的图形库,例如
QtCharts
,Qt3D
等。
DSL 与 宿主语言的交互
DSL 是特定领域语言的意思,例如 SQL
就是场景的 DSL。
而宿主语言就是用来维系 DSL 运行上下文的语言。
DSL 与 宿主语言的交互主要体现在数据传递,类型映射,数据共享,方法注册与调用,类型注册与调用。
QML 与 Qt(c++) 的关系就是 DSL 与宿主语言的关系,由 Qt 管理 QML 的上下文,通过 QObject*
以及 QVariant
进行交互。
QML 中的 JavaScript
注意,QML 中的 JavaScript 不是浏览器中的 JavaScript,也不是 nodejs 中的 JavaScript,因为 QML 中的 JavaScript 的宿主环境不同于浏览器和 nodejs,所以 QML 中的 JavaScript 不会有诸如 window
,dom
这些浏览器才会预设的全局变量。
JavaScript 是实现了 EMCA Script 5 的规范,然后为其配置了特定上下文的脚本语言。例如浏览器的 JavaScript,以及 nodejs 的 JavaScript。
QML 中的 JavaScript 是运行在QV4
引擎上的。
参照 JavaScript for Qt Quick(QML) 进行学习。
开始起步
工欲善其事必先利其器,学会优先使用 QtQuick UI
项目,学习 QML 事半功倍。
参考QtQuick UI 问答,使用 QtQuick UI
项目可以更快的预览效果。
神秘的 qmlproject 隐藏技——添加过滤文件。
循序渐进
QML 的组件化
TODO
在 QML 中使用多种全局单例
TODO
网络通信
QML 中的 XMLHttpRequest
不同于浏览器的 XMLHttpRequest
,不可以设置一些请求头,例如 Cookie
。
但是仍然可以处理多数的网络请求和请求本地文件。
可以使用
Float32Array
处理二进制文件。
参考Java Web 与 QtQuick 和 QML 中的 XMLHttpRequest 对象
模型与视图
使用QML视图显示数据
QML数据模型(Model)
动画
QML动画和过度
QML 中着色器的应用
将 ShaderToy 上的着色器例子移植到 QML 中
MidoriYakumo/ShaderPlot
Fully QMLxGLSL powered 2D function plotting tool
变换与位移
TODO
突飞猛进
注册类型到 QML 上下文
注册自定义图元到 QML 上下文
qyvlik/VideoItem
这是个极其简单的使用 ffmpeg 解码,然后使用 QML 绘制视频画面, SDL 播放音频的例子。
注册自定义模型到 QML 上下文
Qt For Android 数据模型
自成一派
自定义应用框架
GDPURJYFS/Sparrow
qyvlik/Sparrow.2
线程类在 QML 中的使用
qyvlik/QmlThread
参考:
Qt Quick 4小时入门
cwc1987/QmlBook-In-Chinese
qmlbook/qmlbook
Kreogist/Qt5Memo
在qml工程中怎么使用qmldir进行模块管理