QT Quick初学笔记---第一篇

链接: QML Book中文版(QML Book In Chinese)

1、对Qt Quick的初步认识

Qt Quick是Qt5界面开发技术的统称，是以下几种技术的集合：

1. QML：界面标记语言
2. JavaScript：动态脚本语言
3. 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属性作为我们的背景图像，它也是我们的根元素。

注意：

1. 每个元素都有属性。比如Image有width和height，也会有其他的属性如srouce。Image元素的尺寸会自动与source设置的图像匹配。想要自定义Image元素的尺寸必须显式的定义width和height的值。
2. 大多数标准元素都在QtQuick模块中，通常我们在导入声明中首先包含这个模块。
3. id是个特殊的属性，它可以作为一个标识符在当前文档内引用对应的元素。注意：id被定义后无法再改变，在程序执行期间也无法被赋值。

2、QT构建模块

QT5是由大量模块组成的。
Qt基础模块：强制性用来支持Qt平台的；
Qt附加模块：是可选的。

2.1、核心基础模块

1. Qt Core：核心的非图形类，供其它模块使用。
2. Qt GUI：图形用户界面（GUI）组件的基类，包括OpenGL。
3. Qt Multimedia：音频，视频，电台，摄像头的功能类。
4. Qt Network：简化方便的网络编程的类。
5. Qt QML：QML类与JavaScript语言的支持。
6. Qt Quick：可高度动态构建的自定义应用程序用户界面框架。
7. Qt SQL：集成SQL数据库类。
8. Qt Test：Qt应用程序与库的单元测试类。
9. Qt WebKit：集成WebKit2的基础实现并且提供了新的QML应用程序接口。在附件模块中查看Qt WebKit Widgets可以获取更多的信息。
10. Qt WebKit Widgets ：Widgets 来自Qt4中集成WebKit1的窗口基础类。
11. 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”的文本。鼠标区域覆盖了整个矩形，当用户点击它时，程序就会退出。