Qt 学习之路 2(76):QML 和 QtQuick 2
Qt 学习之路 2(76):QML 和 QtQuick 2
前面我们已经了解了 Qt 的一部分内容。这部分内容全部集中在 C++ 方面。也就是说,至今为止我们的程序都是使用 C++ 语言完成的。这在 Qt 5 之前的版本中是唯一的途径。不过,自从 Qt 5 开始,情况有了变化。事实上,从 Qt 4.7 开始,Qt 引入了一种声明式脚本语言,称为 QML(Qt Meta Language 或者 Qt Modeling Language),作为 C++ 语言的一种替代。而 Qt Quick 就是使用 QML 构建的一套类库。
QML 是一种基于 JavaScript 的声明式语言。在 Qt 5 中,QML 有了长足进步,并且同 C++ 并列成为 Qt 的首选编程语言。也就是说,使用 Qt 5,我们不仅可以使用 C++ 开发 Qt 程序,而且可以使用 QML。虽然 QML 是解释型语言,性能要比 C++ 低一些,但是新版 QML 使用 V8,Qt 5.2 又引入了专为 QML 优化的 V4 引擎,使得其性能不再有明显降低。在 Nokia 发布 Qt 4.7 的时候,QML 被用于开发手机应用程序,全面支持触摸操作、流畅的动画效果等。但是在 Qt 5 中,QML 已经不仅限于开发手机应用,也可以用户开发传统的桌面程序。
QML 文档描述了一个对象树。QML 元素包含了其构造块、图形元素(矩形、图片等)和行为(例如动画、切换等)。这些 QML 元素按照一定的嵌套关系构成复杂的组件,供用户交互。
本章我们先来编写一个简单的 QML 程序,了解 QML 的基本概念。需要注意的是,这里的 Qt Quick 使用的是 Qt Quick 2 版本,与 Qt 4.x 提供的 Qt Quick 1 不兼容。
首先,使用 Qt Creator 创建一个 Qt Quick Application。在之后的 Qt Quick Component 选项中,我们选择 Qt Quick 2.0:
完成创建之后,我们可以看到一个 QML 项目所需要的基本文件。这里的项目名字为 qqdemo,而且有一个自己添加的资源文件,所以这个示意图可能与你的不同。
qtquick2applicationviewer 里面的内容是 Qt Creator 帮助我们生成的,这里面的文件一般不会修改。我们可以认为这个文件夹下的文件就是运行 QML 的一个加载器。Application Viewer 用于加载 QML 文件并将其解释显示,类似于浏览器解释运行网页。
我们真正关心的是 main.qml 里面的内容:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
import QtQuick 2.0
Rectangle {
width: 360
height: 360
Text {
text: qsTr("Hello World")
anchors.centerIn: parent
}
MouseArea {
anchors.fill: parent
onClicked: {
Qt.quit();
}
}
}
|
这段代码看起来很简单,事实也的确如此。一个 QML 文档分为 import 和 declaration 两部分。前者用于引入文档中所需要的组件(有可能是类库,也可以是一个 JavaScript 文件或者另外的 QML 文件);后者用于声明本文档中的 QML 元素。
第一行,我们使用import
语句引入 QtQuick 2.0。由于这只是一个示例程序,所以我们没有引入更多的内容。
每一个 QML 有且只有一个根元素,类似于 XML 文档。这个根元素就是这个 QML 文档中定义的 QML 元素,在这个例子中就是一个Rectangle
对象。注意一下这个 QML 文档的具体语法,非常类似于 JSON 的定义,使用键值对的形式区分元素属性。所以我们能够很清楚看到,我们定义了一个矩形,宽度为 360 像素,高度为 360 像素。记得我们说过,QML 文档定义了一个对象树,所以 QML 文档中元素是可以嵌套的。在这个矩形中,我们又增加了一个Text
元素,顾名思义,就是一个文本。Text
显示的是 Hello World 字符串,而这个字符串是由qsTr()
函数返回的。qsTr()
函数就是QObject::tr()
函数的 QML 版本,用于返回可翻译的字符串。Text
的位置则是由锚点(anchor)定义。示例中的Text
位置定义为 parent 中心,其中parent
属性就是这个元素所在的外部的元素。同理,我们可以看到MouseArea
是充满父元素的。MouseArea
还有一个onClicked
属性。这是一个回调,也就是鼠标点击事件。MouseArea
可以看作是可以相应鼠标事件的区域。当点击事件发出时,就会执行onClicked
中的代码。这段代码其实是让整个程序退出。注意我们的MouseArea
充满整个矩形,所以整个区域都可以接受鼠标事件。
当我们运行这个项目时,我们就可以看到一个宽和高都是 360 像素的矩形,中央有一行文本,鼠标点击矩形任意区域就会使其退出:
接下来我们可以改变 main.qml 文件中的“Hello World”字符串,不重新编译直接运行,就会看到运行结果也会相应的变化。这说明 QML 文档是运行时解释的,不需要经过编译。所以,利用 QML 的解释执行的特性,QML 尤其适合于快速开发和原型建模。另外,由于 QML 比 C++ 简单很多,所以 QML 也适用于提供插件等机制。
Qt 学习之路 2(76):QML 和 QtQuick 2的更多相关文章
- Qt 学习之路 2(66):访问网络(2)
Home / Qt 学习之路 2 / Qt 学习之路 2(66):访问网络(2) Qt 学习之路 2(66):访问网络(2) 豆子 2013年10月31日 Qt 学习之路 2 27条评论 上一 ...
- Qt 学习之路 2(51):布尔表达式树模型
Qt 学习之路 2(51):布尔表达式树模型 豆子 2013年5月15日 Qt 学习之路 2 17条评论 本章将会是自定义模型的最后一部分.原本打算结束这部分内容,不过实在不忍心放弃这个示例.来自于 ...
- Qt 学习之路 2(30):Graphics View Framework
Qt 学习之路 2(30):Graphics View Framework 豆子 2012年12月11日 Qt 学习之路 2 27条评论 Graphics View 提供了一种接口,用于管理大量自定义 ...
- Qt 学习之路 2(6):Qt 模块简介
Home / Qt 学习之路 2 / Qt 学习之路 2(6):Qt 模块简介 豆子 2012年8月26日 Qt 学习之路 2 20条评论 Qt 5 与 Qt 4 最大的一个区别之一是底层架构 ...
- Qt 学习之路 2(3):Hello, world!
豆子 2012年8月22日 Qt 学习之路 2 107条评论 想要学习 Qt 开发,首先要搭建 Qt 开发环境.好在现在搭建 Qt 开发环境还是比较简单的.我们可以到 Qt 官方网站找到最新版 ...
- 《Qt 学习之路 2》目录
<Qt 学习之路 2>目录 <Qt 学习之路 2>目录 豆子 2012年8月23日 Qt 学习之路 2 177条评论 <Qt 学习之路 2>目录 序 Qt ...
- QT学习之路--创建一个对话框
Q_OBJECT:这是一个宏,凡是定义信号槽的类都必须声明这个宏. 函数tr()全名是QObject::tr(),被他处理过的字符串可以使用工具提取出来翻译成其他语言,也就是做国际化使用. 对于QT学 ...
- 转载: Qt 学习之路 2归档
Qt 学习之路 2归档 http://www.devbean.net/2012/08/qt-study-road-2-catelog/
- Qt学习之路
Qt学习之路_14(简易音乐播放器) Qt学习之路_13(简易俄罗斯方块) Qt学习之路_12(简易数据管理系统) Qt学习之路_11(简易多文档编辑器) Qt学习之路_10(Qt ...
随机推荐
- C++中使用TCP传文件
在两个文件中都定义文件头和用到的宏: #define MAX_SIZE 10 #define ONE_PAGE 4096 struct FileHead { ]; int size; }; 在客户端发 ...
- solrCloud选举leader的逻辑分析
First call *setup(ElectionContext) to ensure the election process is in it'd. Next calljoinElecti ...
- Solr查询过程源码分析
原文出自:http://blog.csdn.net/flyingpig4/article/details/6305488 <pre name="code" class=&qu ...
- 面试题:基础数据类型 包装类 int Integer
因为在学习集合时知道集合里存放的对象都是Object类型,取出的时候需要强制类型转换为目标类型(使用泛型集合不需要),如int a = (Integer)arrayList.get(0):然后我们就会 ...
- 关闭是否只查看安全传送的网页内容提示框 和 是否允许运行软件,如ActiveX控件和插件提示框
关闭是否只查看安全传送的网页内容提示框 最新编写 爬虫程序,运行程序后,电脑就总是出现下面这个提示框,一遍遍点"是"或"否"繁琐又麻烦.我看得有点不耐烦了.于是 ...
- 命令行编译java的一点总结
今天在使用命令行编译时遇到些问题,顺便又仔细分析了一些基础知识,记录总结一下. 下面使用javac和java命令都是在 D:\Workspace\java目录下执行的: 1 //Inner.java ...
- 使用jQuery完成表单验证
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>注 ...
- jquery数组拼接
var a=[]; var c=[80,90,70,100] var b={'张三':19,'成绩':c}; a.push(b); console.log("测试案例",a); 同 ...
- (11)Web程序保存状态的几种方式,Application,Session,Cookie,ViewState
WEb程序保存状态的方式有这样几种: 1.Application:保存在Application中的数据是全局有效的:Application里面存放的应该是访问多修 改较少并且是全局至少大部分 ...
- Spring Websocket与sockJS结合实现
首先了解Stomp协议:简单的消息文本协议 采用广播机制与队列,可以和Activemq结合使用 Stomp协议学习与实战 http://diaocow.iteye.com/blog/1725186 S ...