Qt_QML基础元素对象

基本元素（Basic Elements）

        元素可以被分为可视化元素与非可视化元素。一个可视化元素（例如矩形框Rectangle）有着几何形状并且可以在屏幕上显示。 一个非可视化元素（例如计时器Timer） 提供了常用的功能， 通常用于操作可视化元素。

        现在我们将专注于几个基础的可视化元素， 例如Item（基础元素对象），Rectangle（矩形框），Text（ 文本）， Image（图像） 和MouseArea（鼠标区域） 。

基础元素对象(Item Element)

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 Element）

Rectangle（矩形框） 是基本元素对象的一个扩展， 增加了一个颜色来填充它。 它还支持边界的定义， 使用border.color（边界颜色） ， border.width（边界宽度） 来自定义边界。 你可以使用radius（半径） 属性来创建一个圆角矩形。

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		 // 圆角
}

Rectangle {
	id: rect3
	x: 12; y: 110
	width: 176; height: 96
	gradient: Gradient {
		GradientStop { position: 0.0; color: "lightsteelblue" }
		GradientStop { position: 1.0; color: "slategray" }
	} 
	border.color: "slategray"
}

效果图：

图像元素（ Image Element）

一个图像元素（ Image Element） 能够显示不同格式的图像（ 例如PNG,JPG,GIF,BMP） 。 想要知道更加详细的图像格式支持信息， 可以查看Qt的相关文档。 source属性（ source property） 提供了图像文件的链接信息， fillMode（ 文件模式） 属性能够控制元素对象的大小调整行为。

Image {
        x: 50; y: 60
        source: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1739514725,2209449237&fm=26&gp=0.jpg"
    }

    Image {
        x: 112; y: 12
        width: 48
        height: 118/2
        source: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1739514725,2209449237&fm=26&gp=0.jpg"
//        fillMode: Image.PreserveAspectCrop
        clip: true
    }

    Image {
        x: 50; y: 200
        width: 48
        height: 118/2
        source: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1739514725,2209449237&fm=26&gp=0.jpg"
        fillMode: Image.PreserveAspectCrop
        clip: false
    }

效果图（红色白框手动框选，为了凸显）：

图像元素（Image element） 使用PreserveAspectCrop可以避免裁剪图像数据被渲染到图像边界外。 默认情况下裁剪是被禁用的（clip:false） 。 你需要打开裁剪（clip:true） 来约束边界矩形的绘制。 这对任何可视化元素都是有效的。