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: rect1
    x: 12; y: 12
    width: 76; height: 96
    color: "lightsteelblue"
}
Rectangle {
    id: rect2
    x: 112; y: 12
    width: 76; height: 96
    border.color: "lightsteelblue"
    border.width: 4
    radius: 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: image
    anchors.fill: parent
    width: 100
    height: 100
    source: "qrc:/icon/ico/background.png"
    fillMode: Image.PreserveAspectFit
}

• 使用QQmlImageProvider你可以通过C++代码来创建自己的图像提供器，这允许你动态创建图像并且使用线程加载。

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
}

        鼠标区域是用来给上层元素绑定鼠标事件的，鼠标事件卸载onClicked中。可见上面的效果为在rect1中点击了之后rect2由可见变为不可见，再次点击又变为可见。