第6篇 Qt Quick入门教程之基础（六）Qt Quick模块之Item
http://files.qter.org/forum/201902/18/111113cqvyyamqcic8r5yk.jpg.thumb.jpg## 导语
从这一篇开始，我们将讲述Qt Quick模块的内容， 也就是说马上可以设计漂亮的图形界面了。
## Qt Quick模块简介
Qt Quick模块作为一个编写QML应用程序的标准库，提供了用于创建用户界面的所有基本类型，使用这些类型可以创建动态可视化组件、接收用户输入、创建数据模型和视图。 Qt Quick模块既提供了QML 语言接口，可以使用 QML 类型来创建用户界面，也提供了 C++ 语言接口，可以使用 C++ 代码来扩展 QML 应用。大家可以在帮助中索引Qt Quick关键字查看相关文档。
Qt Quick 就是为了炫酷流畅的触摸界面效果而生的，所以在Qt Quick中动画和过渡效果是最核心的概念，另外，还可以通过粒子或着色特效来强化视觉效果。在我们使用的Qt 5.12.0 版本中，最新的 QtQuick 模块的版本是 2.12，如果要使用这个版本，就要添加如下导入代码：
```
import QtQuick 2.12
```
当然，这个在我们以前的代码中已经多次看到了。另外，该模块还包 XmlListModel 、LocalStorage 、Particles 、Window 、Dialogs 、Controls 、Layouts 、QtTest等子模块，来提供一些特殊功能。这就是我们在第一个程序中看到的` QtQuick.Window 2.2 ` 的由来。
## Item 类型
在 Qt Quick 模块中包含了众多类型，其中的 Item 类型比较特殊，因为它是所有其他可视化类型的基类型。在这里我们又要引入一个新的概念，就是 `项目` ， 因为英文`items` 翻译过来就是项目，而在Qt Quick中所有可视化类型都基于 Item，它们都被称为 `可视化项目（visual items）`。在后面的教程中，大家根据语境应该可以判断我们所说的项目，到底是可视化项目，还是应用程序本身。对于这个概念的翻译，在其他教程中可能会有别的叫法，但是在我们这里，咱们就统一这样来用。
尽管一个 Item 对象本身没有一个可视化的外观，但是它定义了可视化项目中所有常见的特性，比如 x 、y 、width 、height 、anchors 和键盘处理等。Item 类型最常见的用法是作为其他项目的容器，这样就可以把其他项目作为一个整体，例如：
```
Item {
Image {
source: "tile.png"
}
Image {
x: 80
width: 100
height: 100
source: "tile.png"
}
Image {
x: 190
width: 100
height: 100
fillMode: Image.Tile
source: "tile.png"
}
}
```
下面我们新建 Qt Quick Application - Empty 应用，完成后添加代码，格式如下图所示。
这里我们创建了六组代码，用于对比不同属性组合的效果。整体运行效果如下图所示。
这里主要涉及四个属性：
- z属性：用来设置兄弟项目之间的堆叠顺序，默认值为0，也就是说后面出现的项目默认绘制在前面的项目之上；而如果设置了z值，那么拥有较大z值的项目会出现在较小z值的兄弟项目之上；如果z值为负值，那么这个项目会绘制在其父项目的下面。
- opacity属性：opacity翻译过来就是不透明度，默认值为1.0，取值范围0.0-1.0，当为0.0的时候完全透明。
- rotation属性：设置顺时针旋转的度数，默认值为0。
- scale属性：这个用来设置比例因子，也就是进行缩放。默认值为1.0，当值小于1.0时，会进行缩小；当值大于1.0时，会进行放大；当值为负数时，会进行镜像翻转。
下面我们来看一下这六组代码，大家可以先看看代码，脑补下运行效果，然后看图对比下结果：
```
Item {
id: group1
x: 10; y: 10
Text { z: 10; text: qsTr("group1") }
Image {
z: 1
source: "img1"
width: 250; height: 150
}
Image {
source: "img2"
x: 50; y: 50; width: 250; height: 150
}
}
```
```
Item {
id: group2
x: 400; y: 10
Text { z: 10; text: qsTr("group2") }
Image {
opacity: 0.7
source: "img1"
width: 250; height: 150
}
Image {
source: "img2"
x: 50; y: 50; width: 250; height: 150
rotation: 30
}
}
```
```
Item {
id: group3
x: 800; y: 10
Text { z: 10; text: qsTr("group3") }
Image {
source: "img1"
width: 250; height: 150
}
Image {
opacity: 0.7
source: "img2"
x: 50; y: 50; width: 250; height: 150
scale: 1.3
}
}
```
```
Item {
id: group4
x: 10; y: 400
Text { z: 10; text: qsTr("group4") }
Image {
opacity: 0.7
source: "img1"
width: 250; height: 150
Image {
z: -1
source: "img2"
x: 50; y: 50; width: 250; height: 150
}
}
}
```
```
Item {
id: group5
x: 400; y: 400
Text { z: 10; text: qsTr("group5") }
Image {
opacity: 0.7
source: "img1"
width: 250; height: 150
rotation: 30
Image {
source: "img2"
x: 50; y: 50; width: 250; height: 150
}
}
}
```
```
Item {
id: group6
x: 850; y: 450
Text { z: 10; text: qsTr("group6") }
Image {
source: "img1"
width: 250; height: 150
scale: -1.3
Image {
z: -1
opacity: 0.7
source: "img2"
x: 50; y: 50; width: 250; height: 150
}
}
}
```
## 结语
Item 作为基类型，拥有众多属性和方法，这里咱们只是演示了以后会常用的几个属性，更多的内容会在后面慢慢讲到。
源码：
返回目录
打卡 这是打算更新Qt5 编程入门 这本书吗，买这本书，结果里面都是5.3的，有点尴尬呀 北辰 发表于 2019-3-27 11:00
这是打算更新Qt5 编程入门 这本书吗，买这本书，结果里面都是5.3的，有点尴尬呀 ...
不尴尬，内容都可以用的。 就是看了这个内容采取买的书，效果很好，谢谢作者。
页:
[1]