QML中元素的分类
QML中的元素可以分为可视化元素和非可视化元素。一个可视化元素（例如矩形框Rectangle）有着几何形状并且可以在屏幕上显示。一个非可视化元素（例如计时器Timer）提供了常用的功能，通常用于操作可视化元素。
基础元素对象Item
Item是所有可视化元素的基础对象，所有其它的可视化元素都继承自Item。它自身不会有任何绘制操作，但是定义了所有可视化元素共有的属性：
- Geometry（几何属性）——x,y（坐标）定义了元素左上角的位置，width，height（长和宽）定义元素的显示范围，z（堆叠次序）定义元素之间的重叠顺序。
- Layout handing（布局操作）——anchors（锚定），包括左（left）、右（right）、上（top）、下（bottom），水平与垂直居中（vertical center，horizontal center），与margins（间距）一起定义了元素与其它元素之间的位置关系。
- Key handling（按键操作）——附加属性key（按键）和keyNavigation（按键定位）属性来控制按键操作，处理输入焦点（focus）可用操作。
- 缩放（scale）和rotate（旋转）转换，通用的x，y，z属性列表转换(transform)，旋转基点设置（transformOrigin）。
- Visual（可视化）——不透明度（opacity）控制透明度，visible（是否可见）控制元素是否显示，clip（裁剪）用来限制元素边界的绘制，smooth（平滑）用来提高渲染质量。
- State definition（状态定义）——states（状态列表属性）提供了元素当前所支持的状态列表，当前属性的改变也可以使用transitions（转变）属性列表来定义状态转变动画。
注意Item通常被用来作为其它元素的容器使用，类似HTML中的div。
为了更好的理解不同的属性，我将会在本篇文章中尽量介绍这些元素的显示效果。基本属性在所有可视化元素中都是可以使用的，并且在这些元素中的工作方式都是相同的。
Rectangle（矩形框元素）
Rectangle是基本元素对象的一个扩展，增加了一个颜色来填充它。它还支持边界的定义，使用border.color（边界颜色），border.width（边界宽度）来自定义边界。可以使用radius（半径）属性来创建一个圆角矩形。
import QtQuick 2.3
import QtQuick.Window 2.2
Window {
visible: true
width: 640
height: 480
Rectangle {
id: rect1
x: 12; y: 12
width: 76; height: 96
color: "cyan"
}
Rectangle {
id: rect2
x: 112; y: 12
width: 76; height: 96
border.color: "cyan"
border.width: 4
radius: 8
}
}上面的代码效果如下：
上述颜色的命名是直接使用颜色的名字，也可以使用其它的方法来指定颜色，比如RGB字符串（'#FF4444')，或者SVG颜色的名称，比如“lightsteelblue”。
此外，填充色与矩形的边框也支持自定义的渐变色。一个渐变色是由一系列的梯度值定义的。每一个值定义了一个位置与颜色。位置标记了y轴上的位置（0=顶部，1=底部）。GradientStop（倾斜点）的颜色标注了颜色的位置。
Rectangle {
id: rect1
x: 12; y: 12
width: 176; height: 96
gradient: Gradient {
GradientStop { position: 0.0; color: "lightsteelblue" }
GradientStop { position: 1.0; color: "slategray" }
}
border.color: "slategray"
radius: 8
}实现效果如下：
注意，一个矩形框如果没有width/height属性，将不可见。如果你有几个相互关联width/height的矩形框，在你组合逻辑中出了错后，可能就会发生矩形框不可见。而且这个元素无法创建一个梯形，最好使用一个已有的图像来创建梯形。
Text（文本元素）
Text可以显示文本，它最值得注意的属性是字符串类型的text属性。这个元素会使用给出的text（文本）与font（字体）来计算初始化的宽度和高度，一个没有设置宽度或者文本的Text元素将不可见，因为默认的初始宽度是0。可以使用字体属性组来改变当前的字体，例如font.family，font.pixelSize，等等。改变文本的颜色值只需要改变颜色属性就可以了。
Text {
text: "我是 Mikasoi 啊!"
color: "red"
font.family: "Sans-serif"
font.pixelSize: 28
}实现效果如下：
文本可以使用horizontalAlignment与Alignment属性来设置它的对齐效果。为了提高文本的渲染效果，可以使用style和styleColor属性来配置文字的外框效果，浮雕效果或者凹陷效果。对于过长的文本，你可能需要使用省略号来表示，可以使用elide属性来完成这个操作。elide属性允许你设置文本左边，右边或者中间的省略位置。如果不想省略号出现，并且希望使用文字换行的方式显示所有的文本，可以使用wrapMode属性，主要wrapMode属性只在明确设置了宽度后才生效。
Text {
width: 350; height: 120
text: "空山新雨后，天气晚来秋。明月松间照，清泉石上流。竹喧归浣女，莲动下渔舟。随意春芳歇，王孙自可留。"
//省略
//elide: Text.ElideMiddle
//换行
wrapMode: Text.WordWrap
style: Text.Sunken
styleColor: "#FF4444"
font.family: "Sans-serif"
font.pixelSize: 28
verticalAlignment: Text.AlignTop
}使用省略的效果如下：
使用换行的效果如下：
Image（图像元素）
Image元素能够显示不同格式的图像（例如PNG、JPG、GIF、BMP等）。source属性提供了图像文件的链接信息，fillMode属性能够控制元素对象的大小调整行为。
Image {
x: 12; y: 12
source: "qrc:/image/1.jpg"
}
Image {
x: 12; y: 450
width: 48
height: 118/2
source: "qrc:/image/1.jpg"
fillMode: Image.PreserveAspectCrop
clip: true
}实现效果如下：
注意，Image元素使用PreserveAspectCrop可以避免裁剪图像数据被渲染到图像边界外。默认情况下裁剪是被禁用的（clip:false）。你需要打开裁剪来约束边界矩形的绘制。这对任何可视化元素都是有效的。
MouseArea（鼠标区域元素）
为了与不同的元素交互，通常需要使用MouseArea元素。这是一个矩形的非可视化元素对象，你可以通过它来捕捉鼠标事件。当用户与可视化端口交互时，mouseArea通常被用来与可视化元素对象一起执行命令。
Rectangle {
id: rect1
x: 12; y: 12
width: 76; height: 96
color: "lightsteelblue"
MouseArea {
id: area
width: parent.width
height: parent.height
onClicked: rect2.visible = !rect2.visible
}
}
Rectangle {
id: rect2
x: 112; y: 12
width: 76; height: 96
border.color: "lightsteelblue"
border.width: 4
radius: 8
}实现效果如下，当点击左侧的Rectangle时，右侧的Rectangle会在显示和隐藏状态之间切换。
