QML 入门与 QtQuick 学习路线之前言

QML 入门与 QtQuick 学习路线之前言

这一篇是 QML 入门序言,初略的讲解 QML 的历史和其作用领域。

在阅读本系列文章之前,确保您已经了解 Qt 的信号与槽,Qt 的父子树,以及 Qt 的 moc

什么是 QML

QML 是当年诺基亚主导下开发的一门陈述性编程语言。语法类似 css,支持 JavaScript 表达式和方法。主要用于界面描述交互。例如:

Rectangle {
    id: rect
    width: 400
    height: rect.width * 2
    color: "red"
}

以上代码就描述了一个高为宽两倍的红色矩形。

qml中的属性绑定与赋值

qml编程规范–import与as

qml编程规范–名字(命名规范)

什么是 QtQuick

类比 c++stlQML 的设计初衷就是界面编程,所以 QtQuickQML 的标准图形库。

import QtQuick 2.0
Rectangle {
    id: rect
    width: 400
    height: rect.width * 2
    color: "red"
}

Qt 5 中,添加了更多的图形库,例如 QtChartsQt3D 等。

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 不会有诸如 windowdom 这些浏览器才会预设的全局变量。

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进行模块管理

你可能感兴趣的:(QtQuick,进阶)