链接: QML Book中文版(QML Book In Chinese)
1、对Qt Quick的初步认识
Qt Quick是Qt5界面开发技术的统称,是以下几种技术的集合:
- QML:界面标记语言
- JavaScript:动态脚本语言
- QT C++:跨平台C++封装库
QML是与HTML类似的一种标记语言。
QML文件采用.qml作为文件格式后缀。作为一种标记语言(类似HTML)一个QML文档有且只有一个根元素
。
示例:
在这个例子中使用Image元素作为根元素,这个元素的宽度、高度与"images/background.png"图像相同。
import QtQuick 2.5
Image{
id:root
source: "1.png"
}
QML中不限制根元素类型,在上面这段代码中我们设置了Image元素的source属性作为我们的背景图像,它也是我们的根元素。
注意:
- 每个元素都有属性。比如Image有width和height,也会有其他的属性如srouce。Image元素的尺寸会自动与source设置的图像匹配。想要自定义Image元素的尺寸必须显式的定义width和height的值。
- 大多数标准元素都在QtQuick模块中,通常我们在导入声明中首先包含这个模块。
- id是个特殊的属性,它可以作为一个标识符在当前文档内引用对应的元素。注意
:id被定义后无法再改变,在程序执行期间也无法被赋值。
2、QT构建模块
QT5是由大量模块组成的。
Qt基础模块:强制性用来支持Qt平台的;
Qt附加模块:是可选的。
2.1、核心基础模块
- Qt Core:核心的非图形类,供其它模块使用。
- Qt GUI:图形用户界面(GUI)组件的基类,包括OpenGL。
- Qt Multimedia:音频,视频,电台,摄像头的功能类。
- Qt Network:简化方便的网络编程的类。
- Qt QML:QML类与JavaScript语言的支持。
- Qt Quick:可高度动态构建的自定义应用程序用户界面框架。
- Qt SQL:集成SQL数据库类。
- Qt Test:Qt应用程序与库的单元测试类。
- Qt WebKit:集成WebKit2的基础实现并且提供了新的QML应用程序接口。在附件模块中查看Qt WebKit Widgets可以获取更多的信息。
- Qt WebKit Widgets :Widgets 来自Qt4中集成WebKit1的窗口基础类。
- Qt Widgets:扩展Qt GUI模块的C++窗口类。
2.2、附加模块
- Qt 3D :一组使3D编程更加方便的应用程序接口和声明。
- Qt Bluetooth:在多平台上使用无线蓝牙技术的C++和QML应用程序接口。
- Qt Contacts:提供访问联系人与联系人数据库的C++和QML应用程序接口。
- Qt Location:提供了定位,地图,导航和位置搜索的C++与QML接口。使用NMEA在后端进行定位。(NMEA缩写,同时也是数据传输标准工业协会,在这里,实际上应为NMEA 0183。它是一套定义接收机输出的标准信息,有几种不同的格式,每种都是独立相关的ASCII格式,逗点隔开数据流,数据流长度从30-100字符不等,通常以每秒间隔选择输出,最常用的格式为”GGA”,它包含了定位时间,纬度,经度,高度,定位所用的卫星数,DOP值,差分状态和校正时段等,其他的有速度,跟踪,日期等。NMEA实际上已成为所有的GPS接收机和最通用的数据输出格式,同时它也被用于与GPS接收机接口的大多数的软件包里。)
- Qt Publish and SubScribe:Qt发布与订阅
- Qt Sensors:访问传感器的QML与C++接口。
- Qt Service Framework:允许应用程序读取,操纵和订阅来改变通知信息。
- Qt System Info :发布系统相关的信息和功能。
- Qt Versit :支持电子名片与日历数据格式(iCalendar)。(iCalendar是“日历数据交换”的标准(RFC 2445)。 此标准有时指的是“iCal”,即苹果公司的出品的一款同名日历软件,这个软件也是此标准的一种实现方式。)
- Qt Wayland:只用于Linux系统。包含了Qt合成器应用程序接口(server),和Wayland平台插件(clients)。
- Qt Feedback :反馈用户的触摸和声音操作。
- Qt JSON DB:对于Qt的一个不使用SQL对象存储。
3、HelloWprld
import QtQuick 2.5
Rectangle{
width: 360
height: 360
Text {
anchors.centerIn: parent
text: "Hello world"
}
MouseArea {
anchors.fill: parent
onClicked: {
Qt.quit();
}
}
}
这个代码指定了显示一个360乘以360像素的一个矩形,矩形中间有一个“Hello World”的文本。鼠标区域覆盖了整个矩形,当用户点击它时,程序就会退出。