这一篇是 QML 入门序言,初略的讲解 QML 的历史和其作用领域。
在阅读本系列文章之前,确保您已经了解 Qt 的信号与槽,Qt 的父子树,以及 Qt 的 moc 。
QML 是当年诺基亚主导下开发的一门陈述性编程语言。语法类似 css
,支持 JavaScript
表达式和方法。主要用于界面描述和交互。例如:
Rectangle {
id: rect
width: 400
height: rect.width * 2
color: "red"
}
以上代码就描述了一个高为宽两倍的红色矩形。
qml中的属性绑定与赋值
qml编程规范–import与as
qml编程规范–名字(命名规范)
类比 c++
与 stl
,QML
的设计初衷就是界面编程,所以 QtQuick
是 QML
的标准图形库。
import QtQuick 2.0
Rectangle {
id: rect
width: 400
height: rect.width * 2
color: "red"
}
Qt 5 中,添加了更多的图形库,例如
QtCharts
,Qt3D
等。
DSL 是特定领域语言的意思,例如 SQL
就是场景的 DSL。
而宿主语言就是用来维系 DSL 运行上下文的语言。
DSL 与 宿主语言的交互主要体现在数据传递,类型映射,数据共享,方法注册与调用,类型注册与调用。
QML 与 Qt(c++) 的关系就是 DSL 与宿主语言的关系,由 Qt 管理 QML 的上下文,通过 QObject*
以及 QVariant
进行交互。
注意,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 隐藏技——添加过滤文件。
TODO
TODO
QML 中的 XMLHttpRequest
不同于浏览器的 XMLHttpRequest
,不可以设置一些请求头,例如 Cookie
。
但是仍然可以处理多数的网络请求和请求本地文件。
可以使用
Float32Array
处理二进制文件。
参考Java Web 与 QtQuick 和 QML 中的 XMLHttpRequest 对象
使用QML视图显示数据
QML数据模型(Model)
QML动画和过度
将 ShaderToy 上的着色器例子移植到 QML 中
MidoriYakumo/ShaderPlot
Fully QMLxGLSL powered 2D function plotting tool
TODO
qyvlik/VideoItem
这是个极其简单的使用 ffmpeg 解码,然后使用 QML 绘制视频画面, SDL 播放音频的例子。
Qt For Android 数据模型
GDPURJYFS/Sparrow
qyvlik/Sparrow.2
qyvlik/QmlThread
参考:
Qt Quick 4小时入门
cwc1987/QmlBook-In-Chinese
qmlbook/qmlbook
Kreogist/Qt5Memo
在qml工程中怎么使用qmldir进行模块管理