QML入门之基本元素
元素分为可视元素与非可视元素，可能元素例如Rectangle、Button等。非可视元素如Timer（定时器）、MouseArea（鼠标区域）等。非可视元素一般用于操作可视元素。
基础元素
Item
Item（基础元素对象）是所有可视元素的基础对象，它们都继承自Item。可是元素存在以下共有属性。
| Group（分组） | Properties（属性） |
|---|---|
| Geometry（几何属性） | x,y（坐标）定义了元素左上角的位置，width，height（长和宽）定义元素的显示范围，z（堆叠次序）定义元素之间的重叠顺序。 |
| Layout handling（布局操作） | anchors（锚定），包括左（left），右（right），上（top），下（bottom），水平与垂直居中（vertical center，horizontal center），与margins（间距）一起定义了元素与其它元素之间的位置关系。 |
| Key handlikng（按键操作） | 附加属性key（按键）和keyNavigation（按键定位）属性来控制按键操作，处理输入焦点（focus）可用操作。 |
| Transformation（转换） | 缩放（scale）和rotate（旋转）转换，通用的x,y,z属性列表转换（transform），旋转基点设置（transformOrigin）。 |
| Visual（可视化） | 不透明度（opacity）控制透明度，visible（是否可见）控制元素是否显示，clip（裁剪）用来限制元素边界的绘制，smooth（平滑）用来提高渲染质量。 |
| State definition（状态定义） | states（状态列表属性）提供了元素当前所支持的状态列表，当前属性的改变也可以使用transitions（转变）属性列表来定义状态转变动画。 |
Rectangle
Rectangle是基本元素对象的扩展，有一个颜色可以来填充它，并且支持边界定义、圆角定义等。
Rectangle {id: rect1x: 12; y: 12width: 76; height: 96color: "lightsteelblue"
}
Rectangle {id: rect2x: 112; y: 12width: 76; height: 96border.color: "lightsteelblue"border.width: 4radius: 8
}其中，
- color的值可以是字符串，例如"red"，也可以是RGB字符串，例如"#AA3344"。
- Rectangle在没有width和height的情况下将会不可见。
Text
文本元素即用来显示字符串的元素了。其包含text、color、font（font.family、font.pixelSize）等属性。
- 可以使用horizontalAlignment与verticalAlignment属性来设置它的对齐效果。
- 可以使用style和styleColor属性来配置文字的外框效果，浮雕效果或者凹陷效果。
- 长文本可以使用elide属性去控制左边、右边或中间省略，并以...表示。
- 换行显示需要指定wrapMode，需要配合宽度才能生效。
Image
图像控件可以显示各种图片格式。其source属性设置图片的路径。fillMode控制图像的大小调整相关。
Image {id: imageanchors.fill: parentwidth: 100height: 100source: "qrc:/icon/ico/background.png"fillMode: Image.PreserveAspectFit
}- 使用QQmlImageProvider你可以通过C++代码来创建自己的图像提供器，这允许你动态创建图像并且使用线程加载。
MouseArea
Rectangle {id: rect1x: 12; y: 12width: 76; height: 96color: "lightsteelblue"MouseArea {id: areawidth: parent.widthheight: parent.heightonClicked: rect2.visible = !rect2.visible}
}Rectangle {id: rect2x: 112; y: 12width: 76; height: 96border.color: "lightsteelblue"border.width: 4radius: 8
}鼠标区域是用来给上层元素绑定鼠标事件的，鼠标事件卸载onClicked中。可见上面的效果为在rect1中点击了之后rect2由可见变为不可见，再次点击又变为可见。